reduce基础和高级用法

176 阅读1分钟

基础用法

total是初始值或者计算结束后的返回值 没有赋初始值时total为数组第一个数,cur为数组第二个数

const arr = [1,2,3,4,5]
const sum = arr.reduce((total,cur,index,arr) => {
    console.log(total, cur, index)
    return total + cur
}, 6)

image.png

高级用法

1、数组去重

let arr1 = [1,2,2,3,4,4,5]
let arr2 = [[1,2],[3,4],[5,6]]
let copyArr1 = arr1.reduce((pre, cur, i, arr)=> {
    if(pre.indexOf(cur) === -1){
        pre.push(cur)
    }
    return pre
}, [])
 
console.log(copyArr1)

2、二元数组转一元

let copyArr2 = arr2.reduce((pre, cur, i, arr)=>{
    return [...pre, ...cur]
}, [])
console.log(copyArr2)

3、数据过滤(按相同的value值)转化为二维数组

let arr3 = [
    {
        name:'cy',
        grade:1
    },
    {
        name:'oe',
        grade:1
    },
    {
        name:'ss',
        grade:2
    },
    {
        name:'wt',
        grade:2
    }
]

//根据grade合并为二维数组,利用对象key不能重复 
let res = Object.values(arr3.reduce((pre, cur, i, arr)=> {
    pre[cur.grade] ? pre[cur.grade].push(cur) : pre[cur.grade] = [cur]
    return pre
}, {}))
console.log(res)

4、属性合并

const arr = [
    {
      name: '小明',
      sex: '男',
      id: 1
    },
    {
      name: '小红',
      sex: '男',
      id: 2
    },
    {
      name: '小花',
      sex: '女',
      id: 3
    }
  ]
  const res2 = arr.reduce((acc, val) => {
    // 如果男或者女在对象里面找不到,那么就新增一个键名
    if (!(val.sex in acc)) {
      acc[val.sex] = []
    }
    acc[val.sex].push(val)
    return acc
  }, {})
  console.log(res2)

5、计算重复次数

const arr4 = [1, 2, 3, 1, 31, 3, 1, 45, 5, 6, 1]
// 看累加器里面有这一项没,有就把这一项的value+1,没有就把value赋值1    
const obj = arr4.reduce((acc, item) => {
    if (item in acc) {
      acc[item]++
    } else {
      acc[item] = 1
    }
    return acc
},{})
console.log(obj)