JavaScript 不可變陣列方法

在 JavaScript 中，許多傳統的陣列方法（如 reverse, sort, splice）都是「副作用方法」，它們會直接修改原本的陣列內容。

ES2023 引入了一組新的方法：toReversed(), toSorted(), toSpliced(), 以及 with()。這四個方法的共通特點是：它們不會改變原陣列，而是回傳一個修改過的全新陣列。

這非常符合「不可變性」(Immutability) 的開發概念，特別是在 React 等前端框架中使用非常方便。

toReversed() - 反轉陣列

對應 reverse()。

const list = [1, 2, 3];
const reversed = list.toReversed();

console.log(list); // [1, 2, 3] (原陣列不變)
console.log(reversed); // [3, 2, 1] (新陣列)

toSorted() - 排序陣列

對應 sort()。

const letters = ['c', 'a', 'b'];
const sorted = letters.toSorted();

console.log(letters); // ['c', 'a', 'b']
console.log(sorted); // ['a', 'b', 'c']

toSpliced() - 拼接/刪除/替換

對應 splice()，但回傳的是修改後的完整陣列（注意：傳統 splice 回傳的是被刪除的元素）。

const colors = ['red', 'green', 'blue'];
// 從索引 1 開始刪除 1 個，並插入 'yellow'
const newColors = colors.toSpliced(1, 1, 'yellow');

console.log(colors); // ['red', 'green', 'blue']
console.log(newColors); // ['red', 'yellow', 'blue']

with() - 替換特定位置的元素

這是全新的功能，用來替換特定索引值的元素，而不影響其他部分。

const items = ['apple', 'banana', 'orange'];
// 將索引 1 的元素替換成 'mango'
const updatedItems = items.with(1, 'mango');

console.log(items); // ['apple', 'banana', 'orange']
console.log(updatedItems); // ['apple', 'mango', 'orange']

為什麼要使用這些方法？

  1. 避免 Bug: 避免在不知情的情況下修改了共用的陣列。
  2. 語法簡潔: 在過去，如果你想要不改動原陣列進行排序，必須寫成 [...arr].sort()，現在只需 arr.toSorted()。
  3. 支援負索引: 剛提到的 with() 方法也支援負索引（例如 with(-1, 'end')）。

總結

ES2023 的這些新方法讓 JavaScript 處理陣列時更加安全與現代化，推薦在需要產生新狀態或回傳新資料時優先使用。