資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究如何在 JavaScript 中建立包含多個具有多個巢狀鍵值對的物件的陣列？
JavaScript 是一種用途廣泛的語言，廣泛用於建立動態 Web 應用程式。JavaScript 中最常用的資料結構之一是陣列。陣列是元素的集合，這些元素可以是任何型別，包括物件。在本文中，我們將討論如何在 JavaScript 中建立包含多個具有多個巢狀鍵值對的物件的陣列。
什麼是陣列？
陣列是一種特殊的物件，用於儲存值的集合。這些值可以是任何資料型別，例如數字、字串、布林值，甚至其他陣列。陣列是 JavaScript 中非常強大的功能，並用於許多不同型別的應用程式。
語法
let myArray = [20, 22, 24]; Or const arr = [hello, ‘world’];
建立包含多個物件的陣列
首先，要在 JavaScript 中建立包含多個物件的陣列，我們必須定義一個空陣列，為此我們可以使用 [] 符號。定義陣列後，我們可以使用 push() 方法向陣列中新增物件或多個物件。例如：
let arr = [];
arr.push({
key1: value1,
key2: value2
});
arr.push({
key1: value3,
key2: value4
});
在給定的示例中，我們聲明瞭一個名為“arr”的陣列，其中包含兩個物件。我們使用 push() 方法將每個物件新增到陣列的末尾。這裡的陣列物件使用花括號 {} 定義，其中包含鍵值對。建立包含物件的陣列後，現在可以使用 JavaScript 方法或操作來訪問和操作物件及其屬性。
有多種方法可以訪問陣列中的物件，一種方法是使用 forEach 方法() 遍歷陣列並分別訪問每個物件及其屬性，或者我們也可以使用 map() 或 filter() 等方法來轉換或運算元組中的元素。
向物件新增巢狀鍵值對
建立陣列後，我們現在可以透過在一個物件內定義另一個物件來向物件新增巢狀鍵值對。例如：
let myObj = {
key1: value1,
key2: {
nestedKey1: nestedValue1,
nestedKey2: nestedValue2
}
};
在給定的示例中，我們將 myObj 定義為一個物件，其中包含兩個鍵值對。key2 對的值是另一個包含兩個巢狀鍵值對的物件。
建立包含具有巢狀鍵值對的物件的陣列
要建立包含具有巢狀鍵值對的物件的陣列，我們可以結合上述技術。例如：
let arr = [];
arr.push({
key1: value1,
key2: {
nestedKey1: nestedValue1,
nestedKey2: nestedValue2
}
});
arr.push({
key1: value3,
key2: {
nestedKey1: nestedValue3,
nestedKey2: nestedValue4
}
});
在上面，我們定義了一個空陣列 arr，並使用 push() 方法向其中添加了兩個物件，其中每個物件包含兩個鍵值對，key2 的值為另一個包含兩個巢狀鍵值對的物件。
訪問包含巢狀鍵值對的物件陣列中的資料
方法 1
在這種方法中，我們將使用點表示法和括號表示法的組合來訪問包含巢狀鍵值對的物件陣列中的資料。點表示法允許直接訪問物件的屬性，而在括號表示法中，我們可以使用變數訪問屬性。
例如，我們可以使用點表示法訪問 arr 中第一個物件的 name 屬性，如下所示：
const objOne = arr[0]; const object = objOne.name;
在這裡，我們將 arr 中的第一個物件賦值給一個名為 objOne 的變數。現在使用點表示法，我們可以訪問 objOne 的任何屬性並將其賦值給一個名為 object 的變數。
要訪問 arr 中第二個物件的 address 屬性的 state 屬性，我們可以使用括號表示法，如下所示：
const objTwo = arr[1]; const address = objTwo["city"]["state"];
在這裡，我們將 arr 中的另一個物件賦值給一個名為 objTwo 的變數。現在使用括號表示法，我們可以訪問 objTwo 的 city 屬性，然後訪問巢狀物件的 state 屬性以賦值給 address 變數。
方法 2
另一種訪問包含巢狀鍵值對的物件陣列中的資料的方法是使用 forEach() 方法。在此方法中，使用 forEach() 方法迭代陣列，併為陣列中的每個物件使用 for...in 迴圈來提取每個鍵值對的值。然後將這些值推送到一個新陣列中。
示例 1
此示例顯示瞭如何建立一個包含多個具有巢狀鍵值對的物件的陣列。
我們建立了一個名為 arr 的空陣列，並使用 push() 方法向其中添加了三個物件。每個物件都有一個鍵值對：key1 的值為“value1”，key2 的值為“value2”，依此類推。push() 方法將專案新增到陣列中，並接受一個或多個表示要新增的專案的引數，最後，三個物件作為單獨的引數傳入。
<!DOCTYPE html>
<html>
<body>
<p id="array"></p>
<script>
let arr = [];
arr.push({ key1: "value1" }, { key2: "value2" }, { key3: "value 3" });
document.getElementById("array").innerHTML = JSON.stringify(arr);
</script>
</body>
</html>
示例 2
此示例顯示瞭如何建立兩個包含多個具有巢狀鍵值對的物件的陣列，並將它們新增到一個數組中。
在下面的程式碼中，我們使用 for...in 迴圈遍歷 arr1 和 arr2 中的每個物件，以訪問與每個鍵關聯的值。然後，我們僅使用 arr3.push(object[key]) 將值推送到 arr3 陣列中。
<!DOCTYPE html>
<html>
<body>
<p id="array"></p>
<script>
const arr1 = [
{ key1: "value 1" },
{ key2: "value 2" },
{ key3: "value 3" },
];
const arr2 = [
{ key4: "value 4" },
{ key5: "value 5" },
{ key6: "value 6" },
];
const arr3 = [];
arr1.forEach(function (object) {
for (const key in object) {
arr3.push(object[key]);
}
});
arr2.forEach(function (object) {
for (const key in object) {
arr3.push(object[key]);
}
});
document.getElementById("array").innerHTML = JSON.stringify(arr3);
</script>
</body>
</html>
結論
陣列是 JavaScript 中一種重要的資料結構，可以儲存任何資料型別的各種資訊，包括物件。建立包含多個具有多個巢狀鍵值對的物件的陣列是一個簡單的過程，為此我們首先定義一個空陣列並使用 push() 方法向其中新增物件，其中每個物件都使用 {}（花括號）定義，包含用逗號分隔的鍵值對。要訪問和操作物件及其屬性，我們可以使用 JavaScript 方法。
我們還可以透過在一個物件內定義另一個物件來向物件新增巢狀鍵值對。使用具有巢狀鍵值對的物件的方法可以在 JavaScript 中建立更強大和靈活的資料結構。我們看到了不同的方法，包括點表示法和括號表示法的組合，或者使用 forEach() 方法和 for...in 迴圈來提取每個鍵值對的值，以訪問包含巢狀鍵值對的物件陣列中的資料。
5000+ 次瀏覽
