如何存取和處理巢狀物件、陣列或 JSON?
P粉864872812
P粉864872812 2023-10-09 19:02:22
0
2
611

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

例如:

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

如何存取items中第二項的name

P粉864872812
P粉864872812

全部回覆(2)
P粉476547076

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

data.items[1].name

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

兩種方式都是平等的。

P粉002023326

預備知識

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 指南,尤其是各個部分



存取巢狀資料結構

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

這是一個例子:

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.logconsole.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...inhasOwnProperty 的替代方案,您可以使用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 直接為我們提供可迭代的下一個元素,沒有「索引」可供存取或使用。


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

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

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

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

雷雷

雷雷
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板