js数组使用注意事项

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

2.遍历Array时候，不需要中断时候推荐用forEach，需要中断时候用for...of...。

3.迭代普通Object时候，虽然能用for...in...配合hasOwnproperty过滤原型上不需要的属性，推荐用Object.keys()配合forEach：

4.迭代String、arguments等可迭代对象时候，也只能使用

---

js中的for loop: for forEach, for...in... for...of...

• for

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

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

简单易懂，如果你不知道es5和es6的for loop方法, 就用这个来对数组进行遍历，并且可以用break中断。但是对于数组进行循环包一层这个条件总归有些啰嗦，有没有更简洁的方法。

• forEach
  forEach是Array.prototype上的方法，可以使用它对数组进行循环遍历；不需要计算数组的总数，直接用。第二个参数是当前循环项的下标(index)的值

products.forEach(product=> {
  console.log(product);
});

// index 索引值
products.forEach((product，index) =>{
  console.log(index, product);
});

forEach不支持中断循环，若不需要条件中断循环数组，采用forEach是最好的选择，尤其是遍历一些嵌套数组双重循环时候，写起来代码可读性会好很多。

• for...in...

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

以任意顺序遍历对象的可枚举属性。数组也是对象,用这个方法来遍历普通对象，也是可以迭代数组的，数组的索引就是0,1,2这样的数字,不建议用。因循环将遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性。

MDN上提示：for...in不应该用于迭代一个 Array，其中索引顺序很重要。并且如果你为了过滤迭代继承的属性方法，又要用hasOwnProperty这些方法，非常繁琐。通常情况下我们不会去这样处理迭代继承而来的属性，不推荐使用for...in...。可以用forEach：

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

• for...of...

for...of...是ES6支持的迭代方法。

MDN上的定义：
在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。

它支持的种类多，常用的是Array和arguments了。虽支持这么多并不能像for...in...用于普通Object的迭代。推荐for...of...应用于数组：

遍历数组每项就是值，支持中断，若不关心索引推荐。你需要索引值这就不是很方便。但是ES6中的entries方法可以让for...in...获取索引。

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

// 获取索引
for (let [index, val] of arr.entries()) {
      console.log(index);   
}