菜鳥系列——forEach、map、for...in、for...of

作爲一個前端菜鳥，有好多容易弄混的名詞
我想把搞清楚的一一記錄下來，幫助記憶

forEach、map、for...in、for...of

這四個方法都是可以遍歷數組或類數組的，很容易就懵了，必須總結一下他們的使用對象和區別，加以區分。
首先，map()和forEach()是Array自帶的方法，Map對象也有forEach()方法，而for...in和for...of是對數組/類數組元素進行for循環操作的方法。
也就是說，在使用map()和forEach()的時候，需要用數組調用。(先只說數組的forEach())

var arr=[1,2,3,4,5];
arr.map();
arr.forEach();
for( k in arr ){};
for( k of arr ){};

這麼說來，我們可以把他們分爲兩組分別介紹

第一組：map()和forEach()

相同點：

• 只能遍歷數組，且循環遍歷數組中的每一項
• 包含的匿名函數都是三個參數(item,index,input)（當前項，當前項的索引，原始數組）
• 在IE6-8下都不兼容

不同點：

• map()有返回值，可以用'鏈式'連接；forEach()無返回值，寫了也沒用
  舉個栗子吧~ 建議不要只看看，自己多嘗試一下

var arr = [1,2,3,4];
var res1 = arr.map(function(item,index,input){
      return input[index] = item*2;   //返回每一項哦
})
console.log(res1);   //[2,4,6,8]
console.log(arr);    //[2,4,6,8]
 // 如果不想改變原數組，可以return item*2；那麼最後arr=[1,2,3,4]

var arr = [1,2,3,4];
var res2 = arr.forEach(function(item,index,input){
      return input[index] = item*2;
})
console.log(res2);   //undefined
console.log(arr);    //[2,4,6,8]
 // 如果寫return item*2，原數組也不會改變

• forEach()不能使用continue, break;
• map()速度最快

作爲 Map 的forEach方法時，與數組的forEach方法類似，也可以實現遍歷。

map.forEach(function(value, key, map) {
  console.log("Key: %s, Value: %s", key, value);
});

forEach方法還可以接受第二個參數，用來綁定this。

第二組：for...in和for...of

em....

• for...in的毛病真是太多了，直接別用了，他作爲一個for循環，不能保證遍歷的順序是預期的，還只能訪問索引還會把數組屬性遍歷，實在是很糟糕，唯一能替代for...of的場景就是循環普通對象（for...of不能循環沒有遍歷器（Iterator）的對象）
• for...of可以循環具備 Iterator 接口的數據結構，如下

ES6中定義的原生具備 Iterator 接口的數據結構:
Array
Map
Set
String
TypedArray
函數的 arguments 對象
NodeList 對象

另外，通過數組&Map對象包含的三個遍歷器生成函數，for...in 還可以循環索引和鍵值對

keys()：返回鍵名的遍歷器。
values()：返回鍵值的遍歷器。
entries()：返回所有成員的遍歷器。

詳細的內容大家可以通過阮一峯大大的ES6入門瞭解