JavaScript for 、for...of 、for...in 等 iteration 效率测试
// 准备待测数组
const NUM = 1e7;
let arr = new Array(NUM).fill(1);
// for 测试
let arr1 =[];
console.time('for');
for (let i = 0; i < arr.length; i++) {
arr1.push(arr[i])
}
console.timeEnd('for');
// Chrome/75.0.3770.100 Safari/537.36 环境
//VM1324:10 for: 576.733154296875ms
// node v10.11.0 环境
// for: 412.087ms
for 几种写法
- 常规写法
let arr1 = []
console.time('one')
for (let i = 0; i < arr.length; i++ ){
arr1.push(arr[i])
}
console.timeEnd('one')
数组长度是会动态变化,每次循环会重新计算length长度,可能会出现死循环
- cache arr.length
for (let i = 0, len = arr.length; i < len; i++ ){
arr1.push(arr[i])
}
缓存length 值,无需重新计算length
- 倒序
for (let i = arr.length-1; i >= 0; i--){
arr1.push(arr[i])
}
比第二种方法更简洁
- 倒叙简洁版
for (let i = arr.length-1; i--;){
arr1.push(arr[i])
}
两个分号之间的表达式为 true 会一直执行直到 判断为 false (i = 0)
- 正序简洁版
for (let i = 0, len;len = arr[i++]; ){
arr1.push(arr[i])
}
当 i 大于等于数组长度或arr[i++]值为false时 将停指循环,同时由于arr.length动态变化时可能会造成死循环
for...of
for (let value of arr){
arr1.push(value)
}
es6推出的迭代器,最简洁,可以是用 break,continue和return 终止循环
for...in
for (let key in arr){
arr1.push(arr[key])
}
for...in 一般用于遍历对象,他会将本身属性和原型链上的属性(除系统内置属性)全部遍历出来即便是不可枚举属性(enumerable:false), 可以通过 items.hasOwnProperty
来遍历本身属性,由于查询到自己的原型链上,所以性能方面比较差
forEach
arr.forEach(function(value){
arr1.push(value)
})
数组的迭代方法,没有返回值
map
arr.map(function(value){
return arr1.push(value)
})
浅拷贝原数组,并且返回一个新数组
性能测试
测试次数 | 常规for | cache for | 倒序 for | 倒叙简版 for | 正序简版 for | for..of | for..in | forEach | map |
---|---|---|---|---|---|---|---|---|---|
1 | 542.121ms | 573.618ms | 764.181ms | 755.961ms | 571.464ms | 945.199ms | 4077.020ms | 625.859ms | 3573.946ms |
2 | 430.008ms | 541.933ms | 524.474ms | 668.276ms | 553.475ms | 897.442ms | 4402.246ms | 605.271ms | 2732.859ms |
3 | 409.531ms | 661.765ms | 534.167ms | 655.481ms | 600.939ms | 1141.093ms | 3806.704ms | 584.712ms | 2779.192ms |
4 | 412.972ms | 643.868ms | 536.026ms | 674.081ms | 725.149ms | 930.655ms | 3201.387ms | 599.780ms | 3152.499ms |
5 | 417.034ms | 624.323ms | 520.674ms | 799.568ms | 574.713ms | 943.449ms | 3261.512ms | 587.182ms | 2954.195ms |
6 | 525.771ms | 955.737ms | 526.208ms | 771.443ms | 531.962ms | 954.199ms | 4351.009ms | 608.264ms | 2888.752ms |
7 | 498.039ms | 602.703ms | 555.588ms | 531.464ms | 541.599ms | 916.678ms | 3264.334ms | 596.168ms | 2834.663ms |
8 | 431.694ms | 523.381ms | 544.974ms | 527.472ms | 517.833ms | 1049.283ms | 3744.972ms | 600.286ms | 3467.499ms |
9 | 417.521ms | 518.093ms | 547.404ms | 611.024ms | 594.503ms | 767.059ms | 4979.348ms | 601.420ms | 3638.023ms |
10 | 424.806ms | 557.961ms | 535.541ms | 837.561ms | 541.882ms | 772.686ms | 3284.424ms | 602.443ms | 3599.642ms |
11 | 409.402ms | 521.131ms | 534.265ms | 517.709ms | 551.397ms | 752.101ms | 3228.123ms | 629.625ms | 3535.545ms |
12 | 425.362ms | 532.882ms | 406.637ms | 522.287ms | 570.259ms | 914.135ms | 3449.256ms | 800.857ms | 3429.123ms |
平均值 | 439.2738ms | 578.3565ms | 553.1468ms | 651.7057ms | 507.8718ms | 909.0785ms | 3,686.9 6ms | 605.6298ms | 3,221.5056ms |
堆值差 | 357245536Byte | 357245808Byte | 357245624Byte | 357245872Byte | 357246824Byte | 199268080Byte | 757187208Byte | 357244456Byte | 43724764Byte |
测试总结
- 运行效率:
常规for
>正序简版 for
>倒序 for
>cache for
>倒叙简版 for
>forEach
>for..of
>map
>for..in
- 几种普通 for 循环占用内存相差不大, 而
for..of
占用运行内存最小 for..in
性能最差,内存占用高,速度很慢
JavaScript for 、for...of 、for...in 等 iteration 效率测试的更多相关文章
- JavaScript的个人学习随手记(一)
JavaScript 简介 要学习的人可以到W3School http://www.w3school.com.cn/b.asp JavaScript 是世界上最流行的编程语言. 这门语言可用于 HT ...
- 100个直接可以拿来用的JavaScript实用功能代码片段
目录如下: 1.原生JavaScript实现字符串长度截取2.原生JavaScript获取域名主机3.原生JavaScript清除空格4.原生JavaScript替换全部5.原生JavaScript转 ...
- 十大免费教程资源帮助新手快速学习JavaScript
“JavaScript”的名头相信大家肯定是耳熟能详,但只有一小部分人群了解它的使用与应用程序构建方式.这“一小部分”人指的当然是技术过硬的有为青年.网络程序员以及IT专业人员.但对于一位新手或者说外 ...
- Javascript之高效编程
前言: Javascript绝对是最火的编程语言之一,一直具有很大的用户群,具有广泛的应用前景.而在前端开发中,它也是三驾马车之一,并且是最重要的一环.要想给用户提供更流畅的操作体验,更友好的交互,对 ...
- 用JavaScript往DIV动态添加内容
参考:http://zhidao.baidu.com/link?url=6jSchyqPiEYCBoKdOmv52YHz9r7MTBms2pK1N6ptOX1kaR2eg320mlW1Sr6n36hp ...
- 前端之JavaScript第一天学习(1)-JavaScript 简介
javaScript 是世界上最流行的编程语言. 这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记本电脑.平板电脑和智能手机等设备. JavaScript 是脚本语言 JavaSc ...
- javascript 高效按字节截取字符串
做为一个前端开发人员在网页展示中经常会碰到,标题过长,需要截取字符串,用CSS的实现的话各种兼容问题,各种坑. 让后台程序截一下,又各种推托,让后台按字节截一下更是和要了后台老命一样,最后可能只会安字 ...
- 100个直接可以拿来用的JavaScript实用功能代码片段(转载)
把平时网站上常用的一些实用功能代码片段通通收集起来,方面网友们学习使用,利用好的话可以加快网友们的开发速度,提高工作效率. 目录如下: 1.原生JavaScript实现字符串长度截取2.原生JavaS ...
- 【JavsScript】JavaScript MVC 框架技术选型
你很喜欢Gmail和Trello之类的单页面应用,但是不太确定该从何开始.也许你的JavaScript代码是如此的杂乱无章,以致于你很想在下一个项目上尝试下JavaScript MVC库和框架,却苦于 ...
随机推荐
- JNI用法小例子
一.准备包含本地方法的.java文件(ContentVideo.java),包括set()和get()两个方法. public class ContentVideo { public native s ...
- 数据库Oracle日期函数
SYSDATE 函数:是一个日期函数,它返回当前数据库服务器的日期和时间. 用日期计算: • 从日期加或者减一个数,结果是一个日期值 • 两个日期相减,得到两个日期之间的天数 ,可以加小时到日期上 S ...
- MyBatis三个查询方法_selectList_selectOne_selectMap
mybatis-cfg.xml的配置: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE co ...
- ansible批量管理常见的配置方法
第7章 ansible的管理 7.1 ansible概念的介绍 ansible-playbook –syntax 检查语法 ansible-playbook -C ...
- unity3d 动态添加地面贴图 草地
TerrainData.splatPrototypes = ]{ new SplatPrototype() { texture=Caodi, //Texture2D的贴图 normalMap=null ...
- WebAPI测试概念及postman初识
什么是接口? ------ 某个对象和外界交互的部分 消息交互接口:基于soap的web service ---- http协议 web api ------- http协议 diame ...
- Selenium选择web元素
获取html片段可以用来做什么? 可以用来分割,也可以分析HTML文档 beautifulsoup用法? 安装beautifulsoup库: pip install beautifulsoup4 因为 ...
- 为什么有ASP.NET
最近读了一些文章,总结一下: 在1999年,当时微软的windows系统运行的所有的应用程序都是有组件对象模型为根本基础开发的,用VB来处理数据访问和复杂的用户界面,缺点是不能使用函数指针,因为当时的 ...
- [Java并发] AQS抽象队列同步器源码解析--独占锁释放过程
[Java并发] AQS抽象队列同步器源码解析--独占锁获取过程 上一篇已经讲解了AQS独占锁的获取过程,接下来就是对AQS独占锁的释放过程进行详细的分析说明,废话不多说,直接进入正文... 锁释放入 ...
- JS中&&和||的理解
运算符可以从三个不同的层次进行理解. 第一层理解 当操作数都是布尔值时,"&&"对两个值执行布尔与(AND)操作. 复制代码代码如下: x==0 && ...