for 、forEach 、 forof、 forin遍历对比

一、遍历内容的异同

1.for 和 for...in 是针对数组下标的遍历

2.forEach 及 for...of 遍历的是数组中的元素

 

二、对非数字下标的处理

由于array在js中也是对象中的一种， 假设array=[1,2,3],所以array.key = 'item' 这种写法也是成立的，所以数组中的下标并不都是数字

1.for...in 可以遍历出非数字的下标，即可以得到  1，2，3，item 

2.其他三种只能遍历出数字下标

 

三、空元素

假如有一个数组 array=[1,,3]，这个array.length 为 3

1.for 和 for...of 在遍历array的时候会输出 1,undefined,3

2.forEach 和 for...in 则会跳过空元素，只输出 1，3

 

四、遍历块中的this 指向

1.for for...in for...of 块中的this指向和块外作用域一致

2.forEach 的函数参数为非箭头函数时，this指向是undefined（废话，新增了作用域而且这个作用域并没有被显式调用）

 

五、async/await 和 generators 的处理

假设有一个  async 函数，在函数中要调用forEach，同时在forEach中使用await 是有限制的，其他3种则没有。

如果想在forEach中正确使用await，需要这么做：

async function print(n) {
  await new Promise(resolve => setTimeout(() => resolve(), 1000 - n * 100));
  console.log(n);
}

async function test() {
  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].forEach(print);
}

test();

 

参考：

http://thecodebarbarian.com/for-vs-for-each-vs-for-in-vs-for-of-in-javascript.html