We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Не стандартно
Эта возможность не является стандартной и стандартизировать её пока никто не собирается. Не используйте её на сайтах, смотрящих во внешний мир: она будет работать не у всех пользователей. Также могут присутствовать большие несовместимости между реализациями и её поведение может в будущем измениться.

Отображает наборы данных в виде таблицы.

Данная функция принимает один обязательный аргумент data, который должен быть представлен в виде массива или объекта, и один дополнительный параметр columns.

функция логгирует аргумент data в виде таблицы. Каждый элемент массива (или каждое свойство, если data - это объект) будет представлять строку таблицы.

Первая колонка таблицы будет озаглавлена как (index). Если data представлена массивом, тогда значения первой колонки будут представлять индексы массива. Если data - объект, тогда значения первой колонки будут представлять свойства объекта.

Примечание: Эта возможность доступна в Web Workers.

Простые наборы

Аргумент data может быть массивом или объектом.

// массив строк

console.table(["apples", "oranges", "bananas"]);

// объект, чьи свойства содержат строки

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var me = new Person("John", "Smith");

console.table(me);

Наборы смешанных типов

Если элементы массива, либо свойства объекта, в свою очередь сами являются массивами или объектами, тогда эти элементы или свойства перечисляются построчно, перечисляя вложенные элементы/свойства в колонках:

// массив массивов

var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
console.table(people);

Table displaying array of arrays

// массив объектов

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");

console.table([john, jane, emily]);

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

Table displaying array of objects

// объект, свойства которого являются объектами

var family = {};

family.mother = new Person("Jane", "Smith");
family.father = new Person("John", "Smith");
family.daughter = new Person("Emily", "Smith");

console.table(family);

Table displaying object of objects

Ограничение видимости клонок

По умолчанию, console.table() отображает все элементы в каждой строке. Вы можете использовать опциональный параметер columns чтобы указать набор отображаемых колонок:

// массив объектов, логгируется только свойство firstName

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");

console.table([john, jane, emily], ["firstName"]);

Table displaying array of objects with filtered output

Сортировка колонок

Вы можете отсортировать необходимую колонку, кликнув по её заголовку.

Синтаксис

console.table(data [, columns]);

Параметры

data
Данные для отображения. Могут быть представленны массивом или объектом.
columns
Массив названий колонок, которые следует отобразить.

Спецификации

Спецификация Статус Комментарий
Console API
Определение 'console.table()' в этой спецификации.
Живой стандарт Initial definition

Поддержка браузерами

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Да) 34.0 (34.0) Нет (Да) Нет
Available in workers (Да) 38.0 (38.0) ? (Да) ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? 34.0 (34.0) ? ? ?
Available in workers ? 38.0 (38.0) ? ? ?

Метки документа и участники

Метки: 
Внесли вклад в эту страницу: xefimx
Обновлялась последний раз: xefimx,