如何使用 Change Array by Copy？有哪些新的数组方法？

推荐答案

在 ECMAScript 2023 (ES14) 中，引入了几个新的数组方法，这些方法允许我们以不可变的方式修改数组，即返回一个新的数组副本，而不是直接修改原始数组。这些方法统称为 "Change Array by Copy" 方法。以下是这些方法的简要介绍：

1. toReversed(): 返回一个新数组，该数组是原始数组的反转版本。
2. toSorted(compareFn): 返回一个新数组，该数组是原始数组的排序版本。可以提供一个可选的比较函数 compareFn 来定义排序顺序。
3. toSpliced(start, deleteCount, ...items): 返回一个新数组，该数组是通过从原始数组中删除或替换元素而创建的。可以指定起始位置 start、要删除的元素数量 deleteCount 以及要插入的新元素 items。
4. with(index, value): 返回一个新数组，该数组是通过将原始数组中指定索引 index 处的元素替换为 value 而创建的。

这些方法都不会修改原始数组，而是返回一个新的数组副本。

本题详细解读

toReversed()

toReversed() 方法返回一个新数组，该数组是原始数组的反转版本。与 reverse() 方法不同，toReversed() 不会修改原始数组。

const originalArray = [1, 2, 3, 4];
const reversedArray = originalArray.toReversed();

console.log(originalArray); // [1, 2, 3, 4]
console.log(reversedArray); // [4, 3, 2, 1]

toSorted(compareFn)

toSorted(compareFn) 方法返回一个新数组，该数组是原始数组的排序版本。与 sort() 方法不同，toSorted() 不会修改原始数组。可以提供一个可选的比较函数 compareFn 来定义排序顺序。

const originalArray = [3, 1, 4, 2];
const sortedArray = originalArray.toSorted((a, b) => a - b);

console.log(originalArray); // [3, 1, 4, 2]
console.log(sortedArray); // [1, 2, 3, 4]

toSpliced(start, deleteCount, ...items)

toSpliced(start, deleteCount, ...items) 方法返回一个新数组，该数组是通过从原始数组中删除或替换元素而创建的。与 splice() 方法不同，toSpliced() 不会修改原始数组。可以指定起始位置 start、要删除的元素数量 deleteCount 以及要插入的新元素 items。

const originalArray = [1, 2, 3, 4];
const splicedArray = originalArray.toSpliced(1, 2, 5, 6);

console.log(originalArray); // [1, 2, 3, 4]
console.log(splicedArray); // [1, 5, 6, 4]

with(index, value)

with(index, value) 方法返回一个新数组，该数组是通过将原始数组中指定索引 index 处的元素替换为 value 而创建的。与直接修改数组元素不同，with() 不会修改原始数组。

const originalArray = [1, 2, 3, 4];
const newArray = originalArray.with(2, 5);

console.log(originalArray); // [1, 2, 3, 4]
console.log(newArray); // [1, 2, 5, 4]

这些新的数组方法提供了一种更安全和更函数式的方式来处理数组操作，特别是在需要保持原始数组不变的情况下。