reduce 方法

Version >= 5.1

reduce() 方法對累加器和陣列的每個值(從左到右)應用函式以將其減少為單個值。

陣列總和

此方法可用於將陣列的所有值壓縮為單個值:

[1, 2, 3, 4].reduce(function(a, b) {
  return a + b;
});
// → 10

可選的第二個引數可以傳遞給 reduce()。它的值將用作第一次呼叫回撥的第一個引數(指定為 a)(指定為 function(a, b))。

[2].reduce(function(a, b) {
  console.log(a, b); // prints: 1 2
  return a + b;
}, 1);
// → 3

Version >= 5.1

展平物件陣列

下面的示例顯示瞭如何將物件陣列展平為單個物件。

var array = [{
    key: 'one',
    value: 1
}, {
    key: 'two',
    value: 2
}, {
    key: 'three',
    value: 3
}];

Version <= 5.1

array.reduce(function(obj, current) {
  obj[current.key] = current.value;
  return obj;
}, {});

Version >= 6

array.reduce((obj, current) => Object.assign(obj, {
  [current.key]: current.value
}), {});

Version >= 7

array.reduce((obj, current) => ({...obj, [current.key]: current.value}), {});

請注意, Rest / Spread 屬性不在 ES2016完成提案列表中。ES2016 不支援它。但我們可以使用 babel 外掛 babel-plugin-transform-object-rest-spread來支援它。

Flatten Array 的所有上述示例都會導致:

{
  one: 1,
  two: 2,
  three: 3
}

Version >= 5.1

使用 Reduce 對映

作為使用初始值引數的另一個示例,請考慮在項陣列上呼叫函式的任務,將結果返回到新陣列中。由於陣列是普通值,列表連線是普通函式,我們可以使用 reduce 來累積列表,如下例所示:

function map(list, fn) {
  return list.reduce(function(newList, item) {
    return newList.concat(fn(item));
  }, []);
}

// Usage:
map([1, 2, 3], function(n) { return n * n; });
// → [1, 4, 9]

請注意,這僅用於說明(初始值引數),使用本機 map 來處理列表轉換(請參閱對映值以獲取詳細資訊)。

Version >= 5.1

查詢最小值或最大值

我們也可以使用累加器來跟蹤陣列元素。這是一個利用它來查詢最小值的示例:

var arr = [4, 2, 1, -10, 9]

arr.reduce(function(a, b) {
  return a < b ? a : b
}, Infinity);
// → -10

Version >= 6

尋找獨特的值

下面是一個使用 reduce 將唯一數字返回給陣列的示例。空陣列作為第二個引數傳遞,並由 prev 引用。

var arr = [1, 2, 1, 5, 9, 5];

arr.reduce((prev, number) => {
  if(prev.indexOf(number) === -1) {
    prev.push(number);
  }
  return prev;
}, []);
// → [1, 2, 5, 9]