zishu's blog

zishu's blog

一个热爱生活的博主。https://zishu.me

js奇怪的知識--console.table

このプロパティは私にとっては少し馴染みがありませんが、偶然見つけた後、MDN を調べた後、興味深いと思い、メモしておきます。

文字通りの意味は「データを表形式で表示する」です。このメソッドは、必須のパラメータであるデータを必要とします。データは配列またはオブジェクトである必要があります。オプションのパラメータである columns も使用できます。

テーブルの最初の列はインデックスです。データが配列の場合、この列のセルの値は配列のインデックスです。データがオブジェクトの場合、それらの値は各オブジェクトのプロパティ名です。注意(FireFox では)console.table は 1000 行しか表示されないように制限されています(最初の行はマークされたインデックスです)。

1. 直接出力#

試してみましょう、console.table をコンソールに出力します。

console.table(["双十一", "双十二", "双十三"]);

PS E:\demo> node 1.js
┌─────────┬──────────┐
│ (index) │  Values  │
├─────────┼──────────┤
1'双十二'
2'双十三'
└─────────┴──────────┘

コピーしてみると、少し変ですが、画像を表示します。

image


2. オブジェクトを定義して出力#

同様に、オブジェクトを定義して出力することもできます。

function Fun(title, date) {
  this.title = title
  this.date = date
}

const one = new Fun("双十一", "11.11")
const two = new Fun("双十二", "12.12")
const three = new Fun("双十三", "あなたはバカですか、13月はありません")

console.table([one, two, three], ["title", "date"])

出力結果は以下のようになります。

image

3.console.table () の使用シーン#

前述のように、エディタで node.js を使用してデータを出力していますが、ブラウザで出力すると異なる効果があるかどうか確認してみましょう。

表示されたデータを見ると、データが正常に出力され、ヘッダーをクリックすると異なる順序でソートできることがわかります。これを見ると... うーん、便利そうですね(偽笑)

使用シーンは、出力されたデータをより直感的に表示し、特定の状況でコードのデバッグに役立つことです。将来的には、このメソッドを活用できるかどうかを見てみましょう。

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。