如何檢查 JavaScript 物件

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

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

• 控制台 API
  • console.log
  • console.dir
• JSON.stringify()
• toSource()
• 使用迴圈迭代屬性
• 如何在 Node.js 中檢查

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

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

控制台 API

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

console.log

console.log(car)

console.dir

console.dir(car)

與以下方式效果相同：

console.log('%O', car)

JSON.stringify()

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

JSON.stringify(car)

透過增加這些參數：

JSON.stringify(car, null, 2)

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

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

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

toSource()

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

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

使用迴圈迭代屬性

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

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() 方法非常有用：

util.inspect(car)

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

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