Js中for、for...of 、for...in 等 iteration 效率测试

由于不同浏览器，不同版本性能不一，且控制台本质是是套用了一大堆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 > 正序简版 for> 倒序 for > cache for > 倒叙简版 for> forEach > for..of> map > for..in

几种普通 for 循环占用内存相差不大, 而 for..of 占用运行内存最小 for..in 性能最差，内存占用高，速度很慢

来自：https://www.cnblogs.com/gaoguowen/archive/2019/07/05/11137331.html

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_4036