js中如何向数组中添加元素unshift()方法

 更新时间:2023年12月18日 16:43:39   作者:蓝关故人  
这篇文章主要介绍了js中如何向数组中添加元素unshift()方法,具有很好的参考价值,希望对大家有所帮助,

js向数组中添加元素unshift()

将新项添加到数组起始位置:

实例

将新项添加到数组起始位置:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");

fruits 将输出:

Lemon,Pineapple,Banana,Orange,Apple,Mango

定义和用法

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

注意: 该方法将改变数组的数目。

提示:将新项添加到数组末尾,请使用push()方法。

js unshift性能分析

js unshift()方法可以向数组的头部添加元素并返回新的数组长度,我们手写一个unshift() 方法

Array.prototype._unshift = function () {
        let arr = this
        let oldLen = this.length
        let argLen =  arguments.length
        let newLen = oldLen + argLen
        for (let i = oldLen - 1; i >= 0; i--) {
            arr[i + argLen] = arr[i]
        }
        for (let i = 0; i < argLen; i++) {
            arr[i] = arguments[i]
        }
        return newLen
    }
    let arr1 = [1, 3, 4, 5, 6]
    console.log(arr1._unshift(7, 8, 1),arr1); // 8, [7, 8, 1, 1, 3, 4, 5, 6]

从上面代码可以看出先把元素往后移动,再添加元素,对于数组长度很大的 情况下性能是比较差的。

但是我们可以先push(), 然后再reverse() ,效率更快。

咱们手写一下push和reverse做下对比

 Array.prototype._push = function () {
        let arr = this
        let len = arguments.length
        for(let i = 0; i < len; i++) {
            this[this.length] = arguments[i]
        }
        return this.length
    }
    let arr = [2, 54, 65, 3, 4]
Array.prototype._reverse = function () {
        let arr = this
        let j = arr.length - 1
        for(let i = 0; i < j; i++,j--) {
            let curLeft = arr[i]
            let curRight = arr[j]
            arr[i] = curRight
            arr[j] = curLeft
        }
        return arr
    }

可以看出reverse和push的时间复杂度要低。实际对比下

 let arr = []
 console.time('time1')
 for(let i = 0 ;i< 10000; i++) {
     arr.unshift(i)
 }
 console.timeEnd('time1')   // 平均耗时 5ms
    let arr = []
    console.time('time2')
    for(let j = 0 ;j< 10000; j++) {
       arr.push(j)
    }
    arr.reverse()
    console.timeEnd('time2')  // 平均耗时 0.47ms

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • js css样式操作代码(批量操作)

    js css样式操作代码(批量操作)

    用js控制css样式,能让网页达到良好的的用户体验甚至是动画的效果。并且考虑到效率。
    2009-10-10
  • js中常见的4种创建对象方式与优缺点

    js中常见的4种创建对象方式与优缺点

    不管是哪门语言,千变万化不离其宗,深入理解其本质,方能应用自如,下面这篇文章主要给大家介绍了关于js中常见的4种创建对象方式与优缺点,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-01-01
  • Javascript 页面模板化很多人没有使用过的方法

    Javascript 页面模板化很多人没有使用过的方法

    今天遇到一个问题,这个问题也是我以前遇到的问题,以前的方式,也是大多数人使用的方式。大家可以看看我的文章
    2012-06-06
  • js获取当前路径的简单示例代码

    js获取当前路径的简单示例代码

    本篇文章主要是对js获取当前路径的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • Js中async/await的执行顺序详解

    Js中async/await的执行顺序详解

    随着async/await正式纳入ES7标准,越来越多的人开始研究据说是异步编程终级解决方案的 async/await。下面这篇文章主要给大家介绍了关于Js中async/await执行顺序的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-09-09
  • 原生js实现新闻列表展开/收起全文功能

    原生js实现新闻列表展开/收起全文功能

    本文主要介绍了原生js实现新闻列表展开/收起全文功能的知识要点、注意事项以及完整代码。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • JS实现分页导航效果

    JS实现分页导航效果

    这篇文章主要为大家详细介绍了JS实现动态页码及分页导航,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • JavaScript获取短信验证码(周期性)

    JavaScript获取短信验证码(周期性)

    这篇文章主要为大家详细介绍了JavaScript周期性获取短信验证码的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • uniapp开发微信小程序自定义顶部导航栏功能实例

    uniapp开发微信小程序自定义顶部导航栏功能实例

    uni-app是一个使用Vue.js开发跨平台应用的前端框架,下面这篇文章主要给大家介绍了关于uniapp开发微信小程序自定义顶部导航栏功能的相关资料,文中通过图文以及示例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • JavaScript+canvas实现框内跳动小球

    JavaScript+canvas实现框内跳动小球

    这篇文章主要为大家详细介绍了JavaScript+canvas实现框内跳动小球,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04

最新评论