console.table() - オブジェクトをテーブル形式で出力する
console.table()は、コンソールに、オブジェクトの内容を表形式で表現したものを出力します。同じ構造のオブジェクトを複数含む配列の解析に有用です。
概要
- 名前
- table
- 所属
- console
- IDL
void table(any tabularData, optional sequence<DOMString> properties);
- 仕様書
- https://console.spec.whatwg.org/#table
説明
第1引数(tabularData)には、対象のオブジェクトを指定します。
第2引数(properties)には、配列で、出力対象のキーを指定します。このキー以外は出力されなくなります。
オブジェクトの構造によっては、表形式で出力できないことがあります。
チュートリアル
配列などの構造を表形式で確認できます。
var object = [
{ a: "A1", b: "B1", c: "C1", d: "D1", e: "E1" } ,
{ a: "A2", b: "B2", c: "C2", d: "D2", e: "E2" } ,
{ a: "A3", b: "B3", c: "C3", d: "D3", e: "E3" } ,
{ a: "A4", b: "B4", c: "C4", d: "D4", e: "E4" } ,
{ a: "A5", b: "B5", c: "C5", d: "D5", e: "E5" } ,
] ;
console.table( object ) ;
第2引数は、カラムのフィルタリングに利用できます。
var object = [
{ a: "A1", b: "B1", c: "C1", d: "D1", e: "E1" } ,
{ a: "A2", b: "B2", c: "C2", d: "D2", e: "E2" } ,
{ a: "A3", b: "B3", c: "C3", d: "D3", e: "E3" } ,
{ a: "A4", b: "B4", c: "C4", d: "D4", e: "E4" } ,
{ a: "A5", b: "B5", c: "C5", d: "D5", e: "E5" } ,
] ;
console.table( object, [ "a", "c", "e" ] ) ;
デモ
console.table()のデモです。開発者ツールのコンソールで結果を確認して下さい。コメントアウトを外して、フィルタリングするパターンも試してみましょう。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<body>
<p><button id="run">実行</button></p>
<script>
document.getElementById( "run" ).onclick = function () {
/*** try it! ***/
var object = [
{ a: "A1", b: "B1", c: "C1", d: "D1", e: "E1" } ,
{ a: "A2", b: "B2", c: "C2", d: "D2", e: "E2" } ,
{ a: "A3", b: "B3", c: "C3", d: "D3", e: "E3" } ,
{ a: "A4", b: "B4", c: "C4", d: "D4", e: "E4" } ,
{ a: "A5", b: "B5", c: "C5", d: "D5", e: "E5" } ,
] ;
console.table( object ) ;
// console.table( object, [ "a", "c", "e" ] ) ; // フィルタリング
/*** try it! ***/
}
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● 27+ | ● 34+ | ● 7.1+ | ● | × | ● | ● 7.0+ | ● 4.4+ |
関連記事
- console.dir()
- console.dir()は、コンソールに、オブジェクトの内容をJSONツリー形式で表現したものを出力します。
- console.groupEnd()
- console.groupEnd()は、グループ分けを終了するメソッドです。終了するのは現在の階層のグループです。グループ分けを完全に終了するには、階層分だけ実行する必要があります。または、clear()でリセットできます。
- JSON.stringify()
- JSON.stringify()は、JSONオブジェクトを文字列に変換するメソッドです。文字列に変換する際、オブジェクトはシリアライズされます。例えば、値がnew Date()の場合、toJSON()が実行されて、JSONシリアライズした値に変換されて文字列化します。
- console
- consoleは、開発者ツールで、ログを記録したり、オブジェクトの内容を確認したりするための機能です。