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结束

你可能感兴趣的:(reduce方法处理数组详解及高级技巧)