📝 JavaScript 的不可变数组革命

This post is also available in English and alternative languages.

JavaScript's Immutable Arrays Revolution.

JavaScript 最近推出了一项重大更新，为数组操作带来了革命性的变化。这一新功能允许开发者在不改变原始数组的前提下，对数组进行元素修改、排序、反转和拆分等操作，从而实现了数组的不可变性。

注意 JavaScript 运行环境版本，低版本运行会出现异常。如果使用 node，通常是 V20 或更高版本。

1. with()

with() 方法创建一个副本并允许更改特定索引处的值。它会产生一个新数组，其中指定索引处的元素被提供的值所替换。

const arr = ["I", "B", "R", "A", "H", "I", "M"];
console.log(arr.with(2, "b")); // ["I", "B", "b", "A", "H", "I", "M"]
// 将第二个索引替换为提供的值 "b"
console.log(arr); // ["I", "B", "R", "A", "H", "I", "M"];

2. toSorted()

toSorted() 方法返回一个全新的数组，该数组中的元素按升序排列。

const arr = ["I", "B", "R", "A", "H", "I", "M"];
console.log(arr.toSorted()); // ['A', 'B', 'H', 'I', 'I', 'M', 'R']
console.log(arr); // ["I", "B", "R", "A", "H", "I", "M"];

const numbers = [1, 10, 21, 2];
console.log(numbers.toSorted((a, b) => a - b)) //[1, 2, 10, 21]

3. toReversed()

toReversed() 方法返回一个新数组，其中元素顺序颠倒。

const arr = ["I", "B", "R", "A", "H", "I", "M"];
console.log(arr.toReversed()); // ['M', 'I', 'H', 'A', 'R', 'B', 'I']

const numbers = [1, 10, 21, 2];
console.log(numbers.toReversed()) //[2, 21, 10, 1]

4. toSpliced()

toSpliced() 方法返回一个新数组，在给定索引处移除和/或替换了一些元素。

const arr = ["I", "B", "R", "A", "H", "I", "M"];
console.log(arr.toSpliced(3, 3, "BAG")); // ['I', 'B', 'R', 'BAG', 'M']

const months = ["Jan", "Mar", "Apr", "May"];
console.log(months.toSpliced(1, 0, "Feb")) // ["Jan", "Feb", "Mar", "Apr", "May"]

不需要在修改数组之前先用 [...arr] 创建数组的副本。