MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Console.table()

非標準
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

表形式のデータを、表で表示します。

この関数は必須の引数 data があり、これは配列またはオブジェクトでなければなりません。また、省略可能な引数 columns もあります。

data を表として出力します。配列の各要素 (data がオブジェクトである場合は、列挙可能なプロパティ) が、表の行になります。

表の 1 番目の列に、(添字) というラベルがつきます。data が配列である場合、この値は配列の添字になります。data がオブジェクトである場合、この値はプロパティ名になります。(Firefox では) console.table は表示する行が 1000 行 (最初の行は見出し) に制限されていますので注意してください。

註: This feature is available in 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);

複合的な型の集合

配列の要素やオブジェクトのプロパティ自体が配列やオブジェクトである場合、それらの要素やプロパティを 1 列ずつ置く形で、各行に列挙します:

// 配列の配列

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() の定義
勧告改訂案 最初期の定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート (有) 34.0 (34.0) 未サポート (有) 未サポート
Worker で使用可能 (有) 38.0 (38.0) ? (有) ?
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? 34.0 (34.0) ? ? ?
Worker で使用可能 ? 38.0 (38.0) ? ? ?

ドキュメントのタグと貢献者

 このページの貢献者: yyss
 最終更新者: yyss,