The reduce()
method applies a function against an accumulator and each value of the array (from left-to-right) to reduce it to a single value.
This method can be used to condense all values of an array into a single value:
[1, 2, 3, 4].reduce(function(a, b) {
return a + b;
});
// → 10
Optional second parameter can be passed to reduce()
. Its value will be used as the first argument (specified as a
) for the first call to the callback (specified as function(a, b)
).
[2].reduce(function(a, b) {
console.log(a, b); // prints: 1 2
return a + b;
}, 1);
// → 3
The example below shows how to flatten an array of objects into a single object.
var array = [{
key: 'one',
value: 1
}, {
key: 'two',
value: 2
}, {
key: 'three',
value: 3
}];
array.reduce(function(obj, current) {
obj[current.key] = current.value;
return obj;
}, {});
array.reduce((obj, current) => Object.assign(obj, {
[current.key]: current.value
}), {});
array.reduce((obj, current) => ({...obj, [current.key]: current.value}), {});
Note that the Rest/Spread Properties is not in the list of finished proposals of ES2016. It isn’t supported by ES2016. But we can use babel plugin babel-plugin-transform-object-rest-spread to support it.
All of the above examples for Flatten Array result in:
{
one: 1,
two: 2,
three: 3
}
As another example of using the initial value parameter, consider the task of calling a function on an array of items, returning the results in a new array. Since arrays are ordinary values and list concatenation is an ordinary function, we can use reduce
to accumulate a list, as the following example demonstrates:
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]
Note that this is for illustration (of the initial value parameter) only, use the native map
for working with list transformations (see Mapping values for the details).