如何在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>

在上面的示例中，我们有一个originalArray，其中包含具有id，name和age属性的对象。我们使用map方法遍历数组，并创建一个新数组partialObjects，其中仅包含original array中每个对象的id和name属性。

使用解构赋值

在这种方法中，我们使用了解构赋值和rest运算符来提取属性。解构赋值将从arrayItems数组中的每个对象中提取model和id属性，而rest运算符将提取所有剩余的属性到一个名为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>