ES5: reduce 你不知道的黑科技
简介
reduce
相当于一个累加器的概念,通过遍历数组,获取上一个值与当前值,通过回调函数处理,返回一个新值。而该值将会当做下一次执行的prev返回。
语法
arr.reduce(function(prev,cur,index,originArray){
...
},initValue)
其中,
- initValue : 指首次传入的初始值
- prev:指上一次传入的返回值
- cur: 指当前对应下标传入的值
- index: 当前数组下标
- originArray: 原始数组
常见应用
1. 实现一个累加器
const arr = [1, 2, 3, 4, 5]
// 累加器
let sum = arr.reduce((prev, cur) => {
return prev + cur
}, 0)
console.log('arr', sum) // 15
2. 实现一个获取数组最大值的方法
const arr = [1, 9, 3, 4, 5]
// 数组求最大值
let max = arr.reduce((prev, cur) => {
return Math.max(prev, cur)
}, [])
console.log('arr', max) // 9
3. 合并二维数组
- 解法一: 使用
reduce
方法
const arr = [[1, 9], [3, 4], 5]
// 数组合并
let merge = arr.reduce((prev, cur) => {
return prev.concat(cur)
}, [])
console.log('arr', merge) // [1,9,3,4,5]
- 解法二: 利用
apply
方法
此方式是利用
apply
第二个参数以数组形式传递,巧妙借用这一概念。
apply
语法:
fn.apply(obj,[arg1,arg2,...])
实现方式:
let merge = Array.prototype.concat.apply([], arr)
console.log('arr', merge) // [1,9,3,4,5]
4. 统计重复字符出现次数
const string = 'aabbbccddd'
let arr = string.split('')
// 统计字符出现重复次数
let merge = arr.reduce((obj, key) => {
if (key in obj) {
obj[key]++
} else {
obj[key] = 1
}
return obj
}, {})
console.log('arr', merge) // {a: 2, b: 3, c: 2, d: 3}
5. 解析URL参数
// 获取参数字符串
let search = location.search
if (search.indexOf('?') > -1) {
// 截断
search = search.slice(search.indexOf('?') + 1)
// 拆分
search = search.split('&').reduce((prev, cur) => {
let key = cur.split('=')[0]
let val = cur.split('=')[1]
// 拼接
prev[key] = val
return prev
}, {})
console.log('search', search)
}