全文共2556字，預計學習時長8分鐘
全文共2556字，預計學習時長8分鐘
來源：Pexels
世間紛亂復雜，我們在不斷給自身做“加法”的同時，也要學會對周圍的事物做“減法”，將復雜的東西簡化，為我所用，并發揮超出原本程度的增幅效果，這才是真正的“高手”。
在“碼農圈”，學習如何使用.map()、.filter()和.reduce()函數，我們讀到、看到和聽到的一切都很復雜，無法理解這些概念，因為它們是獨立的學習單元。
聽說這些是意味著上升至啟蒙狀態的入門知識。真希望自己聽到的是實話：早點明白這三種方法其實都是識別和實現過程，循環遍歷迭代的原因通常屬于三個功能類別之一。
回顧之前編寫的代碼，筆者發現95%的情況下，在對字符串或數組進行循環時，自己都會執行以下操作之一:將語句序列映射(map)到每個值，過濾(filter)滿足特定條件的值，或者將數據集減少(reduce)到單個聚合值。
這是取得進步的關鍵時刻，Map、filter和reduce只需要執行其中的一個任務即可！
來源：Pexels
為了練習，筆者使用這些方法對舊代碼進行重構，這真是幫了大忙！
言歸正傳，繼續講解學習內容。本文將解釋每種方法，然后將常用 for循環的實現轉換為這三個各自的方法。
Map
.map()方法使用在：1.用可迭代的每個值執行一組語句；2.返回(可能)修改值。
用一個簡單的示例來計算一系列價格的營業稅：
- const prices = [19.99, 4.95, 25, 3.50];let new_prices = [];for(let i=0; i < prices.length; i++) { new_prices.push(prices[i] * 1.06);}
用.map()方法可以得出同樣的結果：
- const prices= [19.99, 4.95, 25, 3.50];let new_prices = prices.map(price => price *1.06);
上面的語法簡明扼要，所以簡單過一遍即可。
.map()函數采用回調，可以將其視為一個函數，這便是括號之間的含義。
price變量用于標識每個值的名稱，由于只有一個變量輸入，所以可以省略參數周圍的常用括號。
箭頭=>后的語句是回調的主體。由于主體只有一條語句，可以省略大括號和return關鍵字。
以防部分學習者無法理解，具體代碼如下，供詳細參考：
- const prices= [19.99, 4.95, 25, 3.50];let new_prices = prices.map((price) => { return price * 1.06});
Filter
當要從可迭代對象中提取值的子集時，.filter() 方法就派上了用場。使用.filter()時，請記住是在篩選值，而不是篩除值。這就意味著，迭代器中評估為true的每個項目，都將包含在過濾器中。
舉一個只保留奇數的例子：使用模運算符來計算除以2的余數。當余數等于1，就得知這個數是奇數。
- const numbers = [1,2,3,4,5,6,7,8];let odds = [];for(let i=0; i < numbers.length; i++) { if(numbers[i] % 2 == 1) { odds.push(numbers[i]); }
}與.map()類似，.filter()可以接受單個回調，以將可迭代對象中的每個值傳遞到該回調。
- constnumbers = [1,2,3,4,5,6,7,8];let odds = numbers.filter(num => num % 2);
此回調也適用類似的規則。由于只有一個輸入，且函數的主體是單個表達式，因此可以省略參數列表括號、定義主體的大括號和return關鍵字。
Reduce
最后，來看看.reduce()。誠然，它是三種方法中最讓人困惑的方法。從術語名稱來看，Reduce方法是指將多個值縮減為一個。然而，筆者發現，與“減少”相比，把它想成是“積累”更容易操作。
該方法通過定義起點來運行。當該方法迭代每個值時，該起點將被修改并向下傳遞。
這是將一系列數字相加的經典案例。假設正在計算某人最喜歡的慈善機構的捐款總額：
- constdonations = [5, 20, 100, 80, 75];let total = 0;for(let i=0; i < donations.length; i++) { total += donations[i];}
與.map()和.filter()不同，.reduce()方法的回調需要兩個參數：累加器和當前值。累加器將是第一個參數，是“向下傳遞”值。
- constdonations = [5, 20, 100, 80, 75];let total = donations.reduce((total,donation)=> { return total + donation;});
還可以將第二個參數傳遞給 .reduce()函數本身，作為累加器的起始值。假設加上昨天總共450美元的捐款。
- constdonations = [5, 20, 100, 80, 75];let total = donations.reduce((total,donation)=> { return total + donation;}, 450);
然后就能得到運行結果，這些方法并不可怕，它們能讓代碼更具可讀性！這樣就可以編寫更精簡的代碼啦，更重要的是，這實際上是在描述循環意圖！
來源：Pexels
在三個月后回顧代碼時，我們的閱讀將變得更輕松。不必閱讀for循環中的語句，只需理解它的高級意圖，就可以看到map/filter/reduce方法，并能開始對該塊試圖實現的目標有所想法了。
就像“哥倫布發現新大陸”一般，面對如此大的進步，我興奮不已，你呢？
留言 點贊 發個朋友圈
我們一起分享AI學習與發展的干貨
如需轉載，請后臺留言，遵守轉載規范
