讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > js教程 > 正文

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

php中文网
发布： 2016-05-16 16:13:02
原创
1279人浏览过

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

使用索引器添加

西语写作助手
西语写作助手

西语助手旗下的AI智能写作平台，支持西语语法纠错润色、论文批改写作

西语写作助手 21
查看详情 西语写作助手
复制代码 代码如下:

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

使用push方法

复制代码 代码如下:

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

使用concat方法

复制代码 代码如下:

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

使用concat方法，参数为数组

立即学习“Java免费学习笔记（深入）”；

复制代码 代码如下:

console.time("concat with array");
var a = [];
for (var i = 0, l = times; 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的理解，希望大家能够喜欢。

相关标签：
js

大家都在看：

数码产品性能查询
数码产品性能查询

该软件包括了市面上所有手机CPU，手机跑分情况，电脑CPU，电脑产品信息等等，方便需要大家查阅数码产品最新情况，了解产品特性，能够进行对比选择最具性价比的商品。

下载
来源：php中文网
收藏 点赞
上一篇：js实现格式化金额,字符,时间的方法_javascript技巧 下一篇：如何减少浏览器的reflow和repaint_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
javascript闭包如何理解_闭包在实际开发中有什么用途 闭包是函数记住并访问其定义时词法环境的能力，核心在于函数作为值、词法作用域与引用保持；可实现私有变量、解决循环异步bug、柯里化等。
2025-12-20 10:09:26
128
javascript中的Cookie是什么_如何安全地使用它 Cookie是HTTP协议的一部分，由服务器通过Set-Cookie下发、浏览器自动存取，最大约4KB；JavaScript仅能通过document.cookie操作非HttpOnlyCookie，本质为字符串操作，需注意编码、路径、域名、Secure及安全配置。
2025-12-20 10:06:07
717
javascript如何检测数据类型_ typeof怎么用 typeof无法准确区分null、数组、日期等对象类型，需配合Object.prototype.toString.call()或Array.isArray等方法；其返回值包括"number"、"string"、"boolean"、"undefined"、"function"、"symbol"、"bigint"及统一的"object"。
2025-12-20 10:01:02
785
javascript如何实现继承_ES6的class与原型继承有什么区别？ ES6的class是原型继承的语法糖，本质未改变继承机制，仍依赖原型链；通过extends和super实现继承，而ES5需手动操作prototype和constructor；两者底层结构一致，但class写法更清晰、可读性更高。
2025-12-20 09:50:39
845
JavaScript如何创建Web Workers？ JavaScript中创建WebWorkers需通过Worker构造函数加载独立JS文件，主线程与Worker通过postMessage/onmessage通信，不可访问DOM或共享变量；Worker脚本须为外部文件，支持模块化（type:‘module’），但受限于同源策略、无DOM访问、需HTTP环境等。
2025-12-20 09:45:38
176
javascript数组有哪些常用方法_如何实现数组去重和排序？ JavaScript数组常用方法分不改变原数组（如map、filter、slice等）和改变原数组（如push、splice、sort等）两类；去重推荐Set+扩展运算符，排序数字必须用比较函数。
2025-12-20 09:31:02
209
javascript如何实现移动端适配_touch事件与click事件有何不同？ 移动端适配核心是响应式布局与触控优化，需设viewport、用flex/rem/vw、辅以媒体查询；touch事件无延迟、支持多点坐标，click有300ms延迟、语义明确；按场景选择：跳转用click加touch-action，手势操作用touch，防误触需结合touchstart/touchend判断。
2025-12-20 09:01:02
363
什么是javascript迭代器与生成器_它们如何简化异步操作？ JavaScript迭代器和生成器本身不直接处理异步操作，但提供可暂停、可恢复的底层机制，配合async/await或手动调度可简化异步流程；迭代器是含next()方法的对象，返回{value,done}，实现可遍历协议。
2025-12-20 08:45:43
598
javascript如何实现3D图形_Three.js怎样在网页中创建场景 Three.js实现3D场景需三要素：WebGLRenderer渲染器、THREE.Scene场景、PerspectiveCamera相机；再添加几何体、材质、网格构成物体，配合环境光与方向光，并用requestAnimationFrame驱动动画及响应窗口缩放。
2025-12-20 08:22:03
896
javascript如何操作cookie_如何设置安全的HttpOnly标志 JavaScript无法读取HttpOnlyCookie，因其设计目的就是禁止客户端脚本访问以防范XSS；JS仅能通过document.cookie操作非HttpOnly、同域、未过期且满足Secure/SameSite等条件的Cookie。
2025-12-20 08:16:40
747
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部