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