数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 JavaScript 中从另一个数组创建部分对象数组？
数组是 JavaScript 中最常用的数据类型之一。它们用于存储数据集合，并允许高效地访问和操作数据。数组可以包含任何类型的数据，包括原始值、对象，甚至其他数组。
从数组创建部分对象数组的技术是在处理复杂数据集时一项宝贵的技巧。部分对象仅包含原始数组中的一部分数据，使我们能够专注于特定数据集。在处理大型数据集时，这尤其有用，因为它使我们更容易仅处理必要的数据。
在 JavaScript 中，可以使用 map() 方法从另一个数组创建部分对象数组。map() 方法允许你遍历数组，并使用提供的函数对原始数组中的每个元素进行调用，从而创建一个包含结果的新数组。
语法
在 JavaScript 中，从另一个数组创建部分对象数组的语法如下所示：
let originalArray = [
{ property1: value1, property2: value2, ... },
{ property1: value1, property2: value2, ... },
...
];
let partialObjects = originalArray.map(item => {
return { partialProperty1: item.property1, partialProperty2: item.property2 };
});
在此语法中，originalArray 是包含要从中创建部分对象的原始对象的原始数组的名称。map 方法被调用到此数组上，并且一个函数作为参数传递。此函数对原始数组的每个元素进行调用，并用于创建一个新的部分对象数组。
传递给 map 方法的函数采用一个参数，即原始数组的一个元素。它通常被称为 item。在此函数中，你可以返回一个仅包含你想要从原始对象中提取的属性的对象。
也可以使用解构赋值来达到相同的结果。
let partialObjects = originalArray.map(({property1, property2}) =>
({partialProperty1: property1, partialProperty2: property2}));
请注意，map 方法不会修改原始数组，它会创建一个包含部分对象的新数组。
创建部分对象数组的方法
使用 map() 方法
在 JavaScript 中，map() 函数是一个可以被调用到数组上以创建一个新数组的方法，该新数组包含对原始数组中每个元素调用提供的函数的结果。新数组将与原始数组具有相同数量的元素，但每个元素都将根据 map() 方法提供的函数进行转换。
示例
以下是如何使用 map() 方法从另一个数组创建部分对象数组的示例：
<html>
<body>
<p id="result1"></p>
<p id="result2"></p>
<script>
let arrayItems = [
{ id: 1, name: "ABC", model: 2019 },
{ id: 2, name: "PQR", model: 2022 },
{ id: 3, name: "XYZ", model: 2021 },
];
document.getElementById("result1").innerHTML = "Original Array: <br>" +
JSON.stringify(arrayItems);
let partialArrayItems = arrayItems.map((item) => {
return { name: item.name, model: item.model };
});
document.getElementById("result2").innerHTML = "Array of partial objects: <br>" + JSON.stringify(partialArrayItems);
</script>
</body>
</html>
在上面的示例中，我们有一个包含具有 id、name 和 age 属性的对象的 originalArray。我们使用 map 方法遍历数组并创建一个新的 partialObjects 数组，该数组仅包含原始数组中每个对象的 id 和 name 属性。
使用解构
在此方法中，我们使用了解构赋值和剩余运算符来提取属性。解构赋值将从 arrayItems 数组中的每个对象中提取 model 和 id 属性，而剩余运算符将所有剩余的属性提取到一个名为 rest 的新对象中。
示例
<html>
<head>
<title>Creating an array of partial objects from another array using destructuring </title>
</head>
<body>
<p id="result1"></p>
<p id="result2"></p>
<script>
let arrayItems = [
{ id: 1, name: "ABC", model: 2019, category: "car" },
{ id: 2, name: "PQR", model: 2022, category: "bike" },
{ id: 3, name: "XYZ", model: 2021, category: "truck" },
];
document.getElementById("result1").innerHTML = "Original Array: <br>" +
JSON.stringify(arrayItems);
let partialArrayItems = arrayItems.map(({ model, id, ...rest }) => rest);
document.getElementById("result2").innerHTML = "Array of partial objects: <br>" + JSON.stringify(partialArrayItems);
</script>
</body>
</html>
使用 reduce() 方法
reduce() 方法是另一种允许你遍历数组并使用结果创建一个单个值或对象的方法。如果你需要使用来自多个对象的多个部分属性创建一个单个对象，这将非常有用。
示例
<html>
<head>
<title>Creating an array of partial objects from another array using reduce() method</title>
</head>
<body>
<p id="result1"></p>
<p id="result2"></p>
<script>
let arrayItems = [
{ id: 1, name: "ABC", model: 2019, category: "car" },
{ id: 2, name: "PQR", model: 2022, category: "bike" },
{ id: 3, name: "XYZ", model: 2021, category: "truck" },
];
document.getElementById("result1").innerHTML = "Original Array: <br>" +
JSON.stringify(arrayItems);
const partialArrayItems = arrayItems.reduce((res, item) => {
res.push({ id: item.id, model: item.model });
return res;
}, []);
document.getElementById("result2").innerHTML = "Array of partial objects: <br>" + JSON.stringify(partialArrayItems);
</script>
</body>
</html>
结论
总之，map() 方法是用于从 JavaScript 中的现有数组创建新数组的强大工具。它允许你遍历数组，对每个元素执行某些操作，并使用结果创建一个新数组。在处理对象数组并且需要从每个对象中提取特定属性时，它非常有用。
需要注意的是，map() 方法不会修改原始数组，它会创建一个新的数组。因此，如果你想修改原始数组，请改用 forEach() 方法。
10K+ 阅读量
