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