极客笔记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定义为一个具有两个键值对的对象。键2对的值是另一个具有两个嵌套键值对的对象。
使用嵌套键值对创建包含对象的数组
要创建一个具有嵌套键值对的对象数组，我们可以结合上面讨论的技术。例如 –
let arr = [];
arr.push({
key1: value1,
key2: {
nestedKey1: nestedValue1,
nestedKey2: nestedValue2
}
});
arr.push({
key1: value3,
key2: {
nestedKey1: nestedValue3,
nestedKey2: nestedValue4
}
});
以上，我们已经定义了一个空数组arr，并使用push()方法向其添加了两个对象，每个对象包含两个键值对，其中键2的值是另一个包含两个嵌套键值对的对象。
通过嵌套键值对的对象数组访问数据
方法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数组中，使用arr3.push(object[key])。
<!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循环来提取每个键值对的值，以访问具有嵌套键值对的对象数组中的数据。