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

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

瀏覽器支援

  • Chrome:110。
  • Edge:110,
  • Firefox:115。
  • Safari:16.

資料來源

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

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)

其他不可變動的方法

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

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

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