JS之reduce函数

半兽人 发表于: 2025-07-23   最后更新时间: 2025-07-23 13:49:19  
{{totalSubscript}} 订阅, 30 游览

小白学习用的 reduce 用法总结**,分为:

  • 一、reduce 是干嘛的
  • 二、结构怎么写
  • 三、常见用法场景(多个例子)
  • 四、和 map/for 的区别
  • 五、一句话记忆法

一、reduce 是干嘛的?

reduce 是数组的“归并器”,用来把一个数组变成一个值(数字、字符串、对象、数组等都可以)。

它一边遍历数组,一边累计结果。

二、reduce 语法结构

array.reduce((acc, cur, index, arr) => {
  // acc 是“累计器”,你构建的最终结果
  // cur 是当前项
  // index 是当前索引(从0开始)
  // arr 是原数组(不常用)
  return 新的acc   // 每轮 return 的 acc 会传到下一轮
}, 初始值)

三、常见例子(实用 + 简单)

例1:数组求和

const nums = [1, 2, 3, 4]

const sum = nums.reduce((acc, cur) => acc + cur, 0)
// 初始 acc = 0 → 0+1 → 1+2 → 3+3 → 6+4 = 10

console.log(sum) // 输出 10

例2:把数组拼成字符串

const words = ['我', '是', 'ChatGPT']

const sentence = words.reduce((acc, cur) => acc + cur, '')

console.log(sentence) // 输出:我是ChatGPT

例3:把数组变成对象(语言 → 翻译)

const langs = ['en', 'zh']

const translations = langs.reduce((acc, lang) => {
  acc[lang] = `${lang}翻译`
  return acc
}, {})

console.log(translations)
// 输出:{ en: 'en翻译', zh: 'zh翻译' }

例4:按年龄分类(高级一点)

const users = [
  { name: 'Tom', age: 17 },
  { name: 'Jerry', age: 21 },
  { name: 'Amy', age: 17 }
]

const groupByAge = users.reduce((acc, user) => {
  const age = user.age
  if (!acc[age]) acc[age] = []
  acc[age].push(user.name)
  return acc
}, {})

console.log(groupByAge)
// 输出:{ 17: ['Tom', 'Amy'], 21: ['Jerry'] }

四、reduce 一句话记忆法(小白口诀)

“一边循环,一边累,加到最后才返回。”

  • reduce 就像你自己写的 let result = 初始值; for 循环里面 result 不断变
  • 最终你 return 的 acc 就是整个 reduce 的结果

总结

array.reduce((accumulator, currentItem, index, array) => {
  // 每一轮对 acc 做处理
  return 新的acc
}, 初始值)

常用场景:

  • 数组求和:[1,2,3].reduce((a,b)=>a+b, 0)
  • 数组转对象:['en','zh'].reduce((acc,lang)=>{acc[lang]=xx; return acc}, {})
  • 分组统计:分年龄、分城市等
  • 合并字符串/结构:累加、拼接都能做
更新于 2025-07-23
在线,10小时前登录

查看javascript更多相关的文章或提一个关于javascript的问题,也可以与我们一起分享文章