js reduce 用法

reducer 函数接收4个参数:

Accumulator (acc) (累计器)

Current Value (cur) (当前值)

Current Index (idx) (当前索引)

Source Array (src) (源数组)

数组所有数值的和

const sum = [1,2,3,4].reduce((accum, current) => {
  console.log("accum, current", accum, current)
  return accum + current
}, 0)
console.log(sum)
// accum累计器是每次reduce计算后的值， 这里给了初始值0

image.png

上面的代码把初始值改成1：

const sum = [1,2,3,4].reduce((accum, current) => {
  console.log("accum, current", accum, current)
  return accum + current
}, 1)
console.log(sum)

image.png

相应最后的和也加了1

然后接下来把初始值去掉

const sum = [1,2,3,4].reduce((accum, current) => {
  console.log("accum, current", accum, current)
  return accum + current
})
console.log(sum)

image.png

只运行了3次，就得到了最后的正确结果
MSD里面有说明这种情况

注意：如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从>索引0开始。

数组去重

let chongfuArr = [
  {
    id: 1,
    name: '测试1'
  },
  {
    id: 1,
    name: '测试1'
  },
  {
    id: 2,
    name: '测试2'
  },
  {
    id: 3,
    name: '测试3'
  },
  {
    id: 3,
    name: '测试3'
  },
  {
    id: 4,
    name: '测试4'
  }
]

let obj = {}

const test = chongfuArr.reduce((item, next) => {
  // console.log('item, next', item, next)
  if(!obj[next.id]){
    item.push(next)
    obj[next.id] = true
  }
  return item
}, [])

console.log("去重后的数组", test)
// [
  { id: 1, name: '测试1' },
  { id: 2, name: '测试2' },
  { id: 3, name: '测试3' },
  { id: 4, name: '测试4' }
]