JavaScript 数组 reverse() 方法

JavaScript reverse() 语法

reverse() 是 JavaScript 数组的一个方法,它用于颠倒数组中元素的顺序。其中,数组的第一个元素会变成最后一个,最后一个元素会变成第一个。

语法:

arr.reverse()

说明:

reverse() 方法不接收任何参数。

reverse() 方法是有返回值的,也就是返回反转后的数组。也就是说,它返回的是调用该方法的同一个数组实例。

注意: reverse() 是一个 “破坏性” 方法,它会改变原数组。如果你不希望修改原数组,请使用 ECMAScript 2023 新增的 toReversed() 方法来代替 reverse() 方法。

JavaScript reverse() 摘要

属于 JavaScript Array 对象
使用频率
修改原数组
官方文档 查看
MDN 查看

JavaScript reverse() 示例

接下来,我们通过几个简单的例子来讲解一下 JavaScript reverse() 方法是如何使用的。

示例 1:reverse() 基本用法

const arr = ["Python""C++""Java""Go""Rust"];
const result = arr.reverse();

console.log(arr);
console.log(result);

运行结果如下。

[ 'Rust', 'Go', 'Java', 'C++', 'Python' ]
[ 'Rust', 'Go', 'Java', 'C++', 'Python' ]

分析:

reverse() 方法是有返回值的,不过它本身会改变原数组。因此一般情况下我们都不会用到其返回值,而是会像下面这样做。

const arr = ["Python""C++""Java""Go""Rust"];
arr.reverse();
console.log(arr);        // [ 'Rust', 'Go', 'Java', 'C++', 'Python' ]

需要注意的是, result 和 arr 指向内存中的同一个数组。因此修改 result,也会影响 arr。

const arr = [1, 2, 3];
const result = arr.reverse();
result[0] = 99;

console.log(arr[0]);    // 输出 99,证明它们是同一个引用

如果不希望 reverse() 方法修改原数组,我们可以使用下面两种方式。

  • ES6 解构赋值。
  • ECMAScript 2023 新增的 toReversed() 方法。

示例 2:ES6 解构赋值

const arr = ["Python""C++""Java""Go""Rust"];
const result = [...arr].reverse();

console.log(arr);
console.log(result);

运行结果如下。

[ 'Python', 'C++', 'Java', 'Go', 'Rust' ]
[ 'Rust', 'Go', 'Java', 'C++', 'Python' ]

示例 3:ECMAScript 2023 新增的 toReversed() 方法

const arr = ["Python""C++""Java""Go""Rust"];
const result = arr.toReversed();

console.log(arr);
console.log(result);

运行结果如下。

[ 'Python', 'C++', 'Java', 'Go', 'Rust' ]
[ 'Rust', 'Go', 'Java', 'C++', 'Python' ]

分析:

toReversed() 方法和 reverse() 方法的功能是一样的。只不过 reverse() 是一个 “破坏性” 方法,它会修改原数组。而 toReversed() 是一个 “非破坏性” 方法,它不会修改原数组。

“破坏性” 方法 vs “非破坏性” 方法

在 JavaScript 中,数组的 “破坏性” 方法以及它们对应的 “非破坏性” 方法,总结如下表所示。

破坏性方法 vs 非破坏性方法
破坏性 非破坏性 说明
reverse() toReversed() 反转数组
sort() toSorted() 数组排序
splice() toSpliced() 修改数组(添加、删除或替换元素)
arr[i] = val(索引赋值) with() 替换数组某个元素

上一篇: pop()

下一篇: sort()

给站长反馈

绿叶网正在不断完善中,小伙伴们如果发现任何问题,还望多多给站长反馈,谢谢!

邮箱:lvyenet@vip.qq.com

「绿叶网」服务号
绿叶网服务号放大
关注服务号,微信也能看教程。
绿叶网服务号