更新 JavaScript 陣列中的物件

1. 在 JavaScript 中使用 map() 更新物件
2. 在 JavaScript 中使用 findIndex() 更新物件

陣列是 JavaScript 中具有固定數字鍵和動態值的物件，可以在單個變數中包含任意數量的資料。陣列可以是一維或多維的。JavaScript 陣列可以直接儲存值，也可以儲存 JavaScript 物件。與其他語言不同，JS 陣列可以在同一陣列的不同索引處包含不同的資料型別。

在今天的帖子中，我們將瞭解如何在 JavaScript 中更新陣列的物件。

JavaScript 提供了兩種更新物件的方法，使用 map() 和 findIndex()。

在 JavaScript 中使用 map() 更新物件

這個由 JavaScript 提供的內建陣列方法遍歷原始陣列並建立新陣列，根據指定的條件完成元素。除了箭頭函式，你還可以傳遞迴調函式。map() 和 forEach() 之間的唯一區別是 map() 將建立新陣列，而 forEach() 會改變原始陣列。

JavaScript 中 map() 的語法

Array.prototype.map(element => $updateCondition);
Array.prototype.map($callbackFn);

引數

$updateCondition：這個強制性引數指定應該為每個元素執行哪個操作。

$callbackFn：它是一個強制引數，它為要呼叫的陣列的每個元素指定一個函式。每次呼叫該函式時，它都會將結果返回到新陣列。

返回值

返回新陣列，其中元素是回撥函式的結果。

示例程式碼：

const osArray = [
    {id: 0, name: "Windows"},
    {id: 1, name: "Linux"},
    {id: 2, name: "MacOS"},
];
    
const updatedOSArray = osArray.map(p =>
  p.id === 1
    ? { ...p, name: 'Ubuntu' }
    : p
);

console.log("After update: ", updatedOSArray);

輸出：

After update:  [
    {id: 0, name: "Windows"},
    {id: 1, name: "Ubuntu"},
    {id: 2, name: "MacOS"}
]

在 JavaScript 中使用 findIndex() 更新物件

這個內建的陣列方法由 JavaScript 提供，它會查詢值與指定條件匹配的元素的索引。除了箭頭函式，你還可以傳遞迴調函式。findIndex() 和 indexOf() 這兩種方法之間只有一個區別。findIndex() 用於複雜的匹配條件或物件資料型別，而 indexOf() 用於簡單條件或原始資料型別。

JavaScript 中 findIndex() 的語法

Array.prototype.findIndex(element => $condition);
Array.prototype.findIndex($callbackFn);

引數

$condition：這是一個強制性引數。使用者可以傳遞與陣列元素相關的任何條件，並找到第一個滿足條件的匹配元素。

返回值

返回滿足指定條件的數字索引。如果沒有元素滿足指定條件，則返回 -1。

示例程式碼：

const osArray = [
    {id: 0, name: "Windows"},
    {id: 1, name: "Linux"},
    {id: 2, name: "MacOS"},
];
    
elementIndex = osArray.findIndex((obj => obj.id == 1));
console.log("Before update: ", osArray[elementIndex]);
osArray[elementIndex].name = "Ubuntu";
console.log("After update: ", osArray[elementIndex]);

輸出：

Before update: {id: 1, name: 'Linux'}
After update: {id: 1, name: 'Ubuntu'}