reduce方法处理数组详解及高级技巧

1:语法

arr.reduce(callback,[initialValue])

callback （执行数组中每个值的函数，包含四个参数）
    1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    2、currentValue （数组中当前被处理的元素）
    3、index （当前元素在数组中的索引）
    4、array （调用 reduce 的数组）

initialValue （作为第一次调用 callback 的第一个参数。）

2: 简单求和

const dataList = [1, 2, 3, 4, 5]
let sum = dataList.reduce((pre, cur, index, array) => {
   console.log(pre) // 1, 3, 6, 10
  return pre + cur
})
console.log(sum) // 15

可以看出reduce第二个参数没有设置时循环4次

const dataList = [1, 2, 3, 4, 5]
let sum = dataList.reduce((pre, cur, index, array) => {
   console.log(pre) // 0, 1, 3, 6, 10
  return pre + cur
}, 0)
console.log(sum) // 15

可以看出reduce第二个参数设置为0时循环5次
注意：如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引0。如果提供initialValue，从索引0开始。

3:高级用法处理数组

const dataList = [1, 2, 3, 4, 5]
let newResult = dataList.reduce((result, item) => {
                  result.push(item * 2)
                  return result // reduce必须以return result结束
                 }, []) // 这里的[]空数组表示result的初始值
 console.log(newResult) // [2,4,6,8,10]

以上例子说明：result为上次调用后的返回值, item为dataList数组中当前被处理的元素。reduce第二个参数[]空数组是result的初始值
注意：reduce必须以 return xxx结束