介绍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}