JavaScript reduce() 方法

前言

本文主要讲解 reduce 函数的各种使用场景。

一、reduce 语法

reduce 接收 2 个参数： 第一个参数是回调函数（必选），第二个参数是初始值 initialValue（可选）

第一个参数（回调函数），接收下面四个参数：
Accumulator (acc) (累计器)
Current Value (cur) (当前值)
Current Index (idx) (当前索引)
Source Array (src) (源数组)

/**
 * @param function 必要参数，用于执行每个数组元素的函数
 * @param initialValue 可选参数，传递给函数的初始值
*/
array.reduce(
  /**
   * @param Accumulator 必要参数，初始值或计算结束后的结果。
   * @param currentValue 必要参数，当前元素
   * @param currentIndex 可选参数，当前参数的下标
   * @param sourceArray 可选参数，数组对象
  */
  function(Accumulator, currentValue, currentIndex, sourceArray),
  initialValue
);

二、使用示例

1、累加

let sum = [1, 2, 3].reduce((acc, cur, idx) => {
     
  return acc + cur
}, 10)  // 设置初始值为10

// 简洁写法
//let sum = [1, 2, 3].reduce((acc, cur) => acc + cur, 10)

console.log('sum：', sum)  // sum：16

对象属性求和:

let sum = [{
     n: 1}, {
     n: 2}, {
     n: 3}].reduce((acc, cur) => {
     
  return acc + cur.n
}, 0)

console.log('sum：', sum) // sum：6

2、去重

// 简单数组去重
let uniqueArr = [1, 2, 1, 4, 2, 3, 5, 3, 4, 2, 1, 5, 7, 3, 2, 4].reduce((acc, cur) => {
     
  if(!acc.includes(cur)) acc.push(cur)
  return acc
}, [])
console.log("uniqueArr：", uniqueArr) // uniqueArr：[1, 2, 4, 3, 5, 7]

3、二维数组转换为一位数组

let flatArr = [[1, 2], [34], [5], 6, [3, 5]].reduce((acc, cur) => acc.concat(cur), [])

console.log("flatArr：", flatArr) // flatArr：[1, 2, 34, 5, 6, 3, 5]

4、多维数组转换成一维数组

const flattenArr = function (arr) {
     
  return arr.reduce((acc, cur) => {
     
    return acc.concat(Array.isArray(cur) ? flattenArr(cur) : cur)
  }, [])
}
let arrFlat = [[0, [1]], [2, 3], [4, [5, [6, 7]]]]
console.log('flattenArr：', flattenArr(arrFlat)) // flattenArr：[0, 1, 2, 3, 4, 5, 6, 7]

5、统计字符串中字母的个数

function getLetterNum(str) {
     
  let hash = {
     }
  let res = str.split('').reduce((acc, cur) => {
     
    hash[cur] ? acc[cur]++ : hash[cur]=true && (acc[cur] = 1)
    return acc
  }, {
     })
  return res
}

var str = 'abahaabbbaccccddhgddadag'
console.log('getLetterNum：', getLetterNum(str)) // getLetterNum： {a: 7, b: 4, h: 2, c: 4, d: 5, g: 2}

6、求最大值/最小值

// 最大值
let maxArr = [2, 34, 5, 67, 8].reduce((acc, cur) => Math.max(acc, cur))
console.log('maxArr：', maxArr) // maxArr： 67

// 最小值
let minArr = [2, 34, 5, 67, 8].reduce((acc, cur) => Math.min(acc, cur))
console.log('minArr：', minArr) // maxArr： 2