Open FrankKai opened 4 years ago
reduce()
方法执行一个reducer函数,reducer函数是自定义的。const array1 = [1, 2, 3, 4];
const reducer = (acc, cur) => acc + cur;
// 1+2+3+4 => 10
console.log(array1.reduce(reducer));
// 5+1+2+3+4 => 15
console.log(array1.reduce(reducer, 5));
arr.reduce(callback( accumulator, currentValue[, index[, array]] ), [, initialValue])
由reduce产生的单个值。
如果指定initialValue的话,index从 0 开始;否则从 1 开始。 如果没有initialValue指定的话,数组中的第一项会没当做acc的初始值,并且作为currentValue跳过。 两句话是同样的意思。
看了下面的demo就明白了:
/* 没有指定initialValue。
* 0未出现,说明没有指定initialValue时,跳过第一次遍历。
* acc初始值为'foo',说明跳过第一次遍历后,acc将首次的cur作为自己的值。
*/
var arr = ['foo','bar'];
arr.reduce((acc,cur,idx,iarr)=>{
console.log(acc, cur, idx);
return acc+cur;
})
VM209:3 foo bar 1
"foobar"
/* 有指定initialValue。
* 0出现,首次acc值为baz。说明有指定initialValue时,第一次遍历将initialValue作为acc的初始值。
* 1时acc值为'bazfoo',说明经过第一次遍历后,acc将上一次计算的acc+cur作为新的acc传递进来。
*/
var arr = ['foo','bar'];
arr.reduce((acc,cur,idx,iarr)=>{
console.log(acc, cur, idx);
return acc+cur;
},'baz')
VM211:3 baz foo 0
VM211:3 bazfoo bar 1
"bazfoobar"
[].reduce(()=>{},)
TypeError: Reduce of empty array with no initial value
reduce()方法对数组中的每个元素执行的callback,会接收4个参数:
array(arr)
TypeError: Reduce of empty array with no initial value
会抛出。不初始设置initialValue vs 初始设置initialValue
let maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x );
let maxCallback2 = ( max, cur ) => Math.max( max, cur );
// 不设置initialValue执行reduce
[ { x: 2 }, { x: 22 }, { x: 42 } ].reduce( maxCallback ); // NaN
[ { x: 2 }, { x: 22 } ].reduce( maxCallback ); // 22
[ { x: 2 } ].reduce( maxCallback ); // { x: 2 }
[ ].reduce( maxCallback ); // TypeError
// map & reduce指定initialValue为-Infinity是最安全的
[ { x: 22 }, { x: 42 } ].map( el => el.x )
.reduce( maxCallback2, -Infinity );
上面这个例子有办法不指定initialValue就返回出最大值吗?怎么改? 能。reduce的callback return出一个对象即可。
let maxCallback = ( acc, cur ) => ({x: Math.max( acc.x, cur.x )});
// 不设置initialValue执行reduce
[ { x: 2 }, { x: 22 }, { x: 42 } ].reduce( maxCallback ); // {x:42}
[ { x: 2 }, { x: 22 } ].reduce( maxCallback ); // {x:22}
[ { x: 2 } ].reduce( maxCallback ); // { x: 2 }
[ ].reduce( maxCallback ); // TypeError
假设reduce()方法按照下面的方式调用:
[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
return accumulator + currentValue
})
callback会回调几次?4次。 reduce的返回值是什么?是最后一次callback的return value。 callback详情如下:
可以使用箭头函数:
[0, 1, 2, 3, 4].reduce( (accumulator, currentValue, currentIndex, array) => accumulator + currentValue )
[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {
return accumulator + currentValue
}, 10)
如果给定一个10作为initialValue,reduce的callback调用详情如下: 最终的返回值为20。
let total = [ 0, 1, 2, 3 ].reduce(
( accumulator, currentValue ) => accumulator + currentValue,
0
)
// total为6
如果想让数组中的每个元素都进入迭代,必须设置一个initialValue。
let initialValue = 0
let sum = [{x: 1}, {x: 2}, {x: 3}].reduce(
(accumulator, currentValue) => accumulator + currentValue.x
, initialValue
)
console.log(sum) // logs 6
如果想返回对象的形式呢?
let sum = [{x: 1}, {x: 2}, {x: 3}].reduce(
(accumulator, currentValue) => ({x: accumulator.x + currentValue.x})
)
console.log(sum) // logs {x: 6}
let flattened = [[0, 1], [2, 3], [4, 5]].reduce(
( accumulator, currentValue ) => accumulator.concat(currentValue),
[]
) // [0, 1, 2, 3, 4, 5, 6]
let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']
let countedNames = names.reduce(function (allNames, name) {
if (name in allNames) {
allNames[name]++
}
else {
allNames[name] = 1
}
return allNames
}, {})
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }
let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']
let countedNames = names.reduce(function (map, name) {
if (map.has(name)) {
map.set(name , map.get(name)+1);
}
else {
map.set(name, 1);
}
return map
}, new Map())
// countedNames is:
// {"Alice" => 2, "Bob" => 1, "Tiff" => 1, "Bruce" => 1}
之前的热力图表格数据其实可以使用reduce计算,可以简化大量的数组forEach,map和filter等等数组遍历。
let people = [
{ name: 'Alice', age: 21 },
{ name: 'Max', age: 20 },
{ name: 'Jane', age: 20 }
];
function groupBy(objectArray, property) {
return objectArray.reduce((acc, obj)=>{
let key = obj[property]
if (!acc[key]) {
acc[key] = []
}
acc[key].push(obj)
return acc
}, {})
}
let groupedPeople = groupBy(people, 'age')
// groupedPeople is:
// {
// 20: [
// { name: 'Max', age: 20 },
// { name: 'Jane', age: 20 }
// ],
// 21: [{ name: 'Alice', age: 21 }]
// }
抽取数组中的对象中的数组。
// friends - an array of objects
// where object field "books" is a list of favorite books
let friends = [{
name: 'Anna',
books: ['Bible', 'Harry Potter'],
age: 21
}, {
name: 'Bob',
books: ['War and peace', 'Romeo and Juliet'],
age: 26
}, {
name: 'Alice',
books: ['The Lord of the Rings', 'The Shining'],
age: 18
}]
// allbooks - list which will contain all friends' books +
// additional list contained in initialValue
let allbooks = friends.reduce(function(accumulator, currentValue) {
return [...accumulator, ...currentValue.books]
}, ['Alphabet'])
// allbooks = [
// 'Alphabet', 'Bible', 'Harry Potter', 'War and peace',
// 'Romeo and Juliet', 'The Lord of the Rings',
// 'The Shining'
// ]
reduce可以实现类似Set&&Array.form()的方式去重。
let orderedArray = Array.from(new Set(myArray))
let myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd']
let myOrderedArray = myArray.reduce(function (accumulator, currentValue) {
if (accumulator.indexOf(currentValue) === -1) {
accumulator.push(currentValue)
}
return accumulator
}, [])
console.log(myOrderedArray)
使用map和filter会遍历数组两次,可以用reduce一次遍历即可。
const numbers = [-5, 6, 2, 0,];
const doubledPositiveNumbers = numbers.map((num)=>{if(num>0) return num*2}).filter((num)=>num)
console.log(doubledPositiveNumbers); // [12, 4]
const numbers = [-5, 6, 2, 0,];
const doubledPositiveNumbers = numbers.reduce((accumulator, currentValue) => {
if (currentValue > 0) {
const doubled = currentValue * 2;
accumulator.push(doubled);
}
return accumulator;
}, []);
console.log(doubledPositiveNumbers); // [12, 4]
链式运行Promise,可用于顺序异步队列。
/**
* Runs promises from array of functions that can return promises
* in chained manner
*
* @param {array} arr - promise arr
* @return {Object} promise object
*/
function runPromiseInSequence(arr, input) {
return arr.reduce(
(promiseChain, currentFunction) => promiseChain.then(currentFunction),
Promise.resolve(input)
)
}
// promise function 1
function p1(a) {
return new Promise((resolve, reject) => {
resolve(a * 5)
})
}
// promise function 2
function p2(a) {
return new Promise((resolve, reject) => {
resolve(a * 2)
})
}
// function 3 - will be wrapped in a resolved promise by .then()
function f3(a) {
return a * 3
}
// promise function 4
function p4(a) {
return new Promise((resolve, reject) => {
resolve(a * 4)
})
}
const promiseArr = [p1, p2, f3, p4]
runPromiseInSequence(promiseArr, 10)
.then(console.log) // 1200
pipeline式运行函数,可用于流水线性任务。
// Building-blocks to use for composition
const double = x => x + x
const triple = x => 3 * x
const quadruple = x => 4 * x
// Function composition enabling pipe functionality
const pipe = (...functions) => input => functions.reduce(
(acc, fn) => fn(acc),
input
)
// Composed functions for multiplication of specific values
const multiply6 = pipe(double, triple)
const multiply9 = pipe(triple, triple)
const multiply16 = pipe(quadruple, quadruple)
const multiply24 = pipe(double, triple, quadruple)
// Usage
multiply6(6) // 36
multiply9(9) // 81
multiply16(16) // 256
multiply24(10) // 240
这个写法很谜。
if (!Array.prototype.mapUsingReduce) {
Array.prototype.mapUsingReduce = function(callback, thisArg) {
return this.reduce(function(mappedArray, currentValue, index, array) {
mappedArray[index] = callback.call(thisArg, currentValue, index, array)
return mappedArray
}, [])
}
}
[1, 2, , 3].mapUsingReduce(
(currentValue, index, array) => currentValue + index + array.length
) // [5, 7, , 10]
题目:https://leetcode-cn.com/problems/single-number/ 题解:https://github.com/FrankKai/leetcode-js/blob/master/136.Single_Number.js
var singleNumber = function (nums) {
/**解法5:reduce
* 性能:80ms 37.1MB
*/
let countedNums = nums.reduce((acc, cur) => {
if (!(cur in acc)) {
acc[cur] = 1;
} else {
delete acc[cur];
}
return acc;
}, {});
return Object.keys(countedNums)[0];
}
题目:https://leetcode-cn.com/problems/happy-number/ 题解:https://github.com/FrankKai/leetcode-js/blob/master/202.Happy_Number.js
// 解法二:递归+Set
var isHappy = function(n) {
if (n == 1) return true;
var nextNums = arguments[1] || [];
var nextNumsSet = new Set(nextNums);
// 通过Set对数组去重,比较size和length的大小
if (nextNumsSet.size !== nextNums.length) {
return false;
}
function quadratic(num) {
return Math.pow(parseInt(num), 2);
}
var nextNum = -999;
if (`${n}`.length === 1) {
// 7 true, 2 false
nextNum = quadratic(n);
} else {
// 19 true, 78 false
nextNum = `${n}`
.split("")
.map(quadratic)
.reduce((acc, cur) => acc + cur);
}
while (nextNum !== 1) {
nextNums.push(nextNum);
// 递归
nextNum = isHappy(nextNum, nextNums);
return nextNum;
}
return nextNum === 1;
};
题目:https://leetcode-cn.com/problems/add-digits/ 题解:https://github.com/FrankKai/leetcode-js/blob/master/258.Add_Digits.js
var addDigits = function (num) {
/**
* 解法1:递归 reduce
* 性能:92ms 36.4MB
*/
let nums = `${num}`.split("").map((item) => BigInt(item));
let reduce = nums.reduce((acc, cur) => acc + cur);
if (`${reduce}`.length === 1) {
return reduce;
} else {
return addDigits(reduce);
}
};
题目:https://leetcode-cn.com/problems/keyboard-row/ 题解:https://github.com/FrankKai/leetcode-js/blob/master/500.Keyboard_Row.js
var findWords = function (words) {
/**
* 解法2: Array Set
* 性能:60ms 33.9MB
* 思路:Set优化indexOf
*/
// 构建字母表
const lines = [
['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
['z', 'x', 'c', 'v', 'b', 'n', 'm']
]
lines.forEach((line, i, arr) => {
let reduceArr = line.reduce((acc, cur) => {
acc.push(cur);
acc.push(cur.toUpperCase());
return acc
}, [])
arr[i] = new Set(reduceArr)
})
// 拆分单词
const wordsMap = words.map((word) => word.split(""))
const validWords = [];
wordsMap.forEach((word) => {
lines.forEach((line) => {
let isValid = word.every((char) => line.has(char));
if (isValid) validWords.push(word.join(""));
})
})
return validWords;
};
reduce()是一个js数组原型链上的高级函数,没个几年经验估计对这个方法的用法会很模糊。 我最常用的就是用recude()求和,但其实它还有很多值得挖掘的好用之处。 所以开这个issue来系统性学习下reduce()吧。