ES5: reduce 你不知道的黑科技

ES5: reduce 你不知道的黑科技

简介

reduce 相当于一个累加器的概念,通过遍历数组，获取上一个值与当前值，通过回调函数处理，返回一个新值。而该值将会当做下一次执行的prev返回。

语法

MDN 文档定义

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)
}