如何利用 Array.prototype.toReversed()（ES2023）实现非破坏性的数据反转克隆-js教程-PHP中文网

array.prototype.toreversed()是es2023新增的不可变反转方法，返回新数组且不修改原数组，语义更清晰、性能更优，适用于函数式编程和react等场景。

如何利用 array.prototype.toreversed()（es2023）实现非破坏性的数据反转克隆

Array.prototype.toReversed() 是 ES2023 引入的原生方法，专为“不修改原数组、返回新反转数组”而设计，是 slice().reverse() 的语义更清晰、性能更优的替代方案。

为什么用 toReversed() 而不是 reverse()？

reverse() 是破坏性方法——它直接修改原数组并返回该数组引用；而 toReversed() 总是返回一个**全新数组**，原数组保持完全不变。这对函数式编程、React 状态更新、不可变数据流等场景至关重要。

✅ 安全：无需担心副作用或意外污染原始数据
✅ 明确：方法名直述意图，“to + 过去分词”表示“转为…的新副本”（类似 toSorted()、toSpliced()）
✅ 高效：V8 等引擎对其做了专门优化，比 [...arr].reverse() 或 arr.slice().reverse() 更快且内存友好

基础用法与兼容性注意

调用方式极其简单：

const original = [1, 2, 3, 4];
const reversed = original.toReversed(); // [4, 3, 2, 1]
console.log(original); // [1, 2, 3, 4] —— 未改变

⚠️ 注意：目前（2026年5月）该方法已在 Chrome 117+、Firefox 119+、Safari 17.4+、Edge 117+ 原生支持；若需兼容旧环境，可使用 core-js 提供 polyfill：

import 'core-js/actual/array/to-reversed';
// 或全局引入
// import 'core-js/stable/array/to-reversed';

结合其他不可变操作链式使用

toReversed() 天然适合与其他 ES2023 不可变数组方法组合，形成清晰的数据处理流水线：

const nums = [5, 1, 9, 3, 7];
<p>// 先升序排列，再反转 → 得到降序，全程无副作用
const descending = nums.toSorted((a, b) => a - b).toReversed();
// [9, 7, 5, 3, 1]</p><p>// 过滤偶数后反转
const oddsReversed = nums.filter(n => n % 2 !== 0).toReversed();
// [7, 3, 9, 1]
</p>

这种写法避免了中间变量和临时数组拷贝，语义连贯，逻辑自解释。