JavaScript高阶API数组reduce函数使用示例

// 一个包含几个人物对象的数组。
const people = [
  { name: "John", age: 20 },
  { name: "Jane", age: 22 },
  { name: "Joe", age: 23 },
  { name: "Jack", age: 24 },
  { name: "Jackson", age: 30 },
  { name: "Jeff", age: 30 },
]

// 注意init 什么类型 res就是什么类型的
// res的初始值为0 ，求和所以得从0开始
const sum = people.reduce((res, cur) => res+cur.age, 0)
console.log(`结果：${sum}`); // 结果：149
// 如果我们把初始值设为100 那么结果应该是149+100了
const sum = people.reduce((res, cur) => res+cur.age, 100)
console.log(`结果：${sum}`); // 结果：249

const sum = people.reduce((res, cur) => {
   // console.log(res,cur);
   const age = cur.age
   if (res[age] == null) {
       // 这里需要使用[]动态获取age值 ， 用.age会有不一样的效果
       res[age] = []
   }
   // 通过push插入值
   res[age].push(cur.name)
   return res
}, {})
code1.png

// 写法1
const sum = people.reduce((res, cur) => {
   const name = cur.name
   res[name]=cur.age
   return res
}, {})
// 写法2 解构返回值 化简
const sum = people.reduce((res, cur) => ({
   ...res,
   [cur.name] : cur.age
}), {})
// 写法3 回调方法的第二个参数也可以解构
const sum = people.reduce((res, { name, age }) => ({
   ...res,
   [name] : age
}), {})
// 结果都是一样的
console.log(sum)
image.png

// 1.定义初始值
const sum = people.reduce((res, cur, index, array) => {
   console.log('🚀 ~ file:  ~ res', res)
   console.log('🚀 ~ file:  ~ cur', cur)
   console.log('🚀 ~ file:  ~ index', index)
   console.log('🚀 ~ file:  ~ array', array)
    return  res + cur.age
}, 0)

const sum = people.reduce((res, cur, index, array) => {
   console.log('🚀 ~ file:  ~ res', res)
   console.log('🚀 ~ file:  ~ cur', cur)
   console.log('🚀 ~ file:  ~ index', index)
   console.log('🚀 ~ file:  ~ array', array)
    return  res + cur.age
})