JavaScript中reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。
语法:
arr.reduce(callback(a***umulator, currentValue[, index[, array]])[, initialValue])
参数配置:
| 参数名 | 描述 |
|---|---|
| callback | 执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数,包含四个参数 |
| a***umulator | 累计器累计回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue(见于下方)。 |
| currentValue | 数组中正在处理的元素。 |
| index | 数组中正在处理的当前元素的索引。 如果提供了 initialValue,则起始索引号为0,否则从索引1起始。(可选) |
| array | 调用 reduce()的数组(可选) |
| initialValue | 可选。传递给函数的初始值 |
对于reduce()方法,很多人不太了解,其实熟悉之后会发现它可以应用在很多场景中。
一、数值类型
1.1 求和
最常见的则是通过reduce()方法进行求和处理,将每次求的和,传递给下一个迭代函数中继续处理。代码如下:
const total = [10, 20, 5, 8, 10, 120, 89].reduce((total, value) => total + value, 0)
console.log('total:', total)
运行结果如下图:
1.2 求最小值
结合Math.min()获取数组中最小值,默认值为数组第一位数值,将每次获取的最小值返回,传递给下一个迭代的回调函数中继续处理。代码如下:
const minValue = [10, 20, 5, 8, 10, 120, 89].reduce((minVal, value) => Math.min(minVal, value), 10)
console.log('min:', minValue)
运行结果如下较:
1.3 求最大值
结合Math.max()获取数组中最大值,默认值为数组第一位数值,将每次获取的最大值返回,传递给下一个迭代的回调函数中继续处理。代码如下:
const maxValue = [10, 20, 5, 8, 10, 120, 89].reduce((maxVal, value) => Math.max(maxVal, value), 10)
console.log('max:', maxValue)
结果如下图:
1.4 数组去重
可以通过reduce()方法,对数组进行去重处理。默认传入空数组,每次回调函数执行判断空数组中是否存在该值,不存在则追加,并返回newArr到下个迭代的回调函数中继续处理。代码如下:
const arr = [10, 20, 5, 8, 10, 20, 10, 120, 89].reduce(
(newArr, value) => {
newArr.indexOf(value) === -1 && newArr.push(value)
return newArr
}, [])
console.log('arr:', arr)
运行结果如下图:
1.5 排序(升序)
对数组升序排序,结合Array.filter方法过滤出还未参与判断最小值的数据,再使用Math.min获取过滤出来数组中最小值即可,代码如下:
const arr = [10, 20, 5, 8, 120, 89].reduce(
(newArr, value, index, arr) => {
// 过滤年上次处理过的数据
const filter = arr.filter(item => !newArr.includes(item))
// 获取过滤后数组中最小值
const minValue = filter.reduce((min, val) => Math.min(min, val), filter[0])
// 追加到新数组中
newArr.push(minValue)
return newArr
}, [])
console.log('arr:', arr)
运行后结果如下图:
1.6 排序(降序)
降序的处理和升序方法一致,只是将求最小值换成求最大值即可,代码如下: