关于 JavaScript 中的 reduce() 方法
程序员文章站
2022-07-06 12:10:34
一、什么是 reduce() ? reduce() 方法对数组中的每个元素执行一个升序执行的 reducer 函数,并将结果汇总为单个返回值 const array1 = [1, 2, 3, 4]; const reducer = (accumulator, currentValue) => acc ......
一、什么是 reduce() ?
reduce() 方法对数组中的每个元素执行一个升序执行的 reducer 函数,并将结果汇总为单个返回值
const array1 = [1, 2, 3, 4]; const reducer = (accumulator, currentvalue) => accumulator + currentvalue; // 1 + 2 + 3 + 4 console.log(array1.reduce(reducer)); // 输出: 10 // 5 + 1 + 2 + 3 + 4 console.log(array1.reduce(reducer, 5)); // 输出: 15
二、数组中 reduce 方法的参数
1、第一个参数:reducer 函数
其中,reducer 函数又有四个参数:
- accumulator (acc) (累计器)
- current value (cur) (当前值)
- current index (idx) (当前索引)
- source array (src) (源数组)
2、第二个参数(可选):initialvalue
代表传递给函数的初始值
// 不传第二个参数的情况 var numbers = [1, 2, 3, 4] function myfunction(item) { let result = numbers.reduce(function (total, currentvalue, currentindex, arr) { console.log(total, currentvalue, currentindex, arr) return total + currentvalue }) return result } myfunction(numbers)
输出:
可以看到如果不传第二个参数 initialvalue,则函数的第一次执行会将数组中的第一个元素作为 total 参数返回。一共执行3次
下面是传递第二个参数的情况:
// 不传第二个参数的情况 var numbers = [1, 2, 3, 4] function myfunction(item) { let result = numbers.reduce(function (total, currentvalue, currentindex, arr) { console.log(total, currentvalue, currentindex, arr) return total + currentvalue }, 10) return result } myfunction(numbers)
输出:
如果传了第二个参数 initialvalue,那么第一次执行的时候 total 的值就是传递的参数值,然后再依次遍历数组中的元素。执行4次
总结:如果不传第二参数 initialvalue,那么相当于函数从数组第二个值开始,并且将第一个值最为第一次执行的返回值,如果传了第二个参数 initialvalue,那么函数从数组的第一个值开始,并且将参数 initialvalue 作为函数第一次执行的返回值
三、应用场景
1、数组里所有值的和
var sum = [0, 1, 2, 3].reduce(function (accumulator, currentvalue) { return accumulator + currentvalue; }, 0); // 和为 6
2、累加对象数组里的值
var initialvalue = 0; var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentvalue) { return accumulator + currentvalue.x; },initialvalue) console.log(sum) // logs 6
3、将二维数组转化为一维
var flattened = [[0, 1], [2, 3], [4, 5]].reduce( function(a, b) { return a.concat(b); }, [] ); // flattened is [0, 1, 2, 3, 4, 5]
4、计算数组中每个元素出现的次数
var names = ['alice', 'bob', 'tiff', 'bruce', 'alice']; var 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 }
5、数组去重
var myarray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd']; var myorderedarray = myarray.reduce(function (accumulator, currentvalue) { if (accumulator.indexof(currentvalue) === -1) { accumulator.push(currentvalue); } return accumulator }, []) console.log(myorderedarray);
let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4]; let result = arr.sort().reduce((init, current) => { if(init.length === 0 || init[init.length-1] !== current) { init.push(current); } return init; }, []); console.log(result); //[1,2,3,4,5]
上一篇: 移动端常见问题(单行和多行文字溢出省略)