js中的常见的循环迭代：for loop, forEach, for...in... for...of...

引言

平时工做中循环的使用场景能够说是很是之多了，昨天改别人代码时候有位同事很是喜欢用ES6等新特性，一个数组的遍历所有都是用for...of...，而后业务需求要用到数组中的序号index值，就很尴尬了，我只能改回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是最好的选择，尤为是遍历一些嵌套数组双重循环时候，写起来代码可读性会好不少。

for...in...

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]) });

for...of...

最后出场也是ES6最新支持的迭代方法就是for...of...。MDN上的定义：
在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上建立一个迭代循环，调用自定义迭代钩子，并为每一个不一样属性的值执行语句。
能够看到它支持的种类很是多，最经常使用的就是Array和arguments了，可是注意虽然支持这么多并不能像for...in...用于普通Object的迭代。上面咱们不推荐for...in...应用于数组，那么for...of...就很是合适了：

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

遍历数组，每项直接就是值，而且能够中断，若是不关心索引的话，强烈推荐。可是回到引言那里若是你须要索引值这就不是很方便了。可是ES6中有新的entries方法可让for...in...也能够获取索引。

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

总结

1. 当遍历Array时候，在须要索引时候推荐用forEach，不须要索引时候用for...of...。

2. 当迭代Object时候，虽然只能用for...in...配合hasOwnproperty过滤不须要的，但我仍是推荐用Object.keys()配合forEach：

   Object.keys(obj).forEach(function(key) { ... });

3. 当迭代String、arguments等可迭代对象时候，也只能使用for...of...。

参考

• MDN for...of
• MDN for...in
• for..of 获取索引