array.reduce

Array.prototype.reduce((total, curVal, curIdx, arr) => {}, initVal)

reduce() 方法接收一个函数作为累加器，数组中的每个值 (从左到右)开始缩减，最终为一个值，是ES5中新增的又一个数组逐项处理方法

参数：

• callback (一个在数组中每一项上调用的函数，接受四个函数：)

  • total (上一次调用回调函数时的返回值，或者初始值)

  • curVal (当前正在处理的数组元素)

  • curIdx (当前正在处理的数组元素下标)

  • arr (调用 reduce() 方法的数组)

• initialValue (可选的初始值。作为第一次调用回调函数时传给 total 的值)

原方法

var arr = [1, 2, 3, 4]
arr.reduce((a, b) => a + b, 10)         // 20

手写 __reduce

Array.prototype.__reduce = function (fn, initVal) {
  const arr = this
  let total = initVal || arr[0]

  for (let i = (initVal ? 0 : 1); i < arr.length; i++) {
    total = fn(total, arr[i], i, arr)
  }
  return total
}

const arr = [1, 2, 3, 4]
console.log(arr.__reduce((a, b) => a + b))                  // 10
console.log(arr.__reduce((a, b) => a + b, 100))             // 110

reduce 的其他用法

去重

const arr = ['a', 'b', 'c', 'a', 'd', 'e', 'r', 'a']

const newArr = arr.reduce((total, curVal) => {
  if (!total.includes(curVal)) {
    total.push(curVal)
  }
  return total
}, [])

console.log(newArr)     // [ 'a', 'b', 'c', 'd', 'e', 'r' ]

数组打平

const arr = [[1,2], 3, [4,5], [6, [7, 8, 9]]]

const foo = function (arr) {
  return arr.reduce((total, curVal) => {
    total = total.concat(curVal instanceof Array ? foo(curVal) : curVal)
    return total
  }, [])
}

console.log(foo(arr))
// [
//   1, 2, 3, 4, 5,
//   6, 7, 8, 9
// ]

数组中重复最多的值

const arr = ['a','b','c','a','d','e','r','a']

const res = arr.reduce((total, curVal) => {
  total[curVal]++ || (total[curVal] = 1)
  return total
}, {})

console.log(res)          // { a: 3, b: 1, c: 1, d: 1, e: 1, r: 1 }

最大值最小值

const arr = [1, 2, 3, 4, 15, 6, 7, 8, 9]

const res = arr.reduce((a, b) => Math.max(a, b))

console.log(res)                // 15