array.prototype.toreversed()是es2023新增方法,返回新反转数组而不修改原数组,符合不可变数据原则;而reverse()会就地修改原数组。

Array.prototype.toReversed() 是 ES2023 引入的原生方法,专为「不修改原数组、返回新反转数组」而设计,完美契合不可变数据原则。
为什么不用 reverse()?
Array.prototype.reverse() 会**就地反转原数组**,直接改变原始引用,破坏不可变性。例如:
const arr = [1, 2, 3];<br>arr.reverse(); // → [3, 2, 1]<br>console.log(arr); // [3, 2, 1] ← 原数组已被修改!
toReversed() 的正确用法
它始终返回一个**全新数组**,原数组保持不变:
- 调用方式简洁:直接在数组上调用
.toReversed() - 无参数,不接受回调,仅做顺序翻转
- 返回值是浅拷贝+反转,嵌套对象仍共享引用(符合常规不可变实践预期)
示例:
const original = [1, 2, 3, 4];<br>const reversed = original.toReversed();<br><br>console.log(reversed); // [4, 3, 2, 1]<br>console.log(original); // [1, 2, 3, 4] ← 完全未变
适用场景与注意事项
- 适合函数式编程、React/Redux 等强调状态不可变的环境
- 可链式调用(如
[1,2,3].toReversed().map(x => x * 2)),但注意每次调用都生成新数组 - 暂不支持类数组对象(如 arguments、NodeList),需先转为真数组:
Array.from(nodeList).toReversed() - 浏览器兼容性:Chrome 117+、Firefox 119+、Safari 17.4+;旧环境需 polyfill 或回退到
[...arr].reverse()
对比其他不可变反转写法
过去常用 [...arr].reverse() 或 arr.slice().reverse(),虽可行但略显冗长。toReversed() 更语义清晰、性能略优(引擎可优化),且意图一目了然:
// 旧写法(仍可用,但不够直观)<br>const reversed1 = [...original].reverse();<br>const reversed2 = original.slice().reverse();<br><br>// 新写法(推荐)<br>const reversed3 = original.toReversed();










