Array.prototype.reverse()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

reverse() 方法就地反转数组中的元素,并返回同一数组的引用。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。换句话说,数组中的元素顺序将被翻转,变为与之前相反的方向。

要在不改变原始数组的情况下反转数组中的元素,使用 toReversed()

尝试一下

语法

js
reverse()

返回值

原始数组反转后的引用。注意,数组是就地反转的,并且没有复制。

描述

reverse 方法反转数组中元素的位置,改变了数组,并返回该数组的引用。

reverse() 方法会保留空槽。如果源数组是稀疏的,则空槽对应的新索引将被删除,并且也成为空槽。

reverse() 方法是通用的。它只期望 this 值具有 length 属性和整数键属性。虽然字符串也是类似于数组的,但这个方法不适用于它们,因为字符串是不可变的。

示例

反转数组中的元素

下面的示例创建一个数组 items,其中包含三个元素,然后反转数组。调用 reverse() 会返回反转后的数组 items 的引用。

js
const items = [1, 2, 3];
console.log(items); // [1, 2, 3]

items.reverse();
console.log(items); // [3, 2, 1]

reverse() 方法返回对同一数组的引用

reverse() 方法返回对原始数组的引用,因此改变返回的数组也会改变原始数组。

js
const numbers = [3, 2, 4, 1, 5];
const reversed = numbers.reverse();
// numbers 和 reversed 的顺序都是颠倒的 [5, 1, 4, 2, 3]
reversed[0] = 5;
console.log(numbers[0]); // 5

如果你希望 reverse() 不改变原始数组,但返回一个浅拷贝数组,就像其他数组方法(例如 map())一样,使用 toReversed() 方法。或者,你可以在调用 reverse() 之前做一个浅拷贝,使用展开语法Array.from()

js
const numbers = [3, 2, 4, 1, 5];
// [...numbers] 创建一个浅拷贝,因此 reverse() 不会改变原始数据
const reverted = [...numbers].reverse();
reverted[0] = 5;
console.log(numbers[0]); // 3

对稀疏数组使用 reverse()

调用 reverse() 后,稀疏数组保持稀疏状态。空槽将以空槽的形式被复制到它们各自的新索引中。

js
console.log([1, , 3].reverse()); // [3, empty, 1]
console.log([1, , 3, 4].reverse()); // [4, 3, empty, 1]

对非数组对象调用 reverse()

reverse() 方法读取 thislength 属性。然后,它访问 0length / 2 之间的每个索引,并交换两端对应的两个索引,并在必要时,删除某些属性。

js
const arrayLike = {
  length: 3,
  unrelated: "foo",
  2: 4,
};
console.log(Array.prototype.reverse.call(arrayLike));
// { '0': 4, length: 3, unrelated: 'foo' }
// 索引“2”被删除了,因为原本的数据中索引“0”不存在了

规范

Specification
ECMAScript Language Specification
# sec-array.prototype.reverse

浏览器兼容性

BCD tables only load in the browser

参见