如何在JavaScript中从另一个数组创建一个包含部分对象的数组？-js教程-PHP中文网

如何在JavaScript中从另一个数组创建一个包含部分对象的数组？

WBOY

发布： 2023-08-29 10:01:02

转载

1071人浏览过

如何在javascript中从另一个数组创建一个包含部分对象的数组？

数组是 JavaScript 中最常用的数据类型之一。它们用于存储数据集合并允许有效访问和操作数据。数组可以包含任何类型的数据，包括原始值、对象，甚至其他数组。

从数组创建部分对象数组的技术在处理复杂数据集时是一项很有价值的技术。部分对象仅包含原始数组中数据的子集，使我们能够专注于特定的数据集。这在处理大型数据集时特别有用，因为它可以更轻松地仅处理必要的数据。

可以使用 map() 方法在 JavaScript 中从另一个数组创建部分对象的数组。 map() 方法允许您迭代数组并创建一个新数组，其结果是对原始数组中的每个元素调用提供的函数。

语法

在 JavaScript 中从另一个数组创建部分对象数组的语法如下 -

立即学习“Java免费学习笔记（深入）”；

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方法的函数采用一个参数，即原始数组的单个元素。它通常被称为一个项目。在此函数中，您可以返回一个对象，该对象仅包含您想要从原始对象中提取的属性。

也可以使用解构赋值来实现相同的结果。

let partialObjects = originalArray.map(({property1, property2}) => 
({partialProperty1: property1, partialProperty2: property2}));

登录后复制

请注意，map 方法不会修改原始数组，而是创建一个包含部分对象的新数组。

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

查看详情

创建部分对象数组的方法

使用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 属性的对象。我们使用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() 方法。

以上就是如何在JavaScript中从另一个数组创建一个包含部分对象的数组？的详细内容，更多请关注php中文网其它相关文章！