使用toReversed()实现数组非破坏性反转克隆

Array.prototype.toReversed() 是 ES2023 引入的非破坏性数组反转方法，它基于原数组创建一个浅拷贝并返回反转后的新数组，具备更清晰的语义和更优的性能表现，兼容现代浏览器及 Node.js 20.2 及以上版本。

在 JavaScript 开发中，数组反转是一个高频操作。以往，开发者习惯使用 array.slice().reverse() 来避免修改原数组。如今，ES2023 提供了更优雅的原生解决方案：Array.prototype.toReversed()。该方法专为“非破坏性反转”设计，直接返回一个顺序反转的全新数组，而原数组保持不变。

基本用法：一行完成克隆 + 反转

其用法极为简洁，直接调用即可实现：

const original = [1, 2, 3, 4];
const reversed = original.toReversed(); // [4, 3, 2, 1]
console.log(original); // [1, 2, 3, 4] ← 原数组未变
console.log(reversed); // [4, 3, 2, 1] ← 全新数组

与传统方式对比：为什么推荐 toReversed()

那么，相比传统做法，toReversed() 的优势究竟体现在何处？

• 语义更清晰：toReversed() 的命名意图一目了然——“获取反转后的版本”。而 slice().reverse() 则表述为“先切片再反转”，增加了一层不必要的操作描述。
• 更强的不可变性保障：这能有效避免开发者误用破坏性的 reverse() 方法，从而意外修改原始数据，显著降低了潜在的 Bug 风险。
• 性能略优：主流 JavaScript 引擎（如 V8）已对其进行了内部优化，执行效率通常优于链式调用的 slice().reverse()。
• 兼容性须知：使用前需确认运行环境兼容性，它要求较新的浏览器（Chrome 112+、Firefox 117+、Safari 17.4+）或 Node.js 20.2 及以上版本。对于旧环境，需要准备相应的回退方案。

实际使用建议

了解了这些优势，在实际项目中可以这样加以运用：

• UI 列表渲染：当需要倒序展示消息、日志等列表，同时必须保留后台原始数据顺序时，可直接使用 const uiList = data.toReversed() 将结果传给前端组件，简洁高效。
• 链式调用：该方法能无缝嵌入方法链中，使代码更流畅，例如：items.filter(x => x.active).toReversed().map(renderItem)。
• 注意“浅拷贝”本质：该方法创建的是新数组，但数组内的对象元素依然是引用共享。若需对对象本身进行克隆，则需额外进行深拷贝处理。
• 不直接支持类数组对象：对于 arguments、NodeList 等类数组结构，需要先用 Array.from() 或扩展运算符将其转为真正的数组，然后再调用该方法。

兼容性兜底写法（按需选用）

如果需要兼容尚未支持此方法的老旧环境，封装一个安全的工具函数是稳妥的做法：

function safeToReversed(arr) {
  return Array.isArray(arr) && typeof arr.toReversed === 'function'
    ? arr.toReversed()
    : [...arr].reverse();
}

该函数会先检测环境是否支持原生方法，若支持则优先使用，否则回退到利用扩展运算符配合 reverse() 的兼容方案，确保功能在所有环境下均能正常执行。