通過(guò)節(jié)食來(lái)解釋 JavaScript 的Reduce方法!

GHOST_349178 發(fā)布于2019-08-23 14:04 / 1187人閱讀

摘要：例使用多個(gè)類別所以如果這都是關(guān)于卡路里的，為什么會(huì)有這么多不同的飲食呢我不打算深究營(yíng)養(yǎng)科學(xué)，但這里有一個(gè)概括性的總結(jié)對(duì)于最佳減肥方法有很多分歧。

想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！

JavaScript中的reduce方法為您提供了一種簡(jiǎn)單的方法來(lái)獲取值數(shù)組并將它們組合成一個(gè)值，或者根據(jù)多個(gè)類別對(duì)數(shù)組求和。

哇，一句話說(shuō)得太多了，讓我們一步一步來(lái)吧！

當(dāng)然，你可以使用 for 循環(huán)遍歷數(shù)組并對(duì)每個(gè)值執(zhí)行特定操作。但是，如果你不使用 filter()、map() 和reduce() 等方法，那么你的代碼將變得更加難以閱讀。其他開發(fā)人員需要徹底閱讀每個(gè)循環(huán)才能理解其目的,而且容易出現(xiàn)更多的 bug，因?yàn)槟阈枰獎(jiǎng)?chuàng)建更多的變量來(lái)跟蹤單個(gè)值。

Filter 方法接受初始數(shù)組中的所有元素，并且只允許某些元素進(jìn)入最終數(shù)組

Map 方法在初始數(shù)組中的每個(gè)元素上運(yùn)行一個(gè)函數(shù)，然后將其存儲(chǔ)在最終數(shù)組中。

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

我意識(shí)到這有點(diǎn)像節(jié)食。從非常簡(jiǎn)單的方法，如計(jì)算卡路里，到更復(fù)雜的飲食，如 Atkins 減肥法或稱體重計(jì)(WeightWatchers)，目標(biāo)是將你一天中可能吃的所有食物提煉成一個(gè)(或多個(gè))值，看看你是否在減肥的軌道上。

用 For 循環(huán)模擬Reduce

下面是使用for循環(huán)快速顯示reduce()功能的方法。假設(shè)你有一個(gè)包含你一天中吃過(guò)的5種不同食物的卡路里計(jì)數(shù)的數(shù)組，你想知道你總共消耗了多少卡路里,代碼如下：

這很簡(jiǎn)單，你創(chuàng)建一個(gè)變量來(lái)保存最終數(shù)量，然后在運(yùn)行數(shù)組時(shí)添加它。但是，你仍然需要引入一個(gè)新變量，并且循環(huán)沒有提供關(guān)于循環(huán)目的的線索。

一個(gè)簡(jiǎn)單的Reduce示例

讓我們學(xué)習(xí)如何使用reduce()方法實(shí)現(xiàn)相同的目標(biāo)。

reduce() 方法接收一個(gè)函數(shù)作為累加器，數(shù)組中的每個(gè)值（從左到右）開始縮減，最終計(jì)算為一個(gè)值。對(duì)空數(shù)組是不會(huì)執(zhí)行回調(diào)函數(shù)的。

所以 reduce 有一些內(nèi)存的概念。在遍歷數(shù)組中的每一項(xiàng)時(shí)，sum參數(shù)將跟蹤值。在前面的例子中，我們必須在循環(huán)范圍之外聲明一個(gè)新變量來(lái)“記住”這些值。

這與for()之間的可讀性似乎沒有太大區(qū)別。但是，當(dāng)需要遍歷數(shù)百行代碼時(shí)，reduce 會(huì)讓你快速了解代碼塊的用途。

例2 - 使用對(duì)象

到目前為止，我們只舉例一維數(shù)組。但是，如果您可以遍歷一個(gè)都是數(shù)字的數(shù)組，那么你也可以遍歷一個(gè)都是對(duì)象的數(shù)組。讓我們給每個(gè)元素加一個(gè)名字，這樣我們就能知道我們一天到底吃了什么。

你早餐吃了一份牛排，一些水果，然后午餐吃了一些沙拉和薯?xiàng)l，最后晚餐吃了冰淇淋，真是糟糕的一天！

希望你們能看到整個(gè)數(shù)組的流動(dòng)。當(dāng)我們研究每一種元素時(shí)，總熱量的總和（ sum）就代表了一天所消耗的總熱量，主要是把這些數(shù)值放進(jìn)一個(gè)大桶里——一天的卡路里量。

例3 - 使用多個(gè)類別

所以如果這都是關(guān)于卡路里的，為什么會(huì)有這么多不同的飲食呢? 我不打算深究營(yíng)養(yǎng)科學(xué)，但這里有一個(gè)概括性的總結(jié)——對(duì)于 “最佳” 減肥方法有很多分歧。有些人鼓勵(lì)你只計(jì)算卡路里，而另一些人則關(guān)注蛋白質(zhì)、碳水化合物、脂肪和其他任何因素。

讓我們?cè)O(shè)想一下，你希望更改代碼，以便能夠基于任何常見的節(jié)食系統(tǒng)評(píng)估您的飲食。你需要追蹤每種食物的碳水化合物和脂肪，然后你需要在最后統(tǒng)計(jì)一下，這樣你就能算出你在每個(gè)類別中消耗了多少克，以下我們的食品（有虛假的營(yíng)養(yǎng)價(jià)值）：

現(xiàn)在，我們需要運(yùn)行reduce()方法。但是，它不能在一個(gè)值中被跟蹤，我們想保留我們的類別。因此，我們的累加器需要是一個(gè)與數(shù)組具有相同類型的對(duì)象。

下面是這個(gè)過(guò)程的一個(gè)GIF圖片：

在遍歷數(shù)組每個(gè)項(xiàng)時(shí)，你將更改對(duì)象中特定屬性的值，如果該對(duì)象尚未具有正確名稱的屬性，則將創(chuàng)建該對(duì)象，如下：

我們使用 bucket 作為對(duì)象，根據(jù)屬性名對(duì)值進(jìn)行分類。我們使用 += 操作符為來(lái)自 foods 數(shù)組的對(duì)象中的每個(gè)值添加到適當(dāng)?shù)腷ucket。請(qǐng)注意保存值的 key 的名字，這里是隨意的，這是因?yàn)樗菬o(wú)關(guān)緊要的——我們只是想要數(shù)字，這樣我們就可以分析你一天飲食的成功。

如你所見，在我們的輸出中有一個(gè)問(wèn)題，結(jié)果包含一個(gè) name 字段為“steak”，我們并不想存儲(chǔ)該字段。因此，我們需要指定另一個(gè)參數(shù)——初始值。

這個(gè)參數(shù)在回調(diào)之后出現(xiàn)，我們希望將 calories、carbs 和 fat 字段初始化為0，以便我們的 reduce 方法知道這是我們將用于 bucket 參數(shù)的唯一三個(gè)鍵/值對(duì)，代碼如下：

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

你的點(diǎn)贊是我持續(xù)分享好東西的動(dòng)力，歡迎點(diǎn)贊！

歡迎加入前端大家庭，里面會(huì)經(jīng)常分享一些技術(shù)資源。