經過節食來解釋 JavaScript 的Reduce方法!

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等着你！

JavaScript中的reduce方法爲您提供了一種簡單的方法來獲取值數組並將它們組合成一個值，或者根據多個類別對數組求和。

哇，一句話說得太多了，讓咱們一步一步來吧！

固然，你可使用 for 循環遍歷數組並對每一個值執行特定操做。可是，若是你不使用 filter()、map() 和reduce() 等方法，那麼你的代碼將變得更加難以閱讀。其餘開發人員須要完全閱讀每一個循環才能理解其目的,並且容易出現更多的 bug，由於你須要建立更多的變量來跟蹤單個值。

Filter 方法接受初始數組中的全部元素，而且只容許某些元素進入最終數組

Map 方法在初始數組中的每一個元素上運行一個函數，而後將其存儲在最終數組中。

而 reduce 方法將初始數組中的元素組合成最終值或值數組。

我意識到這有點像節食。從很是簡單的方法，如計算卡路里，到更復雜的飲食，如 Atkins 減肥法或稱體重計(WeightWatchers)，目標是將你一天中可能吃的全部食物提煉成一個(或多個)值，看看你是否在減肥的軌道上。

用 For 循環模擬Reduce

下面是使用for循環快速顯示reduce()功能的方法。假設你有一個包含你一天中吃過的5種不一樣食物的卡路里計數的數組，你想知道你總共消耗了多少卡路里,代碼以下：

這很簡單，你建立一個變量來保存最終數量，而後在運行數組時添加它。可是，你仍然須要引入一個新變量，而且循環沒有提供關於循環目的的線索。

一個簡單的Reduce示例

讓咱們學習如何使用reduce()方法實現相同的目標。

reduce() 方法接收一個函數做爲累加器，數組中的每一個值（從左到右）開始縮減，最終計算爲一個值。對空數組是不會執行回調函數的。

因此 reduce 有一些內存的概念。在遍歷數組中的每一項時，sum參數將跟蹤值。在前面的例子中，咱們必須在循環範圍以外聲明一個新變量來「記住」這些值。

這與for()之間的可讀性彷佛沒有太大區別。可是，當須要遍歷數百行代碼時，reduce 會讓你快速瞭解代碼塊的用途。

例2 - 使用對象

到目前爲止，咱們只舉例一維數組。可是，若是您能夠遍歷一個都是數字的數組，那麼你也能夠遍歷一個都是對象的數組。讓咱們給每一個元素加一個名字，這樣咱們就能知道咱們一天到底吃了什麼。

你早餐吃了一份牛排，一些水果，而後午飯吃了一些沙拉和薯條，最後晚餐吃了冰淇淋，真是糟糕的一天！

但願大家能看到整個數組的流動。當咱們研究每一種元素時，總熱量的總和（ sum）就表明了一天所消耗的總熱量，主要是把這些數值放進一個大桶裏——一天的卡路里量。

例3 - 使用多個類別

因此若是這都是關於卡路里的，爲何會有這麼多不一樣的飲食呢? 我不打算深究養分科學，但這裏有一個歸納性的總結——對於 「最佳」 減肥方法有不少分歧。有些人鼓勵你只計算卡路里，而另外一些人則關注蛋白質、碳水化合物、脂肪和其餘任何因素。

讓咱們設想一下，你但願更改代碼，以便可以基於任何常見的節食系統評估您的飲食。你須要追蹤每種食物的碳水化合物和脂肪，而後你須要在最後統計一下，這樣你就能算出你在每一個類別中消耗了多少克，如下咱們的食品（有虛假的養分價值）：

如今，咱們須要運行reduce()方法。可是，它不能在一個值中被跟蹤，咱們想保留咱們的類別。所以，咱們的累加器須要是一個與數組具備相同類型的對象。

下面是這個過程的一個GIF圖片：

在遍歷數組每一個項時，你將更改對象中特定屬性的值，若是該對象還沒有具備正確名稱的屬性，則將建立該對象，以下：

咱們使用 bucket 做爲對象，根據屬性名對值進行分類。咱們使用 += 操做符爲來自 foods 數組的對象中的每一個值添加到適當的bucket。請注意保存值的 key 的名字，這裏是隨意的，這是由於它是可有可無的——咱們只是想要數字，這樣咱們就能夠分析你一天飲食的成功。

如你所見，在咱們的輸出中有一個問題，結果包含一個 name 字段爲「steak」，咱們並不想存儲該字段。所以，咱們須要指定另外一個參數——初始值。

這個參數在回調以後出現，咱們但願將 calories、carbs 和 fat 字段初始化爲0，以便咱們的 reduce 方法知道這是咱們將用於 bucket 參數的惟一三個鍵/值對，代碼以下：

原文：https://codeburst.io/javascri...

你的點贊是我持續分享好東西的動力，歡迎點贊！

歡迎加入前端你們庭，裏面會常常分享一些技術資源。