关于JavaScript中的reduce（）⽅法⼀、什么是 reduce() ？
reduce() ⽅法对数组中的每个元素执⾏⼀个升序执⾏的 reducer 函数，并将结果汇总为单个返回值
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4
console.duce(reducer));
// 输出: 10
// 5 + 1 + 2 + 3 + 4
console.duce(reducer, 5));
// 输出: 15
⼆、数组中 reduce ⽅法的参数
1、第⼀个参数：reducer 函数
其中，reducer 函数⼜有四个参数：
1. Accumulator (acc) (累计器)
2. Current Value (cur) (当前值)
3. Current Index (idx) (当前索引)
4. Source Array (src) (源数组)
2、第⼆个参数（可选）：initialValue
代表传递给函数的初始值
// 不传第⼆个参数的情况
var numbers = [1, 2, 3, 4]
function myFunction(item) {
let result = duce(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 = duce(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) {
at(b);
},
[]
);
// flattened is [0, 1, 2, 3, 4, 5]
4、计算数组中每个元素出现的次数
var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
var countedNames = duce(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 }js 二维数组
5、数组去重
var myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd'];
var myOrderedArray = duce(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]

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。