資料結構
網路
關係型資料庫管理系統
作業系統
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+ 閱讀量
