文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载导读本文围绕 Modern JavaScript Tutorialjavascript.infoarray-methods 章节 中的经典练习题「Get average age」展开编写getAverageAge(users)函数对包含age属性的对象数组求平均年龄。通过这道题你将掌握Array.prototype.reduce的完整用法——包括累加器语义、初始值参数、空数组陷阱以及它与for..of、map等方法的取舍最终能独立处理“对象数组聚合计算”这一类常见业务场景。任务目标对对象数组求平均年龄练习任务定义在 10-average-age/task.md要求如下输入一个由对象组成的数组每个对象至少带有age数值属性输出所有age的算术平均值计算公式(age1 age2 ... ageN) / N其中N为数组长度。题目给出的示例数据let john { name: John, age: 25 }; let pete { name: Pete, age: 30 }; let mary { name: Mary, age: 29 }; let arr [ john, pete, mary ]; alert( getAverageAge(arr) ); // (25 30 29) / 3 28注意这里的平均值就是普通算术平均数不涉及加权、取整或去尾。示例结果为28恰好是整数但实际计算中25 30 29 8484 / 3 28分母是数组长度而非对象个数之外的任何额外因素。参考答案一行reduce搞定聚合仓库中 10-average-age/solution.md 给出的标准解法极为简洁function getAverageAge(users) { return users.reduce((prev, user) prev user.age, 0) / users.length; } let john { name: John, age: 25 }; let pete { name: Pete, age: 30 }; let mary { name: Mary, age: 29 }; let arr [ john, pete, mary ]; alert( getAverageAge(arr) ); // 28这段代码的逻辑分两步users.reduce((prev, user) prev user.age, 0)—— 把整个数组“折叠”成一个总和0 25 30 29 84将总和除以users.length即3得到平均值28。solution.md中的代码块带有js run标记这是 javascript.info 教程源码特有的约定表示该代码段可以被交互式运行验证——仓库中所有带此标记的练习解法都可以直接在浏览器控制台或任何支持 ES5 的环境执行。深入原理reduce的累加器机制要真正理解上面的解法需要先吃透Array.prototype.reduce。它在 array-methods/article.md 的「reduce/reduceRight」小节中有系统讲解语法为let value arr.reduce(function(accumulator, item, index, array) { // ... }, [initial]);回调函数的四个参数参数含义accumulator上一次调用的返回结果首次调用时等于initial若提供item当前数组元素index当前元素的索引array数组本身reduce的核心思想是“携带结果前行”每一次回调的返回值都会作为下一次回调的第一个参数accumulator传入。全部元素遍历完后最后一次回调的返回值就是整个reduce的结果。在本题中回调只用了两个参数prev与user这是最常见的用法第一次调用prev 0初始值user john返回0 25 25第二次调用prev 25user pete返回25 30 55第三次调用prev 55user mary返回55 29 84。最终reduce返回84。下面是同样的过程用表格呈现各行的prev即上一行的结果调用次数prev累加器user当前项返回结果第 1 次0{name:John, age:25}25第 2 次25{name:Pete, age:30}55第 3 次55{name:Mary, age:29}84上图仓库中的 reduce.svg展示了reduce在数组元素间传递累加结果的数据流正是本文求和的执行过程。为什么必须显式传入初始值0solution.md中特意写了, 0这个第二参数这并非可有可无。reduce允许省略初始值let result arr.reduce((sum, current) sum current); // 同样返回 15省略时reduce会把数组第一个元素当作初始accumulator并从第二个元素开始迭代。但原文档明确指出这种做法有隐患如果数组为空且没有提供初始值reduce会直接抛出错误TypeError: Reduce of empty array with no initial value。let arr []; arr.reduce((sum, current) sum current); // TypeError!而对于本题这种“可能传入空数组”的通用工具函数来说显式指定0还能保证空数组时reduce返回0随后0 / 0 NaN至少不会抛异常。因此在求和的聚合场景永远显式传入初始值0若希望空数组返回0而非NaN可先判断长度见下文“健壮性改造”。reduceRight从右向左的同门兄弟reduce还有反向版本Array.prototype.reduceRight回调参数含义完全相同只是遍历方向从右到左。对于“求和”这类满足交换律的运算两者结果一致但在处理顺序敏感的累积如从右往左拼接字符串、解析后缀表达式时reduceRight才有用武之地。从求和到平均一次reduce演算两个经典练习reduce在 javascript.info 教程的练习体系中反复出现是理解“对象集合聚合”的一把钥匙。除了本题仓库中还有两个同族练习可以对照学习12-reduce-object12-reduce-object/_js.view/solution.js用reduce把对象数组[{name:John,salary:100}, ...]折叠成按name索引的映射对象核心写法同样是array.reduce((obj, value) { obj[value.name] value.salary; return obj; }, {})——每次迭代都要显式返回累加器这是对象聚合与数值求和的共同关键点Sum the properties01-sum-salaries/task.md 与更早的 5-sum-object/task.md对对象而非数组求和需要先用Object.values取出数值序列再累加。三者放在一起可以看出聚合计算的本质是先“取数”user.age或Object.values再“折叠”reduce。平均年龄 年龄总和 ÷ 人数正是这套思路的典型应用。健壮性改造与常见边界情况参考答案追求极简作为生产级函数还可以补齐边界处理1. 空数组与除零function getAverageAge(users) { if (users.length 0) return 0; // 约定空数组平均值为 0 return users.reduce((prev, user) prev user.age, 0) / users.length; }0 / 0的结果是NaN多数业务场景希望空数据返回中性值0或null因此前置守卫是常见做法。2. 非整数结果与展示格式化年龄均值常为小数如三人的年龄是 25、30、31均值为28.666...。按需求保留位数// 保留一位小数 function getAverageAge(users) { const sum users.reduce((prev, user) prev user.age, 0); return users.length ? Math.round((sum / users.length) * 10) / 10 : 0; }3. 数据缺失防护可选如果数组中可能存在没有age属性的对象user.age会是undefined参与加法后产生NaN。可在回调内兜底(prev, user) prev (user.age || 0)但这属于对脏数据的宽容处理需要依据业务确定语义。替代实现与选型对比reduce不是唯一答案理解其它写法有助于在不同场景下选择// for..of 循环可读性最高适合需要中途 break 的场景 function getAverageAge(users) { let sum 0; for (const user of users) sum user.age; return users.length ? sum / users.length : 0; } // map reduce把“取数”与“折叠”显式分离 function getAverageAge(users) { const ages users.map(user user.age); // 先取出所有年龄 return ages.reduce((prev, age) prev age, 0) / users.length; } // forEach需要额外维护外部变量 function getAverageAge(users) { let sum 0; users.forEach(user { sum user.age; }); return sum / users.length; }选型建议数据量小、追求一行式表达reduce最合适仓库标准答案即此方案需要提前退出如检测到异常数据就停止for..of配合break更自然reduce无法中途中断强调关注点分离、便于阅读mapreduce把“抽取字段”和“聚合数值”拆成两步语义更直白。结语「Get average age」这道题虽短却完整覆盖了reduce的核心知识面累加器参数、初始值语义、空数组陷阱、除零防护以及与for..of、map的取舍。在 javascript.info 的练习体系中它与 12-reduce-object、sum-salaries 共同构成了“数组/对象聚合计算”的完整训练闭环。掌握这一模式后求和、平均值、最大值、分组、计数等日常数据处理任务都可以用同样简洁的reduce表达式完成。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐JavaScript 对象方法与 this 关键字详解Modern JavaScript Tutorial 实战篇JavaScript 对象方法与 this 关键字详解Modern JavaScript Tutorial 实战篇 导读 在 JavaScript 中对象文档/教程前端JavaScript 计算器对象实战用 Object Methods 与 this 实现可交互的 calculatorModern JavaScript TutorialJavaScript 计算器对象实战用 Object Methods 与 this 实现可交互的 calculatorModern JavaScript T文档/教程前端json-render 中 Remotion Composition 的定义与动态元数据从 Root.tsx 到 Timeline Specjson render 中 Remotion Composition 的定义与动态元数据从 Root.tsx 到 Timeline Spec 本文围绕 ski文档/教程前端上一篇react-admin 接入 Create React App从脚手架初始化到应用热更新检测的完整指南下一篇Teleport Operator crdgen 调试指南从 dump protoc 请求到断点调试的完整方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考