如何在 JavaScript 中建立具有多個嵌套鍵值對的多個物件的陣列？
- WBOY轉載
- 2023-09-04 20:13:081207瀏覽
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 中第二個物件的位址屬性的狀態屬性，我們可以使用如下的括號表示法 -
const objTwo = arr[1]; const address = objTwo["city"]["state"];
這裡，我們將 arr 中的另一個物件指派給名為 objTwo 的變數。現在使用括號表示法，我們可以存取 objTwo 的 city 屬性，然後將嵌套物件的 state 屬性指派給位址變數。
方法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 循环来提取每个键值对的值，以访问嵌套对象数组中的数据键值对。
以上是如何在 JavaScript 中建立具有多個嵌套鍵值對的多個物件的陣列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！