天要吐槽下，我時不時地看到有些文章說“循環(huán)語句不好，你應該用 filter，map 和 reduce ”——每次看到有文章鼓吹，所有需要循環(huán)的場景一律用這幾個函數(shù)式方法，我都恨得牙癢癢。

沒錯，這些函數(shù)式方法確實有它們的用途。我不是說你不能用它們，而是說不能不管三七二十一，到處濫用。在許多情況下，如果你想寫性能好的代碼，for 循環(huán)基本上是更好的選擇。

map, filter 和reduce等方法的目的是防止傳入的內(nèi)容發(fā)生改變。在FP(函數(shù)式編程)風格中，向這些方法傳遞一個數(shù)組將返回一個新集合，而原始集合則保持不變。

對于map來說(因為它似乎是最容易被濫用和性能最差的)，與for循環(huán)相比，差異可能是顯著的。原因是map將創(chuàng)建一個新的副本，在每次迭代時觸發(fā)一個回調(diào)并消耗更多的內(nèi)存。 for循環(huán)只是在執(zhí)行迭代的內(nèi)容，所以它幾乎沒有開銷。

有人專門創(chuàng)建了一個倉庫，將它們做了對比，對于大量數(shù)據(jù)的對比結(jié)果是驚人的(如果你知道這些方法的工作原理，你就一點也不覺得奇怪了)。

在我的 web應用中，我現(xiàn)在比以前更傾向于使用map, filter 和reduce。但我也注意到，在某些情況下，for循環(huán)是更好的選擇，因為for循環(huán)可以做這些方法不能做的事情。

中止循環(huán)

你可能已經(jīng)知道了，可以使用break關(guān)鍵字來中止for循環(huán)。如果使用for循環(huán)遍歷數(shù)組，直到找到特定的值或運行了一定次數(shù)的迭代，就可以通過在循環(huán)中執(zhí)行break來中止循環(huán)。

相反，map, filter 和reduce本身不能被終止；它們將一直迭代直到遍歷完數(shù)組中的每一項。

異步循環(huán)

for循環(huán)可以很容易地與async/await一起使用，這意味著你可以暫停循環(huán)，讓它等待一個promise被解決，然后再繼續(xù)迭代下一個值。

當你嘗試將async/await混合使用時，函數(shù)式方法map, filter 和reduce 將會產(chǎn)生混亂。如果 await累加器，你可以勉強讓reduce 正常工作，但總感覺不太對勁。

for 循環(huán)就容易多了，所以為什么自找麻煩呢？而且，async/await 可以在各種形式的for循環(huán)里使用。

你還在干這種事嗎？快住手

async function loadValues() {let myValues = await getValuesFromApi();myValues = myValues.map(value => {value.total = value.price * value.quantity;return value;}); }

有人用map遍歷對象數(shù)組，只是為了修改數(shù)組里的對象屬性值，然后又把整個結(jié)果賦值給原始數(shù)組，這種做法我見得太多了。map的本意其實是創(chuàng)建數(shù)組的一個副本，但是很多人把它當作循環(huán)來用，而且還把結(jié)果重新賦值給原來的變量，好歹用個新變量啊。

如果你也是這么做的，趁早糾正過來。用for循環(huán)就行了，因為那才是你本該做的。這種情況用map 你得不到任何好處。

總結(jié)

在大部分情況下，你用前面提到的任何一個函數(shù)式方法，在性能上跟傳統(tǒng)的for循環(huán)相比幾乎沒有差別。如果不是處理幾萬、幾十萬條數(shù)據(jù)，性能差別不超過100ms。

先用你認為合適的方式去寫代碼，然后如果發(fā)現(xiàn)性能不夠理想，你可以使用瀏覽器開發(fā)人員工具和常識來確定應用程序的哪些方面可以優(yōu)化。

記住：過早的優(yōu)化是萬惡之源。

作者：1024譯站
鏈接：https://www.jianshu.com/p/494ad0a7abba
來源：簡書

總結(jié)

以上是生活随笔為你收集整理的map for循环_JavaScript 用 for 循环太 low？你是不是有什么误解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。