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]