ES2023 配列メソッド - toSorted, toReversed, toSpliced, with

ES2023 不変配列メソッド

ECMAScript 2023は、既存の変更系メソッドに対する不変の代替手段となる4つの新しい配列メソッドを導入しました。React、Redux、元の配列を変更してはいけないあらゆるコードで重要です。

toSorted()

sort()の不変バージョン：

const nums = [3, 1, 4, 1, 5];
const sorted = nums.toSorted((a, b) => a - b);
// sorted: [1, 1, 3, 4, 5]
// nums: [3, 1, 4, 1, 5]（変更なし）

toReversed()

reverse()の不変バージョン：

const arr = [1, 2, 3, 4, 5];
const reversed = arr.toReversed();
// reversed: [5, 4, 3, 2, 1]
// arr: [1, 2, 3, 4, 5]（変更なし）

toSpliced()

splice()の不変バージョン：

const months = ["Jan", "Mar", "Apr"];
const fixed = months.toSpliced(1, 0, "Feb");
// fixed: ["Jan", "Feb", "Mar", "Apr"]
// months: ["Jan", "Mar", "Apr"]（変更なし）

with()

ブラケット代入arr[i] = valueの不変バージョン：

const arr = ["a", "b", "c", "d"];
const updated = arr.with(1, "B");
// updated: ["a", "B", "c", "d"]
// arr: ["a", "b", "c", "d"]（変更なし）

ブラウザサポート

4つすべてのメソッドがChrome 110+、Firefox 115+、Safari 16.4+、Node.js 20+でサポートされています。