在 JavaScript 中轉儲物件

1. 在 JavaScript 中使用 console.log() 轉儲物件
2. 在 JavaScript 中使用 console.log(JSON.stringyfy()) 轉儲物件
3. 在 JavaScript 中使用 console.dir() 轉儲物件
4. 在 JavaScript 中使用 console.table() 轉儲物件
5. 在 JavaScript 中使用 object.entries() 轉儲物件
6. まとめ

大多數 JavaScript 開發人員喜歡在編碼時使用控制檯檢查變數。有不同的方法可以輸出物件的鍵和屬性。

本文將討論將 JavaScript 物件直接記錄到控制檯視窗的不同方法。

在 JavaScript 中使用 console.log() 轉儲物件

我們可以使用 console.log() 方法將訊息輸出到 Web 控制檯。訊息可以是單個字串或多個 JavaScript 物件。

例子：

console.log({hi: "✋", goodbye: "🖐️", nested: {inner: "🌎"}, array: [100]})

輸出：

在 JavaScript 中使用 console.log(JSON.stringyfy()) 轉儲物件

此方法將 JavaScript 物件或值轉換為 JSON 字串。此方法根據指定的屬性替換或包含值。

我們將使用 null,2 作為附加引數以獲得更好的縮排：console.log(JSON.stringify(obj,null,2))。

我們將使用第二個引數 stringify 來列印匹配相應鍵的屬性：console.log(JSON.stringify(obj,["key"]))。

例子：

console.log(JSON.stringify({hi: "✋", bye: "🖐️", world: {inner: "🌎"}, array: [50]}))
console.log(JSON.stringify({hi: "✋", bye: "🖐️", world: {inner: "🌎"}, array: [50]},null,2))
console.log(JSON.stringify({hi: "✋", goodbye: "🖐️", world: {inner: "🌎"}, array: [50]},['hi']))

輸出：

JSON.stringify 是一個很好的方法，但它只適用於與 JSON 相容的資料，這意味著某些值型別可能會丟失。

在 JavaScript 中使用 console.dir() 轉儲物件

有一種專門用於向控制檯顯示物件的方法，稱為 console.dir()。此方法用於在控制檯中檢視指定 JavaScript 物件的所有屬性。

例子：

console.dir({hi: "✋", bye: "🖐️", world: {inner: "🌎"}, array: [50]})

輸出：

現在，我們將介紹一種用於顯示錶格資料的方法。

在 JavaScript 中使用 console.table() 轉儲物件

console.table() 非常適合在控制檯視窗中顯示物件資料。這是快速物體檢查的絕佳方法。

此函式將資料記錄為表格。陣列中存在的每個元素都將是表中的一行，表中的第一列將是索引。

如果資料是一個陣列，那麼它的值就是陣列索引，如果資料是一個物件，那麼它的值就是屬性的名稱。

例子：

console.table({hi: "✋", bye: "🖐️"})
console.table({hi: "✋", bye: "🖐️", world: {inner: "🌎"}, array: [50]})

輸出：

在 JavaScript 中使用 object.entries() 轉儲物件

object.entries() 方法返回給定物件的字串鍵屬性陣列，其順序與 for...in 迴圈提供的順序相同。唯一顯著的區別是 for...in 迴圈列出了原型鏈中的屬性。

object.entries() 返回的陣列的順序將不取決於物件的定義方式。如果需要特定順序，則必須首先對陣列進行排序。

生成的鍵值陣列可以使用 for...of 迴圈進行迭代。這允許在輸出方面進行更多定製。

下面的程式碼使用 object.entries(object) 和 console.log()。

示例 1：

const objectExample = {hi: "✋", bye: "🖐️", earth: {inner: "🌎"}, array: [50]}
console.log("Use object.entries and a .forEach loop to log key and value pairs to console:")
Object.entries(objectExample).forEach(keyValuePair => {console.log("  ",...keyValuePair)})
// The spread operator is a quick way to expand the array [key, value]

console.log("Alternatively, we can destructure the keys and values using a for...of loop:")
for(const [key,value] of Object.entries(objectExample)) { console.log(`  ${key}: ${value}`) }
// const is optional but recommended

// A for...of example without const - defaults to var in the global scope
for([key,value] of Object.entries(Example)) { `${key}: ${value}` }
console.log("Using var will mean that the key and value are still accessible in global scope")
console.log(`  ${key}: ${value}`) // These vars pollute the global scope and could lead to bugs

輸出：

示例 2：

// ES6 example using for...in loop
var exampleObject = {hi: "✋", bye: "🖐️", earth: {inner: "🌎"}, array: [50]}
for(var property in exampleObject) { console.log(property + ": " + exampleObject[property]) }

輸出：

我們明確希望使用 var 關鍵字，否則 var 將在全域性範圍內隱式宣告。另一件需要注意的是，一個 for...in 迴圈將迴圈通過繼承的屬性，除非我們檢查每個屬性的 object.prototype.hasOwnProperty() 方法。

まとめ

console.log(JSON.stringify()) 方法將物件作為字串記錄到控制檯，只要物件資料是 JSON 型別。

對於複雜物件，object.entries() 方法是一種迴圈物件並將物件記錄到控制檯的方法。

我們也可以使用 alert() - 在這種情況下 alert(JSON.stringify()) 和 object.entries() 使用 alert() 將是記錄內部物件內容的最佳選擇警報。