js中reduce用法详解

介绍reduce

---

reduce() 方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（上一次回调的返回值），当前元素值，当前索引，原数组

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

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

使用reduce方法可以完成多维度的数据叠加。

例如：计算总成绩，且学科的占比不同

 1 const scores = [
 2     {
 3         subject: 'math',
 4         score: 88
 5     },
 6     {
 7         subject: 'chinese',
 8         score: 95
 9     },
10     {
11         subject: 'english',
12         score: 80
13     }
14 ];
15 const dis = {
16     math: 0.5,
17     chinese: 0.3,
18     english: 0.2
19 }
20 const sum = scores.reduce((pre,item) => {
21     return pre + item.score * dis[item.subject]
22 },0)
23 console.log(sum) // 88.5

　

递归利用reduce处理tree树形

 1 var data = [{
 2             id: 1,
 3             name: "办公管理",
 4             pid: 0,
 5             children: [{
 6                     id: 2,
 7                     name: "请假申请",
 8                     pid: 1,
 9                     children: [
10                         { id: 4, name: "请假记录", pid: 2 },
11                     ],
12                 },
13                 { id: 3, name: "出差申请", pid: 1 },
14             ]
15         },
16         {
17             id: 5,
18             name: "系统设置",
19             pid: 0,
20             children: [{
21                 id: 6,
22                 name: "权限管理",
23                 pid: 5,
24                 children: [
25                     { id: 7, name: "用户角色", pid: 6 },
26                     { id: 8, name: "菜单设置", pid: 6 },
27                 ]
28             }, ]
29         },
30     ];
31     const arr = data.reduce(function(pre,item){
32         const callee = arguments.callee //将运行函数赋值给一个变量备用
33         pre.push(item)
34         if(item.children && item.children.length > 0) item.children.reduce(callee,pre); //判断当前参数中是否存在children，有则递归处理
35         return pre;
36     },[]).map((item) => {
37         item.children = []
38         return item
39     })
40     console.log(arr)

还可以利用reduce来计算一个字符串中每个字母出现次数

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

参考

数组reduce方法的高级技巧