reduce方法作为 Array 的一个高级方法,接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值;相比于 Array 的其他方法比较复杂,但是当你了解了过后,将会大大的提高你的效率。
我们先看下reduce的语法:
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
total:必需。初始值, 或者计算结束后的返回值。
currentValue:必需。当前元素
currentIndex:可选。当前元素的索引
arr:可选。当前元素所属的数组对象。
initialValue:可选。传递给函数的初始值
我们先来看一个例子,也是reduce最基本的方法,累加和累乘:
1 | const arr = [1, 2, 3, 4, 5, 6] |
下面我们来介绍一下reduce的一些高级用法:
reduce对数组去重
1
2
3
4
5
6
7
8const arr = [1, 2, 3, 4, 2, 4, 6]
const newArr = arr.reduce((pre,cur) => {
if (!pre.includes(cur)) {
pre.push(cur)
}
return pre
}, []) // [1, 2, 3, 4, 6]统计数组中元素个数
1
2
3
4
5
6
7
8
9
10const arr = ['a', 'b', 'c', 'a', 'a', 'c', 'a']
const newObj = arr.reduce((pre,cur) => {
if (cur in pre) {
pre[cur]++
} else {
pre[cur] = 1
}
return pre
}, {}) // {a: 4, b: 1, c: 2}合并相同类型数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34const arr = [
{
name: '椅子',
value:10
},
{
name: '桌子',
value: 12
},
{
name: '凳子',
value: 7
},
{
name: '椅子',
value: 9
},
{
name: '凳子',
value: 11
}
]
const newArr = arr.reduce((pre, cur) => {
const index = pre.findIndex(item => item.name === cur.name)
if (index !== -1) {
pre[index].value += cur.value
} else {
pre.push(cur)
}
return pre
}, [])
// [{name: "椅子", value: 19},{name: "桌子", value: 12} ,{name: "凳子", value: 18}]多维数组降一维
1
2
3
4const arr = [[1], [2, 3], 4]
const newArr = arr.reduce((pre, cur) => Array.isArray(cur) ?
[...pre, ...cur] : [...pre, cur], []) // [1,2,3,4]递归多维降为一维
1
2
3
4
5
6
7function reductionArr(arr) {
return arr.reduce((pre, cur) => Array.isArray(cur) ?
[...pre, ...reductionArr(cur)] : [...pre, cur], [])
}
const arr = [[1], [2, [3, 4, [5, 6]]]]
console.log(reductionArr(arr)) // [1,2,3,4,5,6]对数组排序
1
2
3
4
5
6
7
8
9
10
11const arr = [12, 2, 3, 1, 5, 3, 10, 7, 4, 6]
const newArr = arr.reduce((pre, cur) => {
const index = pre.findIndex(item => cur <= item)
if (index === -1) {
pre.push(cur)
} else {
pre.splice(index, 0, cur)
}
return pre
}, []) // [1, 2, 3, 3, 4, 5, 6, 7, 10, 12]