<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组之reduce方法</title>
</head>
<body>
<script>
// reduce() 方法不会改变原始数组 在没有初始值的空数组上调用 reduce 将报错
// 语法：Array.reduce(callback,[initialValue])
// Array.reduce()方法是对数组的遍历,返回一个单个返回值
// 使用方法:
// Array.reduce((acc, cur, idx, src) => {
// }, initialValue)
// callback回调函数接收4个参数: （acc 上一次调用回调返回的值，或者是提供的初始值（initialValue））
// Accumulator (acc) (累计器) 如果传入了initialValue,Accumulator的初始值就是initialValue,没传入就是数组的第一个值
// Current Value (cur) (当前值)
// Current Index (idx) (当前索引)如果传入了initialValue,索引从0开始,没传入从1开始
// Source Array (src) (源数组)
// initialValue 指定的初始值,初始值可以是数字,数组,对象
// 将一个数组类型转换成一个对象；
// 展开一个超大的 Array；
// 完成对数组的两次计算，但只遍历一次；
// 在一次调用动作里，同时实现 mapping和 filter 的功能；
// 运行异步方法队列
const householdArr = [{
id: 1,
name: '电视',
price: '500'
},
{
id: 2,
name: '冰箱',
price: '600'
}
];
function ArrayToObject(arr, obj) {
return {
...arr,
[obj.name]: obj
};
}
const householdObj = householdArr.reduce(ArrayToObject, {});
console.log(householdObj, 'householdObj');
// {
// 电视: {id: 1, name: '电视', price: '500'}
// 冰箱: {id: 2, name: '冰箱', price: '600'}
// }
// reduce 展开一个超大的 Array
const reduceArr = [
'react,vue,nodejs',
'elementui,vant,iview',
'前端,后端,测试,产品,运维,UI'
];
function reduceArray(arr, item) {
return arr.concat(item.split(/,/g));
}
const reduceAfterArr = reduceArr.reduce(reduceArray, []);
console.log(reduceAfterArr);
// ['react', 'vue', 'nodejs', 'elementui', 'vant', 'iview', '前端', '后端', '测试', '产品', '运维', 'UI']
// reduce 找出数组中 最大数 最小数
const minAndMaxList = [1, 3, 5, 8, 9, 10, 22];
function findMinMax(acc, itme) {
return {
minNum: Math.min(acc.minNum, itme),
maxNum: Math.max(acc.maxNum, itme),
};
}
const resultMinMax = {
minNum: Number.MAX_VALUE,
maxNum: Number.MIN_VALUE,
};
const minMax = minAndMaxList.reduce(findMinMax, resultMinMax);
console.log(minMax, '最小值和最大值'); // {minNum: 1, maxNum: 22} '最小值和最大值'
// reduce 求和
const initialValue = 0;
const arr = [0, 1, 2, 3, 4, 5, 6];
const sum = arr.reduce(function(acc, cur) {
console.log(acc, cur);
return acc + cur
}, initialValue)
console.log(sum) // 21
// reduce 数组扁平化 flat
const flatArr = [1, 2, [3, 4, [5, 6]]];
const reslut = (arr) => {
return arr.reduce((prev, next) => {
return prev.concat(Array.isArray(next) ? reslut(next) : next);
}, [])
}
console.log(reslut(flatArr)) // [ 1, 2, 3, 4, 5, 6 ]
// reduce 数组去重
let repeatArr = [1, 1, 2, 1, 3, 4, 5, 3];
let result = repeatArr.reduce((prev, next) => {
if (!prev.includes(next)) {
prev.push(next)
}
return prev
}, [])
console.log(result) // [ 1, 2, 3, 4, 5 ]
// reduce 重复次数统计
const data = [{
name: 'bob',
id: '1'
},
{
name: 'bob',
id: '2'
},
{
name: 'wowo',
id: '3'
},
{
name: 'lala',
id: '4'
},
{
name: 'lala',
id: '5'
},
{
name: 'wowo',
id: '6'
},
]
const repeatNum = data.reduce((prev, next) => {
[next.name] in prev ? ++prev[next.name] : prev[next.name] = 1
return prev
}, {})
console.log(repeatNum) // {bob: 2, wowo: 2, lala: 2}
</script>
</body>
</html>
运行结果
