使用 Array.prototype.with 的不可變更陣列更新

Jad Joubran

瀏覽器最近推出全新的可互通方法，您可以在陣列上呼叫這些方法： Array.prototype.with()。

本文將探索這個方法的運作方式，以及如何使用這個方法來更新陣列 而不必變更原始陣列

Array.prototype.with(index, value) 簡介

Array.prototype.with(index, value) 方法會傳回其所在陣列的副本 呼叫 index 並將其設為您提供的新 value。

以下範例顯示年齡陣列。您想建立 同時將第二個年齡從 15 個變更為 16 個：

const ages = [10, 15, 20, 25];

const newAges = ages.with(1, 16);
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)

細分程式碼：ages.with(...) 會傳回 ages 變數的副本 而無需修改原始陣列ages.with(1, …) 取代第二個項目 (index = 1)。ages.with(1, 16) 會將第二個項目指派給 16。

這樣一來，您就可以建立包含修改的陣列副本。

如要確保原始陣列維持原始陣列，這個方法就很實用 ，本文將介紹一些相關用途。但現在 看看您使用方括號標記法 會發生什麼事：

const ages = [10, 15, 20, 25];

const newAges = ages;
newAges[1] = 16;
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 16, 20, 25] (Also changed 🙁)

如您所見，這個範例也修改了 ages 變數。提示詞 因為當您指派 ages = newAges 時，JavaScript 不會複製陣列， 而是建立另一個陣列的參照。因此任何其中一項變更 會影響另一個廣告，因為兩者都指向同一個陣列。

Array.prototype.with() 和不變性

不可變性是許多前端程式庫和架構的核心。 幾項：React (及 Redux) 和 Vue

此外，其他程式庫和架構不一定要不變性 並鼓勵更好的表現：Angular 和 Lit

因此，開發人員經常必須使用其他方法傳回陣列副本 但犧牲了程式碼的可讀性：

const ages = [10, 15, 20, 25];

const newAges = ages.map((age, index) => {
    if (index === 1) {
         return 16;
    }
    return age;
});

console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (Remains unchanged)

以下 Codepen 範例說明如何在 React 組合中使用 .with() 使用 useState，以不可變的方式更新項目陣列：

.with() 方法會傳回陣列的副本，因此可以鏈結多個 .with() 呼叫或甚至其他陣列方法。下列範例示範 從陣列中增加第二個和第三個年齡：

const ages = [10, 15, 20, 25];

const newAges = ages.with(1, ages[1] + 1).with(2, ages[2] + 1)

console.log(newAges); // [10, 16, 21, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)

其他不可變動的方法

最近還有以下三種方法可以互通：

• Array.prototype.toReversed()敬上 這個函式會反向陣列，但不會變動 原始陣列中。
• Array.prototype.toSorted()敬上 會自行排序陣列 修改原始陣列
• Array.prototype.toSpliced()敬上 其運作方式是 .splice()，但不會變更原始陣列。

根據 MDN 的複製版本，這三種方法是 應用程式在預期不變性的情況下，這些方法也可使用

總而言之，只要在更新階段 使用本文說明的四種方法之一的 JavaScript。具體而言 .with() 方法可讓您更輕鬆地更新陣列的單一元素 而無需變更原始陣列