ES2023 数组方法
ES2023 带来了新的数组方法,其特点是返回修改后的数组副本,而不是修改原始数组。这种小改变可以极大地影响状态管理的安全性,特别是在像 React 这样的框架中。
TypeScript 设置
确保你使用的 TypeScript 版本是 5.2.2 或更高。更新你的 tsconfig.json:
代码语言:json复制{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
// ... 其他配置
}
}
浏览器兼容性
考虑到使用过时浏览器的用户。为了更广泛的兼容性,在你的 TypeScript 配置中选择一个较早的 ECMAScript 版本,比如 "es5"。
React 和更多内容
这些数组方法的不可变性与 React 的状态管理原则相契合。通过返回修改后的数组副本,这些方法与 React 的范式很好地配合,降低了意外状态修改的几率。
示例:sort 对比 toSorted
让我们比较传统的 sort 方法与新的 toSorted 方法:
代码语言:javascript复制// 使用 sort(修改原始数组)
const originalArray = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
const sortedArray = originalArray.sort();
console.log(originalArray); // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]
console.log(sortedArray); // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]
// 使用 toSorted(创建一个新的已排序数组)
const originalArray2 = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
const newSortedArray = originalArray2.toSorted();
console.log(originalArray2); // [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5]
console.log(newSortedArray); // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]
在上面的示例中,sort 修改了原始数组,而 toSorted 创建了一个新的已排序数组,原始数组保持不变。
Array.prototype.toSorted()
其他新方法
考虑探索其他新的数组方法。
Array.prototype.toReversed()
Array.prototype.toSpliced()
Array.prototype.with()
结论
随着你掌握 ES2023 中引入的新的数组方法,确保你的开发环境配置正确以兼容 TypeScript。注意浏览器兼容性,并在必要时在项目中选择一个较早的 ECMAScript 版本。
我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!