温故而知新:JavaScript中reduce的使用场景

61 阅读1分钟

前言

reduce相比数组其他的方法,相对算是用的比较少的一个,但是它的功能其实也非常强大,下面具体来看看他的一些实用场景

数组求和

const arr = [1,2,3,4,5]
const total = arr.reduce((prev, curr) => {
    return prev + curr
}, 0)
console.log(total)

数组对象属性求和

const arr = [
    {
      name: '橘子',
      total: 12
    },
    {
      name: '梨子',
      total: 29
    }
]
const total = arr.reduce((prev, curr) => {
    return prev + curr.total
}, 0)
console.log(total)

扁平化数组

const arr = [[1,2],[3,4],[5,6]]
const newArr = arr.reduce((prev, curr) => {
    return prev.concat(curr)
})
console.log(newArr)

按属性分组对象

const arr = [
    {
      name: '语文',
      score: 70
    },
    {
      name: '数学',
      score: 50
    },
    {
      name: '英语',
      score: 80
    }
]
const initValue = {
    pass: [],
    fail: []
}
const groupedResult = arr.reduce((prev, curr) => {
    curr.score > 60 ? prev.pass.push(curr) : prev.fail.push(curr)
    return prev
}, initValue)
console.lgo(groupedResult)

数组去重

  const arr = [1, 2, 3, 4, 5, 3, 2]
  const newArr = arr.reduce((prev, curr) => {
    if (!prev.includes(curr)) {
      prev.push(curr)
    }
    return prev
  }, [])
  console.log(newArr)