JS中实现数组开头添加元素

 更新时间:2023年06月05日 11:03:59   作者:前端鼓励师  
这篇文章主要介绍了JS中实现数组开头添加元素方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

JS数组开头添加元素

1.使用Array.unshift()方法

//向数组开头添加一个或多个元素,并返回新的长度,该方法改变原数组
let person= ['张三', '李四', '王五'];
console.log(person.unshift('小明')); // 4
console.log(person); // ["小明", "张三", "李四", "王五"]

2.使用扩展运算符(…)

var arr1 = ['张三', '李四', '王五'];
var arr2 = ['小明', ...arr1];
console.log(arr2); // ["小明", "张三", "李四", "王五"]

3.使用Aarry.concat()方法

//用于连接两个或多个数组,并返回一个新数组,该方法不会改变原数组
var arr3 = ['aaa'];
console.log(arr3.concat(arr2)); // ["aaa", "小明", "张三", "李四", "王五"]
console.log(arr2); // ["小明", "张三", "李四", "王五"]

数组开头添加元素并返回新数组

1.运行时间: 977ms 占用内存: 77900KB

function prepend(arr, item) {
    var newarr = arr.concat();
    newarr.unshift(item)
    return newarr
}
var arr = [1, 2, 3, 4];
var item = 10

2.运行时间: 1048ms 占用内存: 77776KB

function prepend(arr, item) {
    var newarr = arr.slice();
    newarr.unshift(item)
    return newarr
}
var arr = [1, 2, 3, 4];
var item = 10;

3.运行时间: 1034ms 占用内存: 77776KB

function prepend(arr, item) {
    return [item].concat(arr)
}
var arr = [1, 2, 3, 4];
var item = 10;

4.运行时间: 1010ms 占用内存: 77880KB

function prepend(arr, item) {
    var newarr = [item];
    newarr.push.apply(newarr,arr)
    return newarr
}
var arr = [1, 2, 3, 4];
var item = 10;

5.运行时间: 1409ms 占用内存: 77840KB

function prepend(arr, item) {
    var newarr = arr.slice();
    newarr.splice(0,0,item);
    return newarr
}
var arr = [1, 2, 3, 4];
var item = 10;

6.运行时间: 997ms 占用内存: 77848KB

function prepend(arr, item) {
    var newarr = [item];
    for(var i = 0; i < arr.length; i++){
        newarr.push(arr[i])
    }
    return newarr
}
var arr = [1, 2, 3, 4];
var item = 10;

总结

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

相关文章

  • js截取固定长度的中英文字符的简单实例

    js截取固定长度的中英文字符的简单实例

    下面是自己写的一个简单的函数,用于截取固定长度的字符串,中英文都适用.若有不妥之处还请高手指正
    2013-11-11
  • js实现页面图片消除效果

    js实现页面图片消除效果

    这篇文章主要为大家详细介绍了js实现页面图片消除效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • location.search在客户端获取Url参数的方法

    location.search在客户端获取Url参数的方法

    最近一直在写html,刚接触到,感觉挺复杂的。。比如传参,在.net里可以直接用Request接受,而在html中还要经过处理,找了一些资料,写了个方法。
    2010-06-06
  • JS实现的文件拖拽上传功能示例

    JS实现的文件拖拽上传功能示例

    这篇文章主要介绍了JS实现的文件拖拽上传功能,涉及javascript事件触发、页面元素属性动态修改等相关操作技巧,需要的朋友可以参考下
    2018-05-05
  • JS+CSS实现电子商务网站导航模板效果代码

    JS+CSS实现电子商务网站导航模板效果代码

    这篇文章主要介绍了JS+CSS实现电子商务网站导航模板效果代码,涉及JavaScript结合css动态操作页面元素属性的相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-09-09
  • 微信小程序开发之转发分享功能

    微信小程序开发之转发分享功能

    这篇文章主要介绍了微信小程序开发之转发分享功能的实现,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • 以JSON形式将JS中Array对象数组传至后台的方法

    以JSON形式将JS中Array对象数组传至后台的方法

    业务是需要将前台jQuery easyUI DataGrid列表中所选的若干行的数据传到后台进行update操作,具体的实现如下,感兴趣的朋友可以参考下
    2014-01-01
  • 微信小程序云开发之使用云存储

    微信小程序云开发之使用云存储

    这篇文章主要为大家详细介绍了微信小程序云开发之使用云存储,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • BootStrap modal实现拖拽功能

    BootStrap modal实现拖拽功能

    这篇文章主要为大家详细介绍了BootStrap modal实现拖拽功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • javascript获取重复次数最多的字符

    javascript获取重复次数最多的字符

    本文给大家讲述的是使用javascript实现获取重复次数最多的字符,代码很简单,有需要的小伙伴可以参考下。
    2015-07-07

最新评论