reduce() 方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（上一次回调的返回值），当前元素值，当前索引，原数组
demo1 数值处理
const arr = [10,20,30,40,50];
const sum = arr.reduce((pre,item,index) => {
console.log('pre--->',pre,'---item--->',item,'---index---->',index);
return pre + item
},100000)
console.log(sum)
zb@zbdeMacBook-Pro vue3test % node ./test.js
pre---> 100000 ---item---> 10 ---index----> 0
pre---> 100010 ---item---> 20 ---index----> 1
pre---> 100030 ---item---> 30 ---index----> 2
pre---> 100060 ---item---> 40 ---index----> 3
pre---> 100100 ---item---> 50 ---index----> 4
100150
demo2 字符串处理统计
const str = 'jshdjsihh';
const obj = str.split('').reduce((pre,item) => {
pre[item] ? pre[item] ++ : pre[item] = 1;
return pre
},{})// 注意:这里pre定义的就是对象
console.log(obj) // {j: 2, s: 2, h: 3, d: 1, i: 1}
demo3 树行tree递归处理
var data = [
{
id: 1,
name: "办公管理",
pid: 0,
children: [{
id: 2,
name: "请假申请",
pid: 1,
children: [
{ id: 4, name: "请假记录", pid: 2 },
],
},
{ id: 3, name: "出差申请", pid: 1 },
]
},
{
id: 5,
name: "系统设置",
pid: 0,
children: [{
id: 6,
name: "权限管理",
pid: 5,
children: [
{ id: 7, name: "用户角色", pid: 6 },
{ id: 8, name: "菜单设置", pid: 6 },
]
}]
}
];
const arr = data.reduce(function(pre,item){
const callee = arguments.callee //将运行函数赋值给一个变量备用
pre.push(item)
//判断当前参数中是否存在children,有则递归处理
if(item.children && item.children.length > 0){
item.children.reduce(callee,pre); //--递归调取处理
}
return pre;
},[]).map((item) => {
item.children = []
return item
})
console.log(arr)
- 结果
[
{ id: 1, name: '办公管理', pid: 0, children: [] },
{ id: 2, name: '请假申请', pid: 1, children: [] },
{ id: 4, name: '请假记录', pid: 2, children: [] },
{ id: 3, name: '出差申请', pid: 1, children: [] },
{ id: 5, name: '系统设置', pid: 0, children: [] },
{ id: 6, name: '权限管理', pid: 5, children: [] },
{ id: 7, name: '用户角色', pid: 6, children: [] },
{ id: 8, name: '菜单设置', pid: 6, children: [] }
]