摘要：接下來，我們可以創(chuàng)建一個(gè)函數(shù)，它接受一個(gè)累加器和一個(gè)項(xiàng)。累加器是在上一次調(diào)用中返回的累積值或者是，是下一個(gè)回調(diào)的輸入值。在中，我們首先判斷這個(gè)是否存在于累加器中，如果是存在，加。

翻譯： 劉小夕
原文鏈接：https://css-tricks.com/unders...

更多文章可戳: https://github.com/YvetteLau/...

有一些小伙伴，對(duì)JavaScript的 reduce 方法還不夠理解，我們來看下面兩段代碼：

const nums = [1, 2, 3];
let value = 0;

for (let i = 0; i < nums.length; i++) {
    value += nums[i];
}

const nums = [1, 2, 3];
const value = nums.reduce((ac, next) => ac + next, 0);

這兩段代碼在功能上是等價(jià)的，都是數(shù)組中所有數(shù)字的總和，但是它們之間有一些理念差異。讓我們先研究一下 reducer，因?yàn)樗鼈児δ軓?qiáng)大，而且在編程中很重要。有成百上千篇關(guān)于 reducer 的文章，最后我會(huì)鏈接我喜歡的文章。

要理解 reducer 的第一點(diǎn)也是最重要的一點(diǎn)是它永遠(yuǎn)返回一個(gè)值，這個(gè)值可以是數(shù)字、字符串、數(shù)組或?qū)ο螅冀K只能是一個(gè)。reducer 對(duì)于很多場(chǎng)景都很適用，但是它們對(duì)于將一種邏輯應(yīng)用到一組值中并最終得到一個(gè)單一結(jié)果的情況特別適用。

另外需要說明：reducer 本質(zhì)上不會(huì)改變你的初始值；相反，它們會(huì)返回一些其他的東西。

讓我們回顧一下第一個(gè)例子，這樣你就可以看到這里發(fā)生了什么，一起看一下下面的gif：

觀看gif也許對(duì)我們所有幫助，不過還是要回歸代碼：

const nums = [1, 2, 3];
let valu
![clipboard.png](/img/bVbv3AR)
let i = 0; i < nums.length; i++) {
    value += nums[i];
}

數(shù)組 nums ([1,2,3]) ，數(shù)組中的每個(gè)數(shù)字的第一個(gè)值將被添加到 value (0)。我們遍歷數(shù)組并將其每一項(xiàng)添加到 value。

讓我們嘗試一下不同的方法來實(shí)現(xiàn)此功能：

const nums = [1, 2, 3];
const initialValue = 0;

const reducer = function (acc, item) { 
    return acc + item;
}

const total = nums.reduce(reducer, initialValue);

現(xiàn)在我們有了相同的數(shù)組，但這次我們不會(huì)改變初始值(即前段代碼中的 value)。這里，我們有一個(gè)僅在開始時(shí)使用的初始值。接下來，我們可以創(chuàng)建一個(gè)函數(shù)，它接受一個(gè)累加器(acc)和一個(gè)項(xiàng)(item)。累加器是在上一次調(diào)用中返回的累積值(或者是 initialValue)，是下一個(gè)回調(diào)的輸入值。在這個(gè)例子中，你可以把它想象成一個(gè)滾下一座山的雪球，當(dāng)它以每一個(gè)吃過的值的大小增長時(shí)，它會(huì)吃掉它路徑中的每個(gè)值。

我們將使用 .reduce() 來接收這個(gè)函數(shù)并從初始值開始。可以使用箭頭函數(shù)簡寫：

const nums = [1, 2, 3];
const initialValue = 0;

const reducer = (acc, item) => { 
    return acc + item;
}

const total = nums.reduce(reducer, initialValue);

進(jìn)一步縮短代碼長度，我們知道箭頭函數(shù)，在沒有 {} 時(shí)，默認(rèn) return;

const nums = [1, 2, 3];
const initialValue = 0;

const reducer = (acc, item) => acc + item;

const total = nums.reduce(reducer, initialValue);

現(xiàn)在我們可以在調(diào)用它的地方應(yīng)用這個(gè)函數(shù)，也可以直接設(shè)置初始值，如下:

const nums = [1, 2, 3];

const total = nums.reduce((acc, item) => acc + item, 0);

累加器可能是一個(gè)令人生畏的術(shù)語，所以當(dāng)我們?cè)诨卣{(diào)調(diào)用上應(yīng)用邏輯時(shí)，你可以將它想象成數(shù)組的當(dāng)前狀態(tài)。

如果不清楚發(fā)生了什么，讓我們記錄下每次迭代的情況。reduce 使用的回調(diào)函數(shù)將針對(duì)數(shù)組中的每個(gè)項(xiàng)運(yùn)行。下面的演示將有助于更清楚地說明這一點(diǎn)。我使用了一個(gè)不同的數(shù)組（[1，3，6]），因?yàn)閿?shù)字與索引相同可能會(huì)令人困惑。

const nums = [1, 3, 6];

const reducer4 = function (acc, item) { 
    console.log(`Acc: ${acc}, Item: ${item}, Return value: ${acc + item}`);
    return acc + item;
}
const total4 = nums.reduce(reducer4, 0);

當(dāng)我們執(zhí)行這段代碼時(shí)，我們會(huì)在控制臺(tái)看到以下輸出:

Acc: 0, Item: 1, Return value: 1
Acc: 1, Item: 3, Return value: 4
Acc: 4, Item: 6, Return value: 10

下面是一個(gè)更直觀的分解：

累加器(acc)從初始值(initialValue)：0 開始的

然后第一個(gè) item是1，所以返回值是1（0+1=1）

1在下次調(diào)用時(shí)成為累加器

現(xiàn)在我們累加器是1(acc)，item (數(shù)組的第二項(xiàng))是3

返回值變?yōu)?（1+3=4）

4在下次調(diào)用時(shí)成為累加器，調(diào)用時(shí)的下一項(xiàng) item 是6

結(jié)果是10（4+6=10），是我們的最終值，因?yàn)?是數(shù)組中的最后一項(xiàng)

既然我們已經(jīng)掌握了這一點(diǎn)，那么讓我們來看看 reducer 可以做的一些常見和有用的事情。

假設(shè)您有一個(gè)數(shù)字?jǐn)?shù)組，并且希望返回一個(gè)報(bào)告這些數(shù)字在數(shù)組中出現(xiàn)的次數(shù)的對(duì)象。請(qǐng)注意，這同樣適用于字符串。

const nums = [3, 5, 6, 82, 1, 4, 3, 5, 82];

const result = nums.reduce((tally, amt) => {
    tally[amt] ? tally[amt]++ : tally[amt] = 1;
    return tally;
}, {});

console.log(result);
//{ "1": 1, "3": 2, "4": 1, "5": 2, "6": 1, "82": 2 }

最初，我們有一個(gè)數(shù)組和將要放入其中的對(duì)象。在 reducer 中，我們首先判斷這個(gè)item是否存在于累加器中，如果是存在，加1。如果不存在，添加這一項(xiàng)并設(shè)置為1。最后，請(qǐng)返回每一項(xiàng)出現(xiàn)的次數(shù)。然后，我們運(yùn)行reduce函數(shù)，同時(shí)傳遞 reducer 和初始值。

假設(shè)我們有一個(gè)數(shù)組，我們希望基于一組條件創(chuàng)建一個(gè)對(duì)象。reduce 在這里非常適用！現(xiàn)在，我們希望從數(shù)組中任意一個(gè)數(shù)字項(xiàng)創(chuàng)建一個(gè)對(duì)象，并同時(shí)顯示該數(shù)字的奇數(shù)和偶數(shù)版本。

const nums = [3, 5, 6, 82, 1, 4, 3, 5, 82];

// we"re going to make an object from an even and odd
// version of each instance of a number
const result = nums.reduce((acc, item) => {
  acc[item] = {
    odd: item % 2 ? item : item - 1,
    even: item % 2 ? item + 1 : item
  }
  return acc;
}, {});

console.log(result);

控制臺(tái)輸出結(jié)果:

{ "1": { odd: 1, even: 2 },
  "3": { odd: 3, even: 4 },
  "4": { odd: 3, even: 4 },
  "5": { odd: 5, even: 6 },
  "6": { odd: 5, even: 6 },
  "82": { odd: 81, even: 82 } 
}

當(dāng)我們遍歷數(shù)組中的每一項(xiàng)時(shí)，我們?yōu)榕紨?shù)和奇數(shù)創(chuàng)建一個(gè)屬性，并且基于一個(gè)帶模數(shù)運(yùn)算符的內(nèi)聯(lián)條件，我們要么存儲(chǔ)該數(shù)字，要么將其遞增1。模算符非常適合這樣做，因?yàn)樗梢钥焖贆z查偶數(shù)或奇數(shù) —— 如果它可以被兩個(gè)整除，它是偶數(shù)，如果不是，它是奇數(shù)。

在頂部，我提到了其他一些便利的文章，這些文章有助于更熟悉 reducer 的作用。以下是我的最愛：

MDN文檔對(duì)此非常有用。說真的，這是他們最好的帖子之一，他們也更詳細(xì)地描述了如果你不提供一個(gè)初始值會(huì)發(fā)生什么，我們?cè)谶@篇文章中沒有提到。

Coding Train

A Drip of JavaScript

謝謝各位小伙伴愿意花費(fèi)寶貴的時(shí)間閱讀本文，如果本文給了您一點(diǎn)幫助或者是啟發(fā)，請(qǐng)不要吝嗇你的贊和Star，您的肯定是我前進(jìn)的最大動(dòng)力。 https://github.com/YvetteLau/...