技術文章 » JS reduce()和reduceRight()方法：對陣列元素進行疊代（累加）

JS reduce()和reduceRight()方法：對陣列元素進行疊代（累加）

2020-07-16 10:05:02
使用 JavaScript 中的 reduce() 和 reduceRight() 方法可以對陣列元素的值進行疊代（或者說累加）。

reduce() 方法

JavaScript 中的 reduce() 方法可對陣列中的所有元素呼叫指定的回撥函數。該回撥函數的返回值為累積結果，並且此返回值在下一次呼叫該回撥函數時作為引數提供。具體用法如下：

array.reduce(callbackfn[, initialVaule]);

引數說明：
  • array：必需引數，一個陣列物件。
  • callbackfn：必需引數，一個接受最多四個引數的函數。對於陣列中的每個元素，recude() 方法都會呼叫 callbackfn 函數一次。
  • initialVaule：可選引數，如果指定 initialVaule，則它將用作初始值來啟動累積。第一次呼叫 callbackfn 函數會將此值作為引數而非陣列值提供。

recude() 方法的返回值是通過最後一次呼叫回撥函數獲得的累積結果。

如果提供了引數 initialVaule，則 reduce() 方法會對陣列中的每個元素呼叫一次 callbackfn 函數（按升序索引順序）；如果為提供 initialVaule，則 reduce() 方法會對從第 2 個元素開始的每個元素呼叫 callbackfn 函數。

回撥函數的返回值在下一次呼叫回撥函數時作為 previousValue 引數提供。最後一次呼叫回撥函數獲得的返回值為 recude() 方法的返回值。該方法不為陣列中缺少的元素呼叫該回撥函數。

回撥函數的語法如下：

function callbackfn(previousValue, currentVaule, currentIndex, array);

回撥函數引數說明：
  • previousValue：通過上一次呼叫回撥函數獲得的值。如果向 reduce() 方法提供 initialValue，則在首次呼叫函數時，previousValue 為 initialValue。
  • currentVaule：當前元素陣列的值。
  • currentIndex：當前陣列元素的數位索引。
  • array：包含該元素的陣列物件。

在第一次呼叫回撥函數時，作為引數提供的值取決於 reduce() 方法是否具有 initialValue 引數。如果向 recude() 方法提供 initialValue，則 previousValue 引數為 initialValue，currentValue 引數是陣列中第 1 個元素的值。

如果未提供 initialValue，則 previousValue 引數是陣列中的第 1 個元素的值，currentValue 引數是陣列中的第 2 個元素的值。

範例1

下面範例演示將陣列值連線成字串，各個值用::分隔開。由於未向 recude() 方法提供初始值，第一次呼叫回撥函數時會將“abc”作為 previousValue 引數，並將“def”作為 currentValue引數。 
function f(pre, curr) {
    return pre + ": :" + curr;
}
var a = ["abc", "def", 123, 456];
var r = a.recude(f);
console.log(r);  //abc::def::123::456

範例2

下面範例向陣列中新增值。currentIndex 和 array 引數用於回撥函數。 
function f(pre, curr, i, array) {
    var e = (array.length - 1) - i;
    var d = curr * Math.pow(10, e);
    return pre + d;
}
var a = [4,1,2,5];
var r = a.recude(f, 0);
console.log(r);  //4125

範例3

下面範例獲取一個陣列，該陣列僅包含另一個陣列中的介於 1 和 10 之間的值，提供給 recude() 方法的初始值是一個空陣列。 
function f(pre, curr) {
    var next;
    if (curr >= 1 && curr <= 10) {
        next = pre.concat(curr);
    } else {
        next = pre;
    }
    return next;
}
var a1 = [20,1,-5,6,50,3];
var a = new Array();
var r = a1.recude(f, a);
console.log(r);  //1,6,3

recudeRight() 方法

JavaScript 中的 recudeRight() 方法可從右向左對陣列中的所有元素呼叫指定的回撥函數。該回撥函數的返回值為累積結果，並且此返回值在下一次呼叫該回撥函數時作為引數提供。具體用法如下：

array1.reduceRight(callbackfn[, initialValue]);

該方法的語法和用法與 reduce() 方法大概相同，唯一不同的是，它是從陣列右側開始呼叫回撥函數。如果提供了 initialValue，則 reduceRight() 方法會按降序索引順序對陣列中的每個元素呼叫一次 callbackfn 函數。如果未提供 initialValue，則 reduceRight() 方法會按降序索引順序對每個元素（從倒數第 2 個元素開始）呼叫 callbackfn 函數。

範例4

下面範例使用 reduceRight() 方法，以::為分隔符，從右到左把陣列元素的值連線在一起。 
function f (pre, curr) {
    return pre + "::" + curr;
}
var a = ["abc", "def", 123, 456];
var r = a.recudeRight(f);
console.log(r);  //456::123::def::abc