JavaScript反转数组的4种常用实现方式

作者:异步漫步时间:2026-10-30 21:43:10浏览:102

本文详细介绍JavaScript中反转数组的四种常用方法。包括使用For循环创建新数组、利用Unshift()从头部插入元素、通过解构赋值或临时变量进行原地交换,以及直接调用内置reverse()方法。文章对比了各方法在空间复杂度、执行效率及对原数组影响方面的差异,帮助开发者根据实际需求选择最优方案。

1.使用For循环反转数组:

该方法采用递减循环遍历给定数组的每个元素。循环从数组的最后一个元素(即 arr.length - 1)开始,一直执行到索引为 0 的位置(i ≥ 0)。

        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        function reverseArray1(arr) {
            var newArr = [];
            for (let index = arr.length - 1; index >= 0; index--) {
                newArr.push(arr[index]);
            }
            return newArr;
        }
        console.log(reverseArray1(arr));

reverseArray1 函数接收一个数组 arr 作为参数,通过逆向遍历生成一个包含相同元素的新数组 newArr(逻辑为 let i = arr.length - 1; i >= 0; i --)。此方案不会修改原始数组,而是将元素逐一推入并存储在新数组中,因此会占用额外的内存空间。

2.使用Unshift()方法反转数组:

此方法与第一种方案类似,同样使用额外变量来存储反转后的数组,因此原始数组保持不变。

        function reverseArray2(arr) {
            var newArr = [];
            arr.forEach(element => {
                // unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
                newArr.unshift(element);
            });
            return newArr;
        }
        console.log(reverseArray2(arr));

reverseArray2 函数正向遍历给定数组 arr,利用 newArr 的 unshift 方法将每个元素插入到新数组的起始位置(即 newArr[0])。与第一种方案相比,该方案的空间效率更低,因为需要更多内存来存储位于其他变量 newArr 中的反向数组。

3.就地反转阵列: (改变原数组)

与 reverse 方法类似,最后一种方案也通过反转元素来修改原始数组。相较于前两种方案,这种原地反转数组的方式实现起来更为复杂。

        function reverseArray3(arr) {
            for (let index = 0; index < Math.floor(arr.length / 2); index++) {
                // 借助第三方变量交换两个变量的值
                var temp = arr[index];
                arr[index] = arr[arr.length - 1 - index];
                arr[arr.length - 1 - index] = temp
            }
            return arr;
        }
        console.log(reverseArray3(arr));

在上述代码中,我们使用 Math.floor 向下舍入确定循环条件 ( i < Math.floor(arr.length/2) ),仅遍历给定数组的前一半元素。接着,将数组的第一个元素与最后一个元素交换,第二个元素与倒数第二个元素交换,依此类推。这里不使用局部临时变量,而是采用数组解构赋值来交换元素。

4.直接调用 reverse():

console.log(['a','b','c','d'].reverse());

总结

到此这篇关于JavaScript反转数组常用的4种方法的文章就介绍到这了,更多相关JS反转数组内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

作者最新文章