JavaScriptオブジェクトを検査する方法

JavaScriptがオブジェクト(または他の種類の値)を検査するために提供する方法を調べてください

JavaScriptは、変数の内容を検査するための多くの方法を提供します。特に、調べてみましょうオブジェクトのコンテンツを印刷する方法

このオブジェクトがあるとしましょうcar、しかしその内容がわからないので、調べたいと思います。

const car = {
  color: 'black',
  manufacturer: 'Ford',
  model: 'Fiesta'
}

コンソールAPI

を使用してコンソールAPI任意のオブジェクトをコンソールに印刷できます。これはどのブラウザでも機能します。

console.log

console.log(car)

Inspect object using console.log

console.dir

console.dir(car)

Inspect object using console.dir

これはまったく同じように機能します

console.log('%O', car)

JSON.stringify()

これにより、オブジェクトが文字列表現として出力されます。

JSON.stringify(car)

Inspect object using console.dir

これらのパラメータを追加することにより:

JSON.stringify(car, null, 2)

あなたはそれをよりきれいに印刷させることができます。最後の数字は、インデントのスペースの量を決定します。

Inspect object using console.dir

JSON.stringify()画面にオブジェクトを印刷できるため、コンソールの外部で作業できるという利点があります。または、コンソールAPIと組み合わせて、これをコンソールに出力することもできます。

console.log(JSON.stringify(car, null, 2))

Combine console.log with JSON.stringify

toSource()

JSON.stringifyと同様に、toSource()はほとんどのタイプで使用可能なメソッドです。Firefoxのみ(およびそれに基づくブラウザ):

Using toSource

言及する価値はありますが、標準ではなく、Firefoxでのみ実装されているため、JSON.stringifyはより優れたソリューションになります。

ループを使用してプロパティを反復します

ザ・for...inループはオブジェクトのプロパティを出力するので便利です。

const inspect = obj => {
  for (const prop in obj) {
    if (obj.hasOwnProperty(prop)) {
      console.log(`${prop}: ${obj[prop]}`)
    }
  }
}

inspect(car)

Looping properties

私が使うhasOwnProperty()継承されたプロパティの印刷を回避するため。

ループで何をするかを決めることができます。ここでは、を使用してプロパティの名前と値をコンソールに出力します。console.log、ただし、それらを文字列に追加して、ページに印刷することができます。

Node.jsで検査する方法

によって公開されたinspect()メソッドutilパッケージはNode.jsでうまく機能します:

util.inspect(car)

Use util.inspect in Node.js

しかし、はるかに優れたプレゼンテーションはによって提供されますconsole.dir()、 とともにcolors有効なプロパティ:

console.dir(car, { colors: true })

console.dir in Node with colors

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: