JavaScript - reduce用法詳解

原文鏈接：https://www.cnblogs.com/smallpen/p/10249288.html

介紹reduce

reduce() 方法接收一個函數作爲累加器,reduce 爲數組中的每一個元素依次執行回調函數，不包括數組中被刪除或從未被賦值的元素，接受四個參數：初始值（上一次回調的返回值），當前元素值，當前索引，原數組 

語法：arr.reduce(callback,[initialValue])

1 2 3 4 5 6 7

callback:函數中包含四個參數 - previousValue （上一次調用回調返回的值，或者是提供的初始值（initialValue）） - currentValue （數組中當前被處理的元素） - index （當前元素在數組中的索引) - array （調用的數組）   initialValue （作爲第一次調用 callback 的第一個參數。）

應用

const arr = [1, 2, 3, 4, 5]
const sum = arr.reduce((pre, item) => {
    return pre + item
}, 0)
console.log(sum) // 15

以上回調被調用5次，每次的參數詳見下表

callback	previousValue	currentValue	index	array	return value
第1次	0	1	0	[1, 2, 3, 4, 5]	1
第2次	1	2	1	[1, 2, 3, 4, 5]	3
第3次	3	3	2	[1, 2, 3, 4, 5]	6
第4次	6	4	3	[1, 2, 3, 4, 5]	10
第5次	10	5	4	[1, 2, 3, 4, 5]	15

 

1.使用reduce方法可以完成多維度的數據疊加

例如：計算總成績，且學科的佔比不同

const scores = [
     {
         subject: 'math',
         score: 88
     },
     {
         subject: 'chinese',
         score: 95
     },
     {
         subject: 'english',
         score: 80
     }
 ];
 const dis = {
     math: 0.5,
     chinese: 0.3,
     english: 0.2
 }
 const sum = scores.reduce((pre,item) => {
     return pre + item.score * dis[item.subject]
 },0)
 console.log(sum) // 88.5

 

2.遞歸利用reduce處理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)

 

3.還可以利用reduce來計算一個字符串中每個字母出現次數

const str = 'jshdjsihh';
     const obj = str.split('').reduce((pre,item) => {
         pre[item] ? pre[item] ++ : pre[item] = 1
         return pre
     },{})
 console.log(obj) // {j: 2, s: 2, h: 3, d: 1, i: 1}

 

參考鏈接：

數組reduce方法的高級技巧