js中常见的循环迭代：for循环、forEach、for…in…for…of…

简介

日常工作中使用循环的场景有很多。昨天，当我在改变别人的代码时，同事喜欢使用ES6和其他新功能。你用for...of...来遍历一个数组，然后必要的业务需求使用数组中序号的索引值，就很别扭了。我只能将其重置为forEach。但for...of...在许多情况下（例如中断等）仍然非常强大。下面总结了js中几种常见的循环迭代方法。

常见的循环迭代方法

`for loop`

说起for周期，大家应该立刻回到刚上电脑课时那种美好的新生生活吧。循环方法是几乎所有语言的特征：

for (var i = 0; i < 10; i++) {
  console.log(i);
}

for (let i = 0; i < products.length; i++) {
  console.log(products[i]);
}

简单易懂。如果你不知道es5和es6的循环方法，就用这个来循环数组，然后用break来打破它。然而，循环数组并将其包装在一层上的要求有点麻烦。有没有更简洁的方法？当然，请继续阅读。

`forEach`

forEach 是 Array.prototype 上循环数组的方法。因此，数组可以直接调用该方法，如下：

products.forEach(function(product) {
  console.log(product);
});

循环前不需要计算总块数，直接使用即可。那么如果您需要获取每件商品的序列号怎么办？ forEach方法的第二个参数是当前回路元素index的值。

products.forEach(function(product，index) {
  console.log(index, product);
});

与循环中的for 相同：

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

的唯一缺点是 forEach 不支持中断循环。如果不需要有条件地打破循环块，使用forEach是最好的选择。特别是，当循环某些嵌套数组的双循环时，代码是可读的。性爱会好很多。

因为...

var arr = [
  'a', 
  'b'
];
for (var i in arr) {
  console.log(i); //0 1
}

以任意顺序迭代对象的可枚举属性。不要忘记数组也是对象...我们经常使用这种方法来遍历普通对象。我们实际上可以迭代一个数组。数组索引是0、1、2之类的数字。但强烈建议不要这样使用。因为循环会循环遍历对象本身的所有无数属性，以及对象从构造函数原型继承的属性。
MDN 还明确指出：for...in 不能用于重复 Array，其中索引的顺序很重要。而如果必须使用hasOwnProperty方法来过滤和迭代继承属性的方法，那就非常麻烦了。简而言之，一般情况下我们不会迭代继承的属性，因此不建议使用for...in...。
如果你用 forEach 来做就更好了：

Object.keys(obj).forEach(function(key) { console.log(obj[key]) });

…为了…

最后出现的也是ES6支持的最新迭代方法…the…。 MDN 上的定义：
在可迭代对象（包括数组、映射、集合、字符串、TypedArray、参数对象等）上创建迭代循环，调用自定义迭代钩子，并执行每个属性值语句。可以看到它支持的类型很多，最常用的是Array和arguments。

但请注意，虽然它提供了很多支持，但它不像 for...in... 正常的 Object 迭代那样工作。上面我们不推荐使用for...in...数组，所以for...of...就非常合适：

var arr = [
  'a', 
  'b'
];
for (var i of arr) {
  console.log(i); //a b
}

单步遍历数组，每个元素直接是值，可以中断。如果你不关心索引，强烈推荐。但回到介绍，如果您需要索引值，那就不太方便了。但 ES6 中有一个新的 entries 方法，允许 for...in... 也获取索引。

for (let [index, val] of arr.entries()) {
      console.log(index);   
}

总结Array

遍历Array时，如果需要分度，建议使用forEach，如果不需要分度，建议使用for...of...。
穿越Array时，如果不需要中断，建议使用forEach，如果需要中断，建议使用for...of...。
如果重复常用的Object，虽然可以在原型上使用冗余属性for...in...和hasOwnproperty，但我仍然建议使用❝♷❓。
```
Object.keys(obj).forEach(function(key) { console.log(key) });

// a
 
```
当迭代String和arguments等可迭代对象时，只能使用for...of...。

参见

MDN…/
MDN…在
for..获取索引