SYNCERのロゴ
アイキャッチ画像

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)には、配列で、出力対象のキーを指定します。このキー以外は出力されなくなります。

オブジェクトの構造によっては、表形式で出力できないことがあります。

console.table()の実行例 (Chrome)
console.table()の実行例 (Chrome)

チュートリアル

配列などの構造を表形式で確認できます。

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>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
27+ 34+ 7.1+× 7.0+ 4.4+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月5日 (木)
コンテンツを公開しました。