JavaScript反转数组常用的4种方法

 更新时间:2023年07月14日 15:35:21   作者:muzidigbig  
这篇文章主要给大家介绍了关于JavaScript反转数组常用的4种方法,反转数组可以将数组中的元素顺序颠倒过来,从而达到一些特定的需求,文中通过代码介绍的非常详细,需要的朋友可以参考下

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

我们将为这种方法使用递减循环,以迭代给定数组的每个元素。 数组的最后一个元素将是循环的起点(arr.length — 1) ,它将一直运行直到到达数组的起点(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) ) i < Math.floor(arr.length/2)给定数组的一半元素。 然后将数组的元素放在第一位和最后一位,第二位与第二位到最后一位,依此类推。 代替使用局部绑定,我们使用数组解构来交换其元素。

4.直接调用 reverse():

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

总结

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

相关文章

  • 再谈Javascript中的异步以及如何异步

    再谈Javascript中的异步以及如何异步

    大家都知道js是单线程的,执行起来是顺序的,在顺序的业务逻辑中当然没有问题,如果遇到可以并发执行的业务逻辑,再排队就很低级了!所以这里我们再来简单的谈谈JS中的异步以及如何异步。
    2016-08-08
  • javascript返回顶部的按钮实现方法

    javascript返回顶部的按钮实现方法

    这篇文章主要介绍了javascript返回顶部的按钮实现方法,需要的朋友可以参考下
    2016-01-01
  • JavaScript必知必会(五) eval 的使用

    JavaScript必知必会(五) eval 的使用

    这篇文章主要介绍了JavaScript必知必会(五) eval 的使用 的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • JS实现浏览器状态栏文字闪烁效果的方法

    JS实现浏览器状态栏文字闪烁效果的方法

    这篇文章主要介绍了JS实现浏览器状态栏文字闪烁效果的方法,通过时间函数定时触发递归调用实现状态栏文字闪烁效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • JavaScript闭包详解

    JavaScript闭包详解

    一分钟理解JavaScript闭包,关于JavaScript闭包的内容介绍了很多,本文带着大家快速理解什么是JavaScript闭包,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • js实现文字超出部分用省略号代替实例代码

    js实现文字超出部分用省略号代替实例代码

    关于超出一定字数用省略号显示的问题,这种要求在我们日常开发的时候经常见到,我们之前基本都是用CSS来完成的,今天给大家分享个Javascript实现这个功能的示例代码,有需要的可以参考借鉴。
    2016-09-09
  • 双token无感刷新机制的实现方法示例

    双token无感刷新机制的实现方法示例

    无感刷新Token,是指在用户正常操作期间,系统在后台自动刷新Token的有效期,避免因Token过期而导致用户被迫重新登录,这篇文章主要介绍了双token无感刷新机制实现的相关资料,需要的朋友可以参考下
    2026-04-04
  • js指定日期增加指定月份的实现方法

    js指定日期增加指定月份的实现方法

    这篇文章主要给大家介绍了关于js指定日期增加指定月份的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2018-12-12
  • js实现touch移动触屏滑动事件

    js实现touch移动触屏滑动事件

    在开始描述touch事件之前,需要先描述一下多触式系统中特有的touch对象(android和iOS乃至nokia最新的meego系统都模拟了类 似的对象)。这个对象封装一次屏幕触摸,一般来自于手指。它在touch事件触发的时候产生,可以 通过touch event handler的event对象取到
    2015-04-04
  • 原生JavaScript实现留言板

    原生JavaScript实现留言板

    这篇文章主要为大家详细介绍了原生JavaScript实现留言板,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01

最新评论