for...in VS. for...of

先看下面这两种写法：
1.

tabList.forEach((tab, i) => {
    if (tab.is_main) {
        this.tabStores.push();
    }else{
        this.tabStores.push();
    }
});

2.

tabList.map((tab, i) => {
    let ViewComponent = null;
    if (tab.is_main) {
         ViewComponent = ( ); 
    }else {
         ViewComponent = ( );
    }
    return (  {ViewComponent} );
})

刚学习的时候一直以为map和forEach是一样的东西，上面的两种写法能够随便互换，后来有机会仔细查了一下，发现并非这样。
在ES5种 forEach 和 map 同样都具备遍历数组的功能，可是他们的返回结果并不相同，使用 forEach 遍历数组时，没法使用break中断循环，也没法使用 return false 中断，固然使用 return 也不能返回到外层函数。例如：

var arr = [1, 2, 3];
arr.forEach(function (value) {
  console.log(value);
  if (value == 2) {
    return false;
  }
});
// 结果是：1, 2, 3

---

for in VS. for of

for...in循环出的是key，for...of循环出的是value
遍历数组：

var arr = [2, 5, 7];
for (let temp in arr){//枚举数组
    console.log(temp);
}
//0 1 2
for (let temp of arr){//迭代数组
    console.log(temp);
}
//2 5 7

使用for...in的时候若是想要获取数组内的value，能够采用索引的方式，例如arr[temp];可是这个作法并很差，由于：1.temp并非一个数字，而是一个string，会无心间增长字符串计算；2.for in 不只能够枚举数组自身。数组的原型对象、数组对象自己的属性也均可以枚举出来 （可用hasOwnProperty()方法过滤非自有属性）；3.这段代码可能按照随机顺序遍历数组； 4.for... in不适用于数组的遍历，更加适用于对象。

枚举对象：

var obj = {
    a: 1,
    b: [],
    c: fn,
};
for ( let temp in obj){
    console.log(temp);
}
// a b c
for (let temp of obj){
    console.log(temp);
}
// Uncaught TypeError: obj is not iterable

for...of循环不支持普通对象，若是想迭代一个对象的属性，可使用内建的Object.keys()方法；

for(let key of Object.keys(obj)){
    //使用Object.keys()方法获取对象key的数组
    console.log(key + ':' + obj[key]);
}