JavaScript 反转数组

在 JavaScript 中,如果想要反转一个数组(也就是将数组中的元素顺序颠倒),常用的方法有以下 2 种。

  • reverse()。
  • toReversed()。

使用 reverse() 反转数组

在 JavaScript 中,我们可以使用 reverse() 方法来反转数组中所有元素的顺序。reverse,就是 “反向” 的意思。

语法:

arr.reverse()

说明:

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

注意: reverse() 方法会直接修改原数组。

示例 1:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const arr = [10, 20, 30, 40, 50];

        arr.reverse();
        console.log(arr);
    </script>
</body>
</html>

运行结果如下。

[ 50, 40, 30, 20, 10 ]

分析:

从结果可以看出,arr.reverse() 直接修改了原数组。这种 “就地” 修改的特性虽然在某些情况下很方便,但也可能会导致意外,特别是当数组的引用被传递到其他地方时(比如数组作为函数参数)。

因此在实际开发中,我们更推荐使用下面介绍的 toReversed() 方法来反转数组。

使用 toReversed() 反转数组

toReversed() 是 ECMAScript 2023 (ES6+) 引入的一个新方法,它会反转数组元素的顺序,但不会修改原数组,而是返回一个新数组。

语法:

const newArray = arr.toReversed();

示例 2:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const arr = [10, 20, 30, 40, 50];
        const result = arr.toReversed();

        console.log(arr);
        console.log(result);
    </script>
</body>
</html>

运行结果如下。

[ 10, 20, 30, 40, 50 ]
[ 50, 40, 30, 20, 10 ]

分析:

从结果可以看出,toReversed() 方法并不会修改原数组,而是返回一个新数组。

在实际项目开发中,大多数情况下我们都是不希望修改原数组的,因此 toReversed() 方法会比 reverse() 方法更加有用。

给站长反馈

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

邮箱:lvyenet@vip.qq.com

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