js迴圈中reduce的用法簡單介紹

盤思動發表於2023-03-30
JS

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

相關文章