搜尋

首頁 >web前端 >js教程 >如何在JavaScript中從另一個陣列建立一個包含部分物件的陣列？

如何在JavaScript中從另一個陣列建立一個包含部分物件的陣列？

WBOY
WBOY轉載
2023-08-29 10:01:02858瀏覽

如何在JavaScript中從另一個陣列建立一個包含部分物件的陣列？

陣列是 JavaScript 中最常用的資料型別之一。它們用於儲存資料集合並允許有效存取和操作資料。數組可以包含任何類型的數據，包括原始值、對象，甚至其他數組。

從陣列建立部分物件陣列的技術在處理複雜資料集時是一項很有價值的技術。部分物件僅包含原始數組中資料的子集，使我們能夠專注於特定的資料集。這在處理大型資料集時特別有用，因為它可以更輕鬆地只處理必要的資料。

可以使用 map() 方法在 JavaScript 中從另一個陣列建立部分物件的陣列。 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 屬性的物件。我們使用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中文網其他相關文章！

JavaScript 数据类型 运算符 foreach map 对象
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除
上一篇：如何使用 JavaScript 將字元轉換為 ASCII 程式碼？下一篇：如何使用 JavaScript 將字元轉換為 ASCII 程式碼？

相關文章

看更多