JS往数组中添加项性能分析

比较了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 毫秒

本文仅仅是探讨JS的性能，通过对比加深小伙伴们对javascript的理解，希望大家能够喜欢。

赞 (0)

相关推荐

  • JavaScript中数组添加值和访问值常见问题

    通过本文给大家介绍关于数组方面的一些小问题,或许对大家有点帮助,本文写的不好,还请各位大侠见谅. 1. // var arr = [,,]; // arr["bbb"]="nor "; // arr[-]="nor "; // console.log(arr); >> [, , , bbb: "nor ", -: "nor "] // console.log(arr.bbb) >>

  • Javascript 数组添加 shuffle 方法的实现代码

    //shuffle(A) = ", shuffle(a)); if (!Array.prototype.shuffle) { Array.prototype.shuffle = function() { for(var j, x, i = this.length; i; j = parseInt(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x); return this; }; } document.write(

  • 解析javascript 数组以及json元素的添加删除

    javasscript删除数组的3种方法1,用shift()方法shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefinedvar chaomao=[1,2,3,4,5]var chaomao.shift()//得到1alert(chaomao)//[2,3,4,5] 2,用pop()方法pop:删除原数组最后一项,并返回删除元素的值:如果数组为空则返回undefinedvar chaomao=[1,2,3,4,5]var chaomao.pop()//得到5alert

  • Javascript 数组添加一个 indexOf 方法的实现代码

    //b = ", b.join(","), ""); document.write("b.indexOf(2) = ", b.indexOf(2)); document.write("b.indexOf('嘿嘿') = ", b.indexOf('嘿嘿')); //]]> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 运行以上代码,即可.如果大家想看的是 javascript indexOf的使用

  • JavaScript使用push方法添加一个元素到数组末尾用法实例

    本文实例讲述了JavaScript使用push方法添加一个元素到数组末尾的用法.分享给大家供大家参考.具体如下: 下面的代码演示了JS数组通过push方法添加一个元素到数组末尾 <!DOCTYPE html> <html> <body> <p id="demo"> Click the button to add a new element to the array. </p> <button onclick="

  • JS往数组中添加项性能分析

    比较了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

  • Js删除数组中某一项或几项的几种方法(推荐)

    1.js中的splice方法 splice(index,len,[item])    注释:该方法会改变原始数组. splice有3个参数,它也可以用来替换/删除/添加数组内某一个或者几个值 index:数组开始下标        len: 替换/删除的长度       item:替换的值,删除操作的话 item为空 如:arr = ['a','b','c','d'] 删除 ----  item不设置 arr.splice(1,1)   //['a','c','d']         删除起始下

  • JS基于对象的特性实现去除数组中重复项功能详解

    JS基于对象的特性实现去除数组中重复项功能详解

    本文实例讲述了JS基于对象的特性实现去除数组中重复项功能.分享给大家供大家参考,具体如下: 数组去重的方法有很多,不同的方法的效率也不相同.如前面文章JS实现的数组去除重复数据算法小结中就总结分析了4种实现方法.这里介绍一种高效数组去重的方法:根据JS对象的特性去除数组中重复项的方法. 一.JS对象的特性(本文中所使用的特性):key始终唯一 引例:说明对象key值的唯一性,即当重新给js已有属性赋值的时候,实际上是覆盖了key,而不是新建了key var t={name:'张三',age:20

  • JS常用的几种数组遍历方式以及性能分析对比实例详解

    JS常用的几种数组遍历方式以及性能分析对比实例详解

    本文实例讲述了JS常用的几种数组遍历方式以及性能分析对比.分享给大家供大家参考,具体如下: 前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得这种方式挺好的,于是抽取了核心逻辑,封装成了模板,打算拓展成一个系列,本文则是系列中的第二篇,JS数组遍历方式的分析对比 JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,fo

  • JS简单去除数组中重复项的方法

    JS简单去除数组中重复项的方法

    本文实例讲述了JS简单去除数组中重复项的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var arr = ["aaa","bb

  • js 声明数组和向数组中添加对象变量的简单实例

    数组有四种定义的方式 使用构造函数: var a = new Array(); var b = new Array(10); var c = new Array("first", "second", "third"); 或者数组直接量: var d = ["first", "second", "third"]; 扩展: function ObjStory(id,biaoti,author

  • Python3删除排序数组中重复项的方法分析

    本文实例讲述了Python3删除排序数组中重复项的方法.分享给大家供大家参考,具体如下: 给定一个排序数组,你需要在[原地]删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在[原地]修改输入数组并在使用 O(1) 额外空间的条件下完成. 示例 1: 给定数组 nums = [1,1,2], 函数应该返回新的长度 2, 并且原数组 nums 的前两个元素被修改为 1, 2. 你不需要考虑数组中超出新长度后面的元素. 示例 2: 给定 nums =

  • javascript 删除数组中重复项（uniq）

    可以直接使用的代码:我们修正版 function unique(data){ data = data || []; var a = {}; len = data.length; for (var i=0; i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 下面是进阶教程与说明,喜欢跟深入的朋友可以参考下.首先让我们看下 YUI 是如何处理的: 复制代码 代码如下: var toObject = function(a) { var o = {}; for (var i = 0; i

  • JavaScript 数组的进化与性能分析

    JavaScript 数组的进化与性能分析

    正式开始前需要声明,本文并不是要讲解 JavaScript 数组基础知识,也不会涉及语法和使用案例.本文讲得更多的是内存.优化.语法差异.性能.近来的演进. 在使用 JavaScript 前,我对 C.C++.C# 这些已经颇为熟悉.与许多 C/C++ 开发者一样,JavaScript 给我的第一印象并不好. Array 是主要原因之一.JavaScript 数组不是连续(contiguous)的,其实现类似哈希映射(hash-maps)或字典(dictionaries).我觉得这有点像是一门

  • js从数组中删除指定值(不是指定位置)的元素实现代码

    引用自百度知道里面的一个问答 例如数组{1,2,3,4,5} 要把数组里面的3删除得到{1,2,4,5} js代码: <script type="text/javascript"> Array.p Array.prototype.indexOf = function(val) { //prototype 给数组添加属性 for (var i = 0; i < this.length; i++) { //this是指向数组,this.length指的数组类元素的数量 i

随机推荐