• 由于不同浏览器,不同版本性能不一,且控制台本质是是套用了一大堆eval,沙盒化程度高,所以需使用node环境测试来提高准确性

// 准备待测数组
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

测试总结

  1. 运行效率: 常规for > 正序简版 for > 倒序 for > cache for > 倒叙简版 for > forEach > for..of > map > for..in
  2. 几种普通 for 循环占用内存相差不大, 而 for..of 占用运行内存最小
  3. for..in 性能最差,内存占用高,速度很慢

JavaScript for 、for...of 、for...in 等 iteration 效率测试的更多相关文章

  1. JavaScript的个人学习随手记(一)

    JavaScript 简介  要学习的人可以到W3School http://www.w3school.com.cn/b.asp JavaScript 是世界上最流行的编程语言. 这门语言可用于 HT ...

  2. 100个直接可以拿来用的JavaScript实用功能代码片段

    目录如下: 1.原生JavaScript实现字符串长度截取2.原生JavaScript获取域名主机3.原生JavaScript清除空格4.原生JavaScript替换全部5.原生JavaScript转 ...

  3. 十大免费教程资源帮助新手快速学习JavaScript

    “JavaScript”的名头相信大家肯定是耳熟能详,但只有一小部分人群了解它的使用与应用程序构建方式.这“一小部分”人指的当然是技术过硬的有为青年.网络程序员以及IT专业人员.但对于一位新手或者说外 ...

  4. Javascript之高效编程

    前言: Javascript绝对是最火的编程语言之一,一直具有很大的用户群,具有广泛的应用前景.而在前端开发中,它也是三驾马车之一,并且是最重要的一环.要想给用户提供更流畅的操作体验,更友好的交互,对 ...

  5. 用JavaScript往DIV动态添加内容

    参考:http://zhidao.baidu.com/link?url=6jSchyqPiEYCBoKdOmv52YHz9r7MTBms2pK1N6ptOX1kaR2eg320mlW1Sr6n36hp ...

  6. 前端之JavaScript第一天学习(1)-JavaScript 简介

    javaScript 是世界上最流行的编程语言. 这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记本电脑.平板电脑和智能手机等设备. JavaScript 是脚本语言 JavaSc ...

  7. javascript 高效按字节截取字符串

    做为一个前端开发人员在网页展示中经常会碰到,标题过长,需要截取字符串,用CSS的实现的话各种兼容问题,各种坑. 让后台程序截一下,又各种推托,让后台按字节截一下更是和要了后台老命一样,最后可能只会安字 ...

  8. 100个直接可以拿来用的JavaScript实用功能代码片段(转载)

    把平时网站上常用的一些实用功能代码片段通通收集起来,方面网友们学习使用,利用好的话可以加快网友们的开发速度,提高工作效率. 目录如下: 1.原生JavaScript实现字符串长度截取2.原生JavaS ...

  9. 【JavsScript】JavaScript MVC 框架技术选型

    你很喜欢Gmail和Trello之类的单页面应用,但是不太确定该从何开始.也许你的JavaScript代码是如此的杂乱无章,以致于你很想在下一个项目上尝试下JavaScript MVC库和框架,却苦于 ...

随机推荐

  1. JNI用法小例子

    一.准备包含本地方法的.java文件(ContentVideo.java),包括set()和get()两个方法. public class ContentVideo { public native s ...

  2. 数据库Oracle日期函数

    SYSDATE 函数:是一个日期函数,它返回当前数据库服务器的日期和时间. 用日期计算: • 从日期加或者减一个数,结果是一个日期值 • 两个日期相减,得到两个日期之间的天数 ,可以加小时到日期上 S ...

  3. MyBatis三个查询方法_selectList_selectOne_selectMap

    mybatis-cfg.xml的配置: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE co ...

  4. ansible批量管理常见的配置方法

    第7章 ansible的管理 7.1 ansible概念的介绍 ansible-playbook –syntax            检查语法 ansible-playbook -C         ...

  5. unity3d 动态添加地面贴图 草地

    TerrainData.splatPrototypes = ]{ new SplatPrototype() { texture=Caodi, //Texture2D的贴图 normalMap=null ...

  6. WebAPI测试概念及postman初识

    什么是接口?   ------   某个对象和外界交互的部分 消息交互接口:基于soap的web service  ---- http协议 web api   ------- http协议 diame ...

  7. Selenium选择web元素

    获取html片段可以用来做什么? 可以用来分割,也可以分析HTML文档 beautifulsoup用法? 安装beautifulsoup库: pip install beautifulsoup4 因为 ...

  8. 为什么有ASP.NET

    最近读了一些文章,总结一下: 在1999年,当时微软的windows系统运行的所有的应用程序都是有组件对象模型为根本基础开发的,用VB来处理数据访问和复杂的用户界面,缺点是不能使用函数指针,因为当时的 ...

  9. [Java并发] AQS抽象队列同步器源码解析--独占锁释放过程

    [Java并发] AQS抽象队列同步器源码解析--独占锁获取过程 上一篇已经讲解了AQS独占锁的获取过程,接下来就是对AQS独占锁的释放过程进行详细的分析说明,废话不多说,直接进入正文... 锁释放入 ...

  10. JS中&&和||的理解

    运算符可以从三个不同的层次进行理解. 第一层理解 当操作数都是布尔值时,"&&"对两个值执行布尔与(AND)操作. 复制代码代码如下: x==0 && ...