.map() vs .forEach() vs for() 如何選擇？

​

.map() vs .forEach() vs for()

筆者說，自己基本沒怎麼用過​

​for()​

​來周遊，主要是用​

​.forEach()​

​。

但是總是會被很多朋友說，這些人認為​

​for()​

​的速度要比​

​.forEach()​

​快一點。（其實這根本沒有根據，下面會講）

速度當然是很重要的，但是我們也需要從其他方面考慮一下，特别是代碼資源。

很好的分析了​

​for()​

​​周遊。它同時也針對for()​

​周遊和​

​​.forEach()​

​做了比對[測試](https://jsperf.com/for-vs-foreach/37)。​

​​for()​

​與​

​.forEach()`相比會消耗更多的記憶體。

這樣，又回到了老問題，是用空間換速度，還是反之？

當然，都很重要。首先，這2個方面都不會成為你代碼中的瓶頸問題。其次，那些小小的優化技巧也不會很好的平衡這2個問題，隻會增加你的工作量而已。那我在來看下可讀性、可控性、以及可維護性之間的對比呢。

讓我們先來看個基本的sample

比如這個數組

var arr = [1, 2, 3];      

​.map()​

​:

arr.map(fcuntion(i) {
    console.log(i);
})      

43個字母

​.forEach()​

arr.forEach(function(i){
    console.log(i)
})      

47個字母

​for()​

for(var i=0,l=arr.lengrh;i<l; i++) {
    console.log(i);
}      

70個字母

​.map()​

​和​

​.forEach()​

​明顯要簡短一些，并且他們的可讀性更強，同時他們也建立了各自的​

​scope​

​，而​

​for()​

​在執行完周遊之後會把​

​i​

​l​

​這兩個元素挂起來，這讓我們需要手動增加一些代碼去清除他們所占用的記憶體。

是以，這時候可以告訴你的朋友：

用​

​.forEach()​

​或者​

​.map()​

.map() vs .forEach()

那麼接下來，我繼續做分析，為什麼更推薦用​

​.map()​

​，而不是​

​.forEach()​

​？

首先，​

​.map()​

​要比​

​.forEach()​

​執行速度更快。雖然我也說過執行速度不是我們需要考慮的主要因素，但是他們都比​

​for()​

​要更好用，那肯定要選更優化的一個。

第二，​

​.forEach()​

​的傳回值并不是array。如果你想用函數式程式設計寫個鍊式表達式來裝個逼，​

​.map()​

​将會是你不二的選擇。

來看下面這個例子：

var arr = [1, 2, 3];

console.log(
    arr.map(function(i){
        return i+i;
    })
    //鍊式風格
    .sort()
);// [2,4,6]

console.log(
    arr.forEach(function(i){
        return i+i;
    })
    //接不起來，斷了
    .sort()
);//TypeError: Cannot read property 'sort' of undefined      

最後

根據上面的代碼，大家應該了解到​

​.forEach()​

​跟​

​.map()​

​的局限。

最後，感謝大家耐心的閱讀，排個序

​.map() > .forEach() > for()​