Отладка — это навык, который все разработчики должны иметь в своем наборе инструментов.

Отладка – это навык, который должен быть у всех разработчиков.

Console.log() — очень мощный, быстрый и полезный метод отладки в JavaScript. Каждый разработчик использует этот метод для отладки кода в повседневной жизни. В этом нет ничего плохого.

Но сегодня я поделюсь советом, который поможет вам более эффективно отлаживать код JavaScript.

консоль.таблица()

Итак, что такое console.table()

console.table() позволяет печатать массивы и объекты в табличной форме в консоли. Табличный формат работает как шарм, потому что вы получите более полное представление о своих данных. Таким образом, вы быстрее отлаживаете свой код. Вы также можете быстро сортировать столбцы.

Синтаксис:

console.table(data,columns); 
//or
console.table(data);

• data:- Данные для заполнения таблицы. Это должен быть либо массив, либо объект.
• columns:- массив, содержащий имена столбцов, которые должны быть включены в таблицу.

Как реализовать console.table()

console.table() можно реализовать следующими способами:

а. Множество :

Если значением аргумента данных является массив, то столбец индекса будет увеличен на единицу, а начальное значение равно 0.

var fruits=["apple","mango","grapes"];
console.table(fruits);

Выход :

Чтобы отсортировать столбец, щелкните заголовок этого столбца.

б. Массив массивов

Когда мы печатаем массив массивов, имена столбцов будут увеличиваться так же, как значения столбцов индекса.

var teams=[["John","Jari"],["Claus","Andrew"],["Marti","Martha"]];
console.table(teams);

Выход :

С. Объект

Если аргумент данных является объектом, то столбец индекса представляет ключ, а столбцы значений представляют значение, соответствующее этому конкретному ключу.

var user={
     name:"Rajvi",
     age:20,
     gender:"female",
}
console.table(user);

Выход :

д. Массив объектов

Если значением аргумента данных является массив объектов, то их свойства перечисляются в строке, по одному на столбец.

var users = [
    {
        name: "john",
        age: 22
    },
    {
        name: "bella",
        age: 25
    },
    {
        name: "Shinchan",
        age: 30
    }
];
console.table(users);

Выход :

е. Вложенные объекты

Если значением аргумента данных являются вложенные объекты, что означает объекты, свойства которых сами являются объектами, то метки метода console.table() индексируются соответствующим образом со свойствами вложенных объектов.

var employees = {
    leader: {
        firstname: "Rajvi",
        lastname: "Sudo",
        email: "[email protected]"
    },
    manager: {
        firstname: "Vihan",
        lastname: "Bhatt",
        email: "[email protected]"
    },
    developer: {
        firstname: "Smith",
        lastname: "reddy",
        email: "[email protected]"
    }
}
console.table(employees);

Выход :

Что делать, если у вас есть объект, который имеет более 10 свойств

Если у вас очень большой объект, эта таблица может стать очень большой, и данные могут быть трудночитаемыми. Но, к счастью, console.table предоставляет необязательный второй аргумент, который указывает нужные нам столбцы и выводит только их.

var employees = {
    leader: {
        id:"10001",
        firstname: "Andrew",
        lastname: "Story",
        email: "[email protected]"
    },
    manager: {        
        id:"10002",
        firstname: "Amit",
        lastname: "Bhatt",
        email: "[email protected]"
    },
    developer: {
        id:"10003",
        firstname: "Param",
        lastname: "Dutta",
        email: "[email protected]"
    }
}
console.table(employees,["id","firstname"]);

Выход :

Если вам нужен только один столбец, это можно сделать следующим образом:

console.table(employees,"id");

Выход :

Это все для этой статьи. Если вам понравилось и вы сочли это полезным, поставьте лайк и поделитесь им, чтобы оно дошло и до других. Спасибо за прочтение :)