6 個關於 Reduce-- 應用場景的用例

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

翻譯 | 楊小二

reduce 方法在數組的每個元素上執行用戶提供的回調函數，即 “reducer”。它傳入對前一個元素進行計算的返回值。結果是單個值。它是在數組的所有元素上運行 reducer 的結果。

它是如何工作的？

reducer 函數逐個遍歷數組元素。在每一步中，reducer 函數將當前數組值添加到上一步的結果中，直到沒有更多元素要添加。

參數是什麼？

參數是回調函數和可選的初始值。

回調函數

preVal：它是前一個回調函數產生的前一個值。

currVal：它是數組的當前元素，reducer 函數會傳播它。

currentIndex：當前索引。但是，它是可選的。

arrayToTraverse：要遍歷的數組。它也是可選的。

初始值

初始值參數是可選的。它是第一次調用回調時，將前一個值初始化的值。如果未指定初始值，則將前一個值初始化爲初始值，將當前值初始化爲數組中的第二個值。

在某些情況下，Reduce 方法是一種有價值的方法。在某些情況下，它可能會節省你的時間或減少你程序行數。在本文中，我將向你展示 JavaScript 中 reduce() 方法的 6 個用例。

1、對數組元素求和

假設你有以下數組：

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

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

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

你需要傳遞給 reduce 的第二個參數，是你想要啓動的初始值。例如，如果你希望對數組的元素求和，可以將 0 作爲初始值。

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

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

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

現在，preVal 不是 0。它等於前一次執行中返回的值。所以，preVal = 5.99 + 0。現在，currVal 是第二次迭代的第二個元素。

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

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

2、展平數組

使用 reduce()，你可以將多維數組轉換爲一維數組。

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

3、創建管道

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

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

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

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

4、 從數組中獲取對象

例如，你有一個字符串數組，它們是彩色蘋果。使用 reduce() 你可以構造一個蘋果對象，如下所示。

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、找出出現奇數次的整數

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

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

6、求給定數組的最大子數組和

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

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: 10
console.log(maxSequence([1,2,3,4,-8])); // Result: 10
console.log(maxSequence([1,-2,3,-2,5,-1,3,-9,1,6])); // Result: 8

加餐：reduceRight()

你也可以使用 reduceRight()。它的工作方式與 reduce() 相同。但是，它的工作方向相反。當你學習時，reduce() 從第一個元素開始並朝最後一個元素移動。相反，reduceRight() 從最後一個元素開始，然後轉到第一個元素。

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

結論

瞭解 JavaScript 中一些內置函數的用例可以幫助你提高編碼技能。學習用例可以爲你提供一些見解，你可以優雅地實現一些功能。

JavaScript 中的 reduce() 也是一個有用的內置函數。如果你知道如何使用它，它是強大的。它可以幫助你編寫較少數量的代碼行，如彙總價格的示例。

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

感謝你的時間，希望這篇文章內容對你有所幫助，如果你覺它有用，也請你分享給你身邊做開發的朋友。

謝謝你的閱讀，祝編程愉快！

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/j9IbIf3k3mdlNKKDmuqaiw

猜你喜歡