Map, Filter和Reduce已經存在很長時間了。 它們通常被視爲函數式編程風格的一部分。
下面的動畫看起來可能有點不自然。但是因爲只用了創建的俄羅斯方塊網格（在以前的《如何製作俄羅斯方塊》教程中）。大家可以也來看看。
我們經常把複雜的概念通過形象化的方式記在腦海中。使用可視化作爲學習起點的編程文章並不多見。然而，視覺化在教育中是很重要的一環。編程也一樣。
即使在使用map、filter和reduce多年之後，仍然常常問自己:是否創建了原始數組的副本?是否修改了對原始數組的引用?寫下這篇教程也是爲了給這些問題一個答案。
希望是，一旦它被視覺化，它將更容易被記住。
Array.map-將所有值映射到表達式
Array.map(): 將“數值 + 1” 運用到一個有7個數的集合[1, 2, 3, 4, 5, 6, 7]中
1]表達式：數值+1應用於原始數組中的每個項。
2].map()返回一個數組的修改過的副本，使原始數組保持原樣。
3]結果：[2,3,4,5,6,7,8]（創建原始數組的副本。）
Array.filter–保留所有符合條件的內容
注意：動畫中有一個小錯誤。它應該返回[6,7]，而不是[6,7,8]。我馬上就改…
1]函數：數值>5應用於原始數組中的每個項。
2].filter()返回數組的修改過的副本-原始副本仍然可用！
3]結果：[6,7,8]（僅限通過條件的值。）
Array.reduce–將所有項目減少到一個值
Reducer的一個常見用法是將購物車中所有商品的價格加起來。
Reduce的獨特之處在於它使用了一個累計器。
我們需要爲累計器設置起始值。這裏我們設置的是0。
1]Reducer函數F將會取值然後累計。
在我們的例子中，.reduce(v, a) 將返回所有值的和。
3]結果：28(原數組中所有數字之和)
結論
當然，這些高階函數也可以(也應該)用於解決各種各樣的問題。
Map, Filter和Reduce也可以用於對象數組。它們不限於僅僅處理數值。
今天的分享就到這裏，希望本文能幫助到您！
❤️ 看之後
- 點贊，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓 -_-）
- 關注公衆號「新前端社區」，號享受文章首發體驗！每週重點攻克一個前端技術難點。
