js循环中reduce的用法简单介绍

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: [] }
]