JavaScript Array toReversed() 方法（超详细）

JavaScript Array toReversed() 方法

toReversed() 是 JavaScript ES262 第六版（2025 年新增）中 Array 对象的一个新方法，它用于返回一个新数组，其元素顺序是原数组的逆序。该方法不会修改原数组，而是创建并返回一个新的数组实例。

快速解决

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

此方法适用于需要逆序数组但又不想修改原数组的场景，比如数据展示、排序逻辑预处理等。

常用方法

详细说明

toReversed() 与 reverse() 的区别

toReversed() 与 reverse() 都可以实现数组的逆序操作，但二者在行为上有关键区别：

• toReversed()：返回一个新数组，不修改原数组。
• reverse()：原地修改原数组，并返回修改后的数组。

const arr1 = [10, 20, 30];
const arr2 = arr1.toReversed();
console.log(arr1); // [10, 20, 30]，原数组未改变
console.log(arr2); // [30, 20, 10]，返回新数组

toReversed() 的使用场景

当你需要保留原始数组不变，同时获取一个逆序版本时，toReversed() 是最佳选择。例如：

const numbers = [1, 2, 3, 4, 5];
const displayNumbers = numbers.toReversed(); // 用于展示的逆序数组
console.log(displayNumbers); // [5, 4, 3, 2, 1]
console.log(numbers);        // [1, 2, 3, 4, 5]，原数据保持不变

toReversed() 与 slice().reverse() 的比较

虽然 slice().reverse() 也能生成新数组，但它的性能和可读性不如 toReversed()。toReversed() 是原生方法，代码更简洁，也更高效。

const list = ['a', 'b', 'c'];
const reversed1 = list.toReversed(); // 推荐写法
const reversed2 = list.slice().reverse(); // 传统写法

console.log(reversed1); // ['c', 'b', 'a']
console.log(reversed2); // ['c', 'b', 'a']

高级技巧

链式调用与组合使用

toReversed() 可以与其他数组方法结合使用，例如 toSorted()，用于先排序后逆序，适用于数据处理链中。

const data = [5, 2, 9, 1, 3];
const result = data.toSorted().toReversed(); // [9, 5, 3, 2, 1]
console.log(result);

处理嵌套数组

toReversed() 仅对数组的一层元素进行逆序，不会递归处理嵌套数组。

const nested = [[1, 2], [3, 4], [5, 6]];
const reversedNested = nested.toReversed(); // [[5, 6], [3, 4], [1, 2]]
console.log(reversedNested);

如需递归逆序，需手动处理嵌套结构。

常见问题

Q1: toReversed() 会不会修改原数组？

A1: 不会。toReversed() 返回的是一个新数组，原数组保持不变。

Q2: toReversed() 是否支持所有浏览器？

A2: 由于是 ES262 第六版的新特性，目前只有较新的浏览器和 Node.js 环境支持。建议查看 Can I Use 确认兼容性。

Q3: toReversed() 和 slice().reverse() 有什么不同？

A3: toReversed() 是数组的原生方法，语义更清晰，性能更好；而 slice().reverse() 是组合写法，虽然也能实现相同功能，但代码略显冗余。

Q4: toReversed() 是否会跳过数组中的空位？

A4: 会。toReversed() 在处理稀疏数组（有空位）时，会将空位也一并逆序保留。

实战应用

示例一：数据展示顺序控制

在前端中，常需要根据业务逻辑调整展示顺序，比如从最新到最旧展示文章列表：

const posts = [
  { id: 1, title: '第一篇' },
  { id: 2, title: '第二篇' },
  { id: 3, title: '第三篇' },
];

const newestToOldest = posts.toReversed(); // 用于展示的逆序数组
console.log(newestToOldest); // [ { id: 3, title: '第三篇' }, { id: 2, title: '第二篇' }, { id: 1, title: '第一篇' } ]

示例二：与 toSorted() 联合使用排序

在排序后立即逆序输出结果，适用于排行榜等场景：

const scores = [85, 92, 78, 99, 88];
const sortedScores = scores.toSorted(); // [78, 85, 88, 92, 99]
const topToBottom = sortedScores.toReversed(); // [99, 92, 88, 85, 78]
console.log(topToBottom);

注意事项

1. 不支持旧版本浏览器：如果需要兼容旧环境，应使用 slice().reverse() 替代。
2. 非递归操作：对嵌套数组的处理仅限于顶层元素，不递归反转子数组。
3. 空位保留：处理稀疏数组时，空位会被保留在相应的位置，不会被移除。
4. 返回数组类型：toReversed() 返回的数组是新数组，其类型与原数组相同。

总结

JavaScript Array toReversed() 方法提供了一种简洁高效的方式，在不修改原数组的前提下返回一个逆序的新数组，是现代数组操作中实用的工具之一。