英文 | https://betterprogramming.pub/6-use-cases-for-reduce-in-javascript-49683842ebed

翻譯 | 楊小二

const prices = [5.99, 2.99, 3.99, 11.59]

你可能更喜歡使用 for 循環(huán)或 for-each 循環(huán)來對(duì)上述數(shù)組的元素求和，但是，如果使用 reduce()，則可以編寫更少的代碼。

正如你從介紹中知道的那樣，reduce() 接受一個(gè)帶有4個(gè)參數(shù)的函數(shù)，preVal、currVal、currentIndex、prices，在這種情況下，

你需要傳遞給 reduce 的第二個(gè)參數(shù)，是你想要啟動(dòng)的初始值。例如，如果你希望對(duì)數(shù)組的元素求和，可以將 0 作為初始值。

const sum = prices.reduce((preVal, currVal, currentIndex, prices) => {  return preVal + currVal;}, 0);

reduce() 對(duì)數(shù)組中的每個(gè)元素執(zhí)行這個(gè)函數(shù)。第一次執(zhí)行的 preVal 是你設(shè)置為第二個(gè)參數(shù)的初始值，在本例中為“0”。否則，它將是未定義的。currVal 是數(shù)組的第一個(gè)元素。對(duì)于第二次執(zhí)行，對(duì)數(shù)組中的第二個(gè)元素執(zhí)行以下函數(shù)：

(preVal, currVal, currentIndex, prices) => {  return preVal + currVal;}

現(xiàn)在，preVal 不是 0。它等于前一次執(zhí)行中返回的值。所以，preVal = 5.99 + 0。現(xiàn)在，currVal 是第二次迭代的第二個(gè)元素。

在這種情況下，你不需要 currentIndex 和prices。因此，你可以將該函數(shù)編寫為單行函數(shù)。

const sum = prices.reduce((preVal, currVal) => preVal + currVal, 0);

2、展平數(shù)組

使用reduce()，你可以將多維數(shù)組轉(zhuǎn)換為一維數(shù)組。

var rows = [[2, 3, 5], [1, 2, 4], [8, 5, 5]]var matrixElements = rows.reduce( function (prev, current) {  return prev.concat(current);});

3、創(chuàng)建管道

此外，你可以減少函數(shù)以及數(shù)字和字符串。假設(shè)你有一系列數(shù)學(xué)函數(shù)。例如，你有以下功能：

function increment(input) { return input + 1;}function decrement(input) { return input - 1; }function double(input) { return input * 2; }function halve(input) { return input / 2; }

此外，你希望對(duì)訂單使用 increment、double 和 decrement。因此，你可以創(chuàng)建管道。然后，你可以將它與 reduce() 一起使用。

let pipeline = [increment, double, decrement];
const result = pipeline.reduce(function(total, func) {  return func(total);}, 8);
// result: 17

4、 從數(shù)組中獲取對(duì)象

例如，你有一個(gè)字符串?dāng)?shù)組，它們是彩色蘋果。使用 reduce() 你可以構(gòu)造一個(gè)蘋果對(duì)象，如下所示。

const apples = ['green', 'red', 'red', 'yellow', 'red', 'yellow', 'green', 'green'];var appleMap = apples.reduce((prev, apple) => {  if (prev[apple] >= 1) prev[apple]++;  else prev[apple] = 1;  return prev;}, {});
console.log(appleMap);// result: {green: 3, red: 3, yellow: 2}

5、找出出現(xiàn)奇數(shù)次的整數(shù)

你可以使用 reduce() 來查找在給定數(shù)組中出現(xiàn)奇數(shù)次的整數(shù)。下面的函數(shù)有一個(gè)不好的地方。如果你給出多個(gè)出現(xiàn)奇數(shù)次的整數(shù)，它將不起作用。

const findOdd = (a) => a.reduce((a, b) => a ^ b);console.log(findOdd([1, 2, 2, 1])); // Result: 0console.log(findOdd([1, 2, 2, 1, 2, 3, 3])); // Result: 2console.log(findOdd([1, 2, 3, 4])); // Result: 4 -> Not working

6、求給定數(shù)組的最大子數(shù)組和

使用此函數(shù)，你可以找到給定數(shù)組的最大子數(shù)組和。這是一個(gè)需要解決的大問題。解決起來并不容易。尤其是想用單線方案來實(shí)現(xiàn)這個(gè)功能，就更具挑戰(zhàn)性了。但是，如果使用reduce() 會(huì)更容易。

const maxSequence = (a,sum=0) => a.reduce((max,v) => Math.max(sum = Math.max(sum + v, 0), max), 0);console.log(maxSequence([1,2,3,4])); // Result: 10console.log(maxSequence([1,2,3,4,-8])); // Result: 10console.log(maxSequence([1,-2,3,-2,5,-1,3,-9,1,6])); // Result: 8

加餐：reduceRight()

你也可以使用reduceRight()。它的工作方式與reduce() 相同。但是，它的工作方向相反。當(dāng)你學(xué)習(xí)時(shí)，reduce() 從第一個(gè)元素開始并朝最后一個(gè)元素移動(dòng)。相反，reduceRight() 從最后一個(gè)元素開始，然后轉(zhuǎn)到第一個(gè)元素。

const prices = [5.99, 2.99, 3.99, 11.59];
let sum = prices.reduceRight(function (preVal, currVal) {    console.log('prev: ', preVal, 'curr: ', currVal);    return prev + curr;});console.log(sum);
// prev:  11.59 curr:  3.99// prev:  15.58 curr:  2.99// prev:  18.57 curr:  5.99// 24.560000000000002

結(jié)論

了解 JavaScript 中一些內(nèi)置函數(shù)的用例可以幫助你提高編碼技能。學(xué)習(xí)用例可以為你提供一些見解，你可以優(yōu)雅地實(shí)現(xiàn)一些功能。

JavaScript 中的 reduce() 也是一個(gè)有用的內(nèi)置函數(shù)。如果你知道如何使用它，它是強(qiáng)大的。它可以幫助你編寫較少數(shù)量的代碼行，如匯總價(jià)格的示例。

綜上所述，本文reduce()的用例如下：

• 對(duì)數(shù)組元素求和

• 展平數(shù)組

• 創(chuàng)建管道

• 從數(shù)組中獲取對(duì)象

• 找出出現(xiàn)奇數(shù)次的整數(shù)

• 查找給定數(shù)組的最大子數(shù)組和。

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)