/

如何檢查 JavaScript 物件

如何檢查 JavaScript 物件

瞭解 JavaScript 提供的檢查變數內容的方法（或其他類型的值）。

JavaScript 提供了許多方法來檢查變數的內容。特別是，讓我們找出如何輸出物件的內容。

假設我們有這個 car 物件，但是我們不知道它的內容，並且我們想要檢查它：

1
2
3
4
5
const car = {
    color: 'black',
    manufacturer: 'Ford',
    model: 'Fiesta'
}

控制台 API

使用控制台 API，您可以將任何物件輸出到控制台。這將適用於任何瀏覽器。

console.log

1
console.log(car)

使用 console.log 檢查物件

console.dir

1
console.dir(car)

使用 console.dir 檢查物件

與以下方式效果相同：

1
console.log('%O', car)

JSON.stringify()

這將以字串形式輸出物件：

1
JSON.stringify(car)

使用 console.dir 檢查物件

透過增加這些參數：

1
JSON.stringify(car, null, 2)

您可以使輸出更好閱讀。最後一個數字代表縮排的空格數：

使用 console.dir 檢查物件

JSON.stringify() 的優點是可以在控制台之外運作，您可以在螢幕上輸出物件。或者，您可以將它與控制台 API 結合起來，在控制台中輸出：

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

將 console.log 與 JSON.stringify 結合

toSource()

類似於 JSON.stringify，toSource() 是大多數類型的方法，僅在 Firefox（以及基於 Firefox 的瀏覽器）中可用：

使用 toSource

值得一提的是，由於它不是標準，只在 Firefox 上實現，所以 JSON.stringify 是一個更好的解決方案。

使用迴圈迭代屬性

for...in 迴圈很方便，它會列印物件的屬性：

1
2
3
4
5
6
7
8
9
const inspect = obj => {
    for (const prop in obj) {
        if (obj.hasOwnProperty(prop)) {
            console.log(`${prop}: ${obj[prop]}`)
        }
    }
}

inspect(car)

迭代屬性

我使用 hasOwnProperty() 避免列印繼承屬性。

您可以決定在迴圈中做什麼，這裡我們使用 console.log 將屬性名稱和值輸出到控制台，但您也可以將它們添加到字串中，然後在網頁上輸出。

如何在 Node.js 中檢查

在 Node.js 中，由 util 套件提供的 inspect() 方法非常有用：

1
util.inspect(car)

在 Node.js 中使用 util.inspect

但是，使用 console.dir() 並啟用 colors 屬性會得到更好的呈現效果：

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

在 Node 中使用 console.dir 並啟用顏色

tags: [“JavaScript”, “object inspection”, “Console API”, “JSON.stringify”, “toSource”, “Node.js”]