如何存取和處理巢狀物件、陣列或 JSON？

Question

我有一個包含物件和陣列的巢狀資料結構。如何提取訊息，即訪問特定或多個值（或鍵）？

例如：

var data = {
    code: 42,
    items: [{
        id: 1,
        name: 'foo'
    }, {
        id: 2,
        name: 'bar'
    }]
};

如何存取items中第二項的name？

Answer 1

您可以透過這種方式存取它

data.items[1].name

或

data["items"][1]["name"]

兩種方式都是平等的。

Answer 2

預備知識

JavaScript 只有一個可以包含多個值的資料型別：物件。 陣列是一種特殊形式的物件。

（普通）物件有以下形式

{key: value, key: value, ...}

數組的形式為

[value, value, ...]

陣列和物件都公開一個key -> value 結構。數組中的鍵必須是數字，而任何字串都可以用作物件中的鍵。鍵值對也稱為“屬性”。

可以使用點符號存取屬性

const value = obj.someProperty;

或括號表示法，如果屬性名稱不是有效的JavaScript 識別碼名稱^#[spec]#，或名稱是變數的值：

// the space is not a valid character in identifier names
const value = obj["some Property"];

// property name as variable
const name = "some Property";
const value = obj[name];

因此，陣列元素只能使用括號表示法來存取：

const value = arr[5]; // arr.5 would be a syntax error

// property name / index as variable
const x = 5;
const value = arr[x];

等等...JSON 怎麼樣？

JSON 是資料的文字表示形式，就像 XML、YAML、CSV 等。要處理此類數據，首先必須將其轉換為 JavaScript 資料類型，即陣列和物件（剛剛解釋瞭如何處理這些資料）。問題 在 JavaScript 中解析 JSON？ 中解釋如何解析 JSON。

進一步閱讀材料

如何存取陣列和物件是 JavaScript 基礎知識，因此建議閱讀 MDN JavaScript 指南，尤其是各個部分

• 使用物件
• 陣列
• Eloquent JavaScript - 資料結構

---

---

存取巢狀資料結構

嵌套資料結構是引用其他數組或對象的數組或對象，即它的值是數組或對象。可以透過連續應用點或括號表示法來存取此類結構。

這是一個例子：

const data = {
    code: 42,
    items: [{
        id: 1,
        name: 'foo'
    }, {
        id: 2,
        name: 'bar'
    }]
};

假設我們想要存取第二個項目的名稱。

以下是我們如何逐步做到這一點：

如我們所見，data 是一個對象，因此我們可以使用點表示法來存取其屬性。 items 屬性的存取方式如下：

data.items

該值是一個數組，要存取它的第二個元素，我們必須使用括號表示法：

data.items[1]

這個值是一個對象，我們又使用點表示法來存取name屬性。所以我們最終得到：

const item_name = data.items[1].name;

或者，我們可以對任何屬性使用括號表示法，特別是如果名稱包含使其對點表示法無效的字元：

const item_name = data['items'][1]['name'];

---

我正在嘗試存取某個屬性，但只得到 undefined 資訊？

大多數情況下，當您遇到未定義時，物件/陣列根本不具有具有該名稱的屬性。

const foo = {bar: {baz: 42}};
console.log(foo.baz); // undefined

使用console.log 或 console.dir 和檢查物件/陣列的結構。您嘗試存取的屬性實際上可能是在嵌套物件/陣列上定義的。

console.log(foo.bar.baz); // 42

---

如果屬性名稱是動態的並且我事先不知道它們怎麼辦？

如果屬性名稱未知或我們想要存取物件/陣列元素的所有屬性，我們可以使用for...in ^#[MDN]# 循環物件和for ^[MDN] 循環數組以迭代所有屬性/元素。

物件

要迭代data的所有屬性，我們可以迭代物件，如下所示：

for (const prop in data) {
    // `prop` contains the name of each property, i.e. `'code'` or `'items'`
    // consequently, `data[prop]` refers to the value of each property, i.e.
    // either `42` or the array
}

根據物件的來源（以及您想要執行的操作），您可能必須在每次迭代中測試該屬性是否確實是物件的屬性，還是繼承的屬性。您可以使用 Object#hasOwnProperty代码> [MDN]。

作為for...in 和hasOwnProperty 的替代方案，您可以使用Object.keys ^{[MDN ]} 取得屬性名稱陣列：

Object.keys(data).forEach(function(prop) {
  // `prop` is the property name
  // `data[prop]` is the property value
});

陣列

要迭代 data.items 陣列 的所有元素，我們使用 for 迴圈：

for(let i = 0, l = data.items.length; i 

也可以使用for...in 來迭代數組，但有一些原因應該避免這種情況：為什麼在JavaScript 中使用數組的“for(var item in list)”被認為是不好的做法？ .

隨著ECMAScript 5 的瀏覽器支援不斷增加，陣列方法forEach [MDN] 也成為一個有趣的替代方案：

data.items.forEach(function(value, index, array) {
    // The callback is executed for each element in the array.
    // `value` is the element itself (equivalent to `array[index]`)
    // `index` will be the index of the element in the array
    // `array` is a reference to the array itself (i.e. `data.items` in this case)
});

在支援ES2015 (ES6) 的環境中，您也可以使用for...of[MDN] 循環，其中不僅適用於數組，還適用於任何可迭代物件：

for (const item of data.items) {
   // `item` is the array element, **not** the index
}

在每次迭代中，for...of 直接為我們提供可迭代的下一個元素，沒有「索引」可供存取或使用。 



如果我不知道資料結構的「深度」怎麼辦？ 

除了未知的鍵之外，資料結構的「深度」（即有多少個嵌套物件）也可能是未知的。如何存取深度嵌套的屬性通常取決於確切的資料結構。 

但如果資料結構包含重複模式，例如二元樹的表示形式，解決方案通常會包含遞迴 [維基百科]存取資料結構的每個層級。 

下面是取得二元樹的第一個葉節點的範例：
雷雷



雷雷