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

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方法的函数需要一个参数,即原始数组的一个元素。它通常被称为一个项目。在这个函数中,你可以返回一个只包含你想从原始对象中提取的属性的对象。

也可以使用去结构化赋值来达到同样的效果。

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操作符将提取所有剩余的属性到一个新的对象中,称为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()方法来代替。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

JavaScript 示例