Array.reduce()

概念

reduce 对数组中每个元素执行一个reducer函数并且返回单个值

reducer接收4个参数

Accumulator (acc) 累加器 累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue

Current Value (cur) 当前值 数组中正在处理的元素。

Current Index (idx) 当前索引 数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则从索引1起始。

Source Array (src) 源数组 调用reduce()的数组

语法

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

回调函数第一次执行时取值有两种情况

提供initialValue时， accumulator===initialValue && currentValue===arr[0] && index===0

不提供initialValue时，accumulator===arr[0] && currentValue===arr[1] && index===1

需要注意的场景：

1. 不提供initialValue且数组为空时， 抛出TypeError

2. 不提供initialValue且数组仅有一个元素或提供initialValue且数组为空时， 直接返回该唯一值

根据是否提供初始值一个非常有趣的实例

var maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x );
var maxCallback2 = ( max, cur ) => Math.max( max, cur );

// reduce() 没有初始值
[ { x: 2 }, { x: 22 }, { x: 42 } ].reduce( maxCallback ); // NaN
[ { x: 2 }, { x: 22 }            ].reduce( maxCallback ); // 22
[ { x: 2 }                       ].reduce( maxCallback ); // { x: 2 }
[                                ].reduce( maxCallback ); // TypeError

// map/reduce; 这是更好的方案，即使传入空数组或更大数组也可正常执行
[ { x: 22 }, { x: 42 } ].map( el => el.x )
                        .reduce( maxCallback2, -Infinity );

基础用法

用作累加

let count = [0, 1, 2, 3, 4, 5].reduce((acc, cur, index, arr) => {
  return acc + cur;
})
console.log(count) // 15

解析：来源数组[0, 1, 2, 3, 4, 5]， 没有提供初始值initialValue，index = 1, 则调用次数为arr.length - 1,reducer每次返回值为acc + cur，即和

注意：假如reducer中不return而是直接将acc+cur， 那么将会是undefined， 因为acc是reducer的返回值， 所以假如reducer中不返回任何值的话， 那么将不存在该值， 只有当数组为空且提供initialValue时，reducer执行次数为0， 那么将返回initialValue

进阶用法

利用每个元素都必然会进入reducer函数中， 并且可以提供一个初始值initialValue， 所以以此为基础， reduce方法拥有非常多的可能性

处理数组：二维数组转一维数组

let result = [[1, 2, 3], [4, 5, 6]].reduce((acc, cur, index, arr) => {
  // 首先确认当前值， acc === [1, 2, 3] && cur ==== [4, 5, 6]
  // 那么返回的便是
  return acc.concat(cur)
})
console.log(result) // [ 1, 2, 3, 4, 5, 6 ]

处理对象：按属性对Object分类

let result = [{name: 'Alice', age: 20}, {name: 'Max', age: 20}, {name: 'Jane', age: 20},].reduce((acc, cur, index, arr) => {
  let key = cur['age'];
  if(!arr[key]) {
    acc[key] = []
  }
  acc[key].push(cur)
  return acc
}, {})
console.log(result); // { '20': [ { name: 'Max', age: 20 } ], '21': [ { name: 'Jane', age: 21 } ] }

处理函数：顺序执行Promise

/**
 * Runs promises from array of functions that can return promises
 * in chained manner
 *
 * @param {array} arr - promise arr
 * @return {Object} promise object
 */
function runPromiseInSequence(arr, input) {
  return arr.reduce(
    (promiseChain, currentFunction) => promiseChain.then(currentFunction),
    Promise.resolve(input)
  );
}
function sleep(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve()
    }, ms)
  })
}
// promise function 1
function p1(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() =>{
      console.log('p1')
      resolve(a * 5);
    }, 1200)
  });
}

// promise function 2
function p2(a) {
  return new Promise((resolve, reject) => {
    // resolve(a * 2);
    setTimeout(() =>{
      console.log('p2')
      resolve(a * 2);
    }, 1200)
  });
}

// function 3  - will be wrapped in a resolved promise by .then()
function f3(a) {
 return a * 3;
}

// promise function 4
function p4(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 4);
  });
}

const promiseArr = [p1, p2, f3, p4];
runPromiseInSequence(promiseArr, 10)
  .then(console.log);   // 1200

处理函数：功能型函数管道

// Building-blocks to use for composition
const double = x => x + x;
const triple = x => 3 * x;
const quadruple = x => 4 * x;

// Function composition enabling pipe functionality
const pipe = (...functions) => input => functions.reduce(
    (acc, fn) => fn(acc),
    input
);

// Composed functions for multiplication of specific values
const multiply6 = pipe(double, triple);
const multiply9 = pipe(triple, triple);
const multiply16 = pipe(quadruple, quadruple);
const multiply24 = pipe(double, triple, quadruple);

// Usage
multiply6(6); // 36
multiply9(9); // 81
multiply16(16); // 256
multiply24(10); // 240

reduceRight

和reduce类似，不过俩者的执行顺序相反， reduce是从左到右顺序调用reducer， 而reduceRight则是从右到左顺序调用， 有兴趣可以查阅下方资料

资料来源：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceRight