文档章节

JS性能探讨:往数组中添加项

LeoG0816
 LeoG0816
发布于 2015/02/21 00:00
字数 563
阅读 2216
收藏 71

比较了4种可以向数组添加项的方法之间的性能:

使用索引器添加

console.time("index");
var a = [];
for (var i = 0, l = times; i < l; i++) {
    a[i] = i;
}
console.timeEnd("index");

使用push方法

console.time("push");
var a = [];
for (var i = 0, l = times; i < l; i++) {
    a.push(i);
}
console.timeEnd("push");

使用concat方法

console.time("concat");
var a = [];
for (var i = 0, l = times; i < l; i++) {
    a.concat(i);
}
console.timeEnd("concat");

使用concat方法,参数为数组

console.time("concat with array");
var a = [];
for (var i = 0, l = times; i < l; i++) {
    a.concat([i]);
}
console.timeEnd("concat with array");

把times设置为10000(万)次:

index: 0.310ms
push: 1.476ms
concat: 8.911ms
concat with array: 2.261ms

把times设置为100000(十万)次:

index: 1.967ms
push: 11.980ms
concat: 70.410ms
concat with array: 28.292ms

把times设置为1000000(百万)次:

index: 138.559ms
push: 93.074ms
concat: 608.768ms
concat with array: 243.371ms

把times设置为10000000(千万)次:

index: 1473.733ms
push: 611.636ms
concat: 6058.528ms
concat with array: 2431.689ms

####总结

该结论仅受用与chrome浏览器

  • concat方法的执行效率是最慢的
  • 相比两种concat方法的传参,当接受参数为数组时,执行效率要高于接受参数为非数组
  • 索引器多数情况下执行效率要高于push方法
  • 当执行次数越来越多时,索引器的执行效率开始不如push方法

####浏览器对比

感谢网友指出,本人经验不足,在这里补上浏览器之间的横向对比

  • 首先是使用concat方法,在ie和firefox中,参数为数组执行效率反而别参数为非数组慢一点,但差异并不大
  • 然后index和push的方法比concat快是肯定的了,在ie中使用index方法始终要比push快,在firefox中push略胜一筹但差异不大
  • 比较3个浏览器之间index和push方法的执行效率差异是巨大的,firefox的执行效率要比ie和chrome高出不少,在百万次的情况下,基本快10倍,ie相比另外两者最慢

以下为百万次的结果:

// firefox
index: timer started
index: 229.79ms
push: timer started
push: 205.12ms
concat: timer started
concat: 2136.99ms
concat with array: timer started
concat with array: 2365.18ms

// ie
index: 2,533.744 毫秒
push: 3,865.979 毫秒
concat: 4,303.139 毫秒
concat with array: 4,792.208 毫秒

欢迎交流。

© 著作权归作者所有

上一篇: React JSX语法说明
下一篇: $http学习总结
LeoG0816
粉丝 13
博文 7
码字总数 8927
作品 0
浦东
程序员
私信 提问
加载中

评论(7)

我本晋南走卒
我本晋南走卒
差异性太大了
tfc
tfc
IE啥时候能跟上时代啊
LeoG0816
LeoG0816 博主

引用来自“厄煮”的评论

如果是往一个长度不为0的array添加一个元素
还是push简单一下 用index的形式要需要用array.length获取下标
确实如此
克己克己
克己克己
如果是往一个长度不为0的array添加一个元素
还是push简单一下 用index的形式要需要用array.length获取下标
LeoG0816
LeoG0816 博主

引用来自“noonoo”的评论

根本性失误,你没有多浏览器比较。
经验不足,现在加上了
SmallFish
SmallFish

引用来自“noonoo”的评论

根本性失误,你没有多浏览器比较。
+1 我猜又是chrome
noo-noo
noo-noo
根本性失误,你没有多浏览器比较。
javascript引用类型之Array类型

除了Object之外,Array类型恐怕是javascript中最常用的类型了。而且,javascript中的数组与其他多数语言中的数组有着相当大的区别。javascript数组的每一项可以保存任何类型的数据。也就是说...

柳哥
2015/04/06
63
0
重学Javascript之引用类型

注意: 本文章为 《重学js之JavaScript高级程序设计》系列第五章【JavaScript引用类型】。 关于《重学js之JavaScript高级程序设计》是重新回顾js基础的学习。 引用类型的值(对象)是引用类型...

故事胶片
08/28
0
0
说说 Vue.js 中的 v-for 列表渲染指令

1 基本用法 当遍历一个数组或枚举一个对象进行迭代循环展示时,就会用到列表渲染指令 v-for。 它的表达式需要结合 in 来使用,类似 item in items 的形式。 1.1 遍历数组 html: js: 效果:...

deniro
2018/11/18
0
0
前端开发:Javascript中的数组,常用方法解析

前端开发:Javascript中的数组,常用方法解析 前言  Array是Javascript构成的一个重要的部分,它可以用来存储字符串、对象、函数、Number,它是非常强大的。因此深入了解Array是前端必修的功...

grootzhang
2016/06/17
0
0
【译】12个提高 JavaScript 技能的概念!

译者:前端小智 原文:hackernoon.com/12-javascri… JavaScript 是一种复杂的语言。如果是你是高级或者初级 JavaScript 开发人员,了解它的基本概念非常重要。本文介绍 JavaScript 至关重要...

前端小智
05/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring使用ThreadPoolTaskExecutor自定义线程池及实现异步调用

多线程一直是工作或面试过程中的高频知识点,今天给大家分享一下使用 ThreadPoolTaskExecutor 来自定义线程池和实现异步调用多线程。 一、ThreadPoolTaskExecutor 本文采用 Executors 的工厂...

CREATE_17
今天
5
0
CSS盒子模型

CSS盒子模型 组成: content --> padding --> border --> margin 像现实生活中的快递: 物品 --> 填充物 --> 包装盒 --> 盒子与盒子之间的间距 content :width、height组成的 内容区域 padd......

studywin
今天
7
0
修复Win10下开始菜单、设置等系统软件无法打开的问题

因为各种各样的原因导致系统文件丢失、损坏、被修改,而造成win10的开始菜单、设置等系统软件无法打开的情况,可以尝试如下方法解决 此方法只在部分情况下有效,但值得一试 用Windows键+R打开...

locbytes
昨天
8
0
jquery 添加和删除节点

本文转载于:专业的前端网站➺jquery 添加和删除节点 // 增加一个三和一节点function addPanel() { // var newPanel = $('.my-panel').clone(true) var newPanel = $(".triple-panel-con......

前端老手
昨天
8
0
一、Django基础

一、web框架分类和wsgiref模块使用介绍 web框架的本质 socket服务端 与 浏览器的通信 socket服务端功能划分: 负责与浏览器收发消息(socket通信) --> wsgiref/uWsgi/gunicorn... 根据用户访问...

ZeroBit
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部