javascript的各种循环比较

主要的几种方式

for
for优化
for-in 循环遍历对象的属性
while
do-while
for-of
forEach
map
还有几种特殊的every，some等

普通的for循环

var a = [1,2,3,5,,,8];
for(var i =0 ;i

for优化

将for循环的条件计算前置

var a = [1,2,3,5,,,8],len = a.length;
for(var i =0 ;i

for-in

for(var i in a){
console.log(a[i]);
}

注意事项

for-in里面的i是string类型

for(var i in a){
let j = i+1;
console.log(typeOf(i),j);
}

j打印出来是01，11，21… string

for 和for in的比较
for比较常用，使用的时候要注意循环条件，数组的下标始终是0开始的，所以结束的条件要记得减1
for-in是通过循环对象的属性来实现循环的，所以当一个数组是断断续续的时候，使用forin会比较快速
比如一个数组

var blockArr = ['test1','test2','test3'];
blockArr[1000] = 'test100';

数组的长度是1001，使用for的时候，会循环1001次，但是使用forin，只会循环4次。

	for(var i =0 ; i < a.length;i++){
	console.log(i,a[i])}

//结果
0，test1
1，test2
2，test3
3，undefined
同上
直到 1000，test100；

for(var i in a){
console.log(i,a[i])
}

结果
0，test1
1，test2
2，test3
1000，test100；
只会打印4个结果，循环4次

for of （ES6）

for…of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for…of 循环，以替代 for…in 和 forEach() ，并支持新的迭代协议。for…of 允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等。

语法
for (variable of iterable) {
statement
}
例如

const iterable = new Map([['one', 1], ['two', 2]]);
 
for (const [key, value] of iterable) {
  console.log(`Key: ${key} and Value: ${value}`);
}

打印结果
Key: one and Value: 1
Key: two and Value: 2

forEach

使用方法
arr.forEach(function(item){
console.log(item);
})

map 和every等使用方法一致

arr.map/every(function(item){
XXXX;
})

各个循环的时间比较

1000000个随机数组成的数组，逐个打印，看每一种方法的速度；
ForEach::
15.500000001338776ms
For::
1.9999999985884642ms
For优化::
2.0000000004074536ms
for in::
293.99999999986903ms
map::
192.3000000006141ms
for of::
48.39999999967404ms
while::
1.9000000011146767ms

每次结果不相同，但是大致优劣可以看出；

总结

如果量少的数组并且比较简单的，随便使用哪个都无所谓；
如果量大的，使用for
如果是断续的数组，使用for in

在线比较链接

https://htmlpreview.github.io/?https://github.com/zthappy/Javascript/blob/master/Array/arraycycle.html