js几种for循环区别

首先一段代码区别一下这几个循环对空值的区别

let arr = []
arr[0]="A"
arr[1]="B"
arr[3]="D"

let arr1=[]
arr1[0]="A"
arr1[1]="B"
arr1[2]="C"
console.log("arr=",arr, arr.length) //["A","B",empty,"D"],4
console.log("arr1=",arr1,arr1.length) //["A","B","C"],3

arr.forEach(element => {
   console.log(element)   //A  B  D 没有输出下标2的时候说明对空直接跳过了
});
for(let idx in arr){  
  console.log(arr[idx])  //A  B  D 也是直接不去循环空的
}
for(let el of arr){  
  console.log(el)   //A B undefind D 空的也循环了
}
for(let i=0;i<arr.length;i++){  
  console.log(arr[i])  //A B undefind D 空的也循环了
}
$.each(arr,function(k,v){  
  console.log(k,v) //0,A  1,B  2,undefind   3,D 空的也循环了
})

结果这几个for循环对数组空的循环是foreach与for in一样直接跳过，其余三个是没有定义值也会遍历。

然后来试一下这几个常用for循环的性能(谷歌87.0.4280.88版本)

本次测试不准确以下方第二次为准

console.time("closure")
(function x() {
 for(var i=0;i<10000000;i++){    };
})()   
console.timeEnd("closure");  //closure: 37.385009765625 ms

let arr = new Array(10000000)  
  console.time("closure");   
 (function x() {        for(let i in arr){     
   }    })()
console.timeEnd("closure");  //closure: 101.921142578125 ms

let arr = new Array(10000000)  
  console.time("closure");  
  (function x() {        arr.forEach(element=>{})    })
()console.timeEnd("closure"); //closure: 45.593994140625 ms

let arr = new Array(10000000) 
   console.time("closure");    
(function x() {       for(let e of arr){}    })()console.timeEnd("closure"); 
//closure: 717.2578125 ms

let arr = new Array(10000000)   
 console.time("closure");  
  (function x() {        $.each(arr,function(k,v){        })    })()
console.timeEnd("closure"); //closure: 762.531982421875 ms

测试了几次时间并不一样，不过大概就是以上最原始的要快一些 

重新测一下这几个循环的性能，上次测得总感觉不准（谷歌95.0.4638.54正式版本64 位）

console.time();
var j=0
for(var i=0;i<100000000;i++){  j++  };
console.timeEnd(); //测试10次平均在73-74ms左右浮动

var arr = new Array(10000000).fill(1)
var j = 0
console.time();
for (let i in arr) {
	j++
}
console.timeEnd();//用亿为单位崩溃，只能用千万，平均为1700ms左右这么算大概是17000ms


var arr = new Array(100000000).fill(1)
console.time();
arr.forEach(ele=>{ele=2})
console.timeEnd(); //测了几次大概在645ms左右浮动


var arr = new Array(100000000).fill(1)
console.time();
for(let e of arr){
    e=2
}
console.timeEnd();  //大概在870左右浮动

再来测一次百万级别的取五次平均
分别为2.36  128.75  7.09 12.96

综上：

四种循环以原始i++最快 其次性能为 for each>for of>>for in

最后补充一个神奇的事情，for let 里的i我原以为是number类型，结果是string类型，导致取i+1等会出问题。