ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

JavaScript 求对象属性值之和:用 Object.values 与 for..of 实现 sumSalaries

JavaScript 求对象属性值之和:用 Object.values 与 for..of 实现 sumSalaries 文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载本文基于 Modern JavaScript Tutorialen.javascript.info 仓库中 Sum the properties 实战练习展开。该练习位于 1-js/05-data-types/09-keys-values-entries/01-sum-salaries/task.md核心目标是给定一个包含任意数量薪水数值属性的普通对象salaries编写sumSalaries(salaries)函数借助Object.values与for..of循环返回所有属性值的总和当对象为空时返回0。读完本文你将掌握Object.values的正确调用方式、与for..in及Map.prototype.values()的差异并能在项目中写出简洁、健壮的对象数值聚合函数。练习需求解读原始练习importance: 5的要求非常明确存在一个salaries对象其属性数量任意编写函数sumSalaries(salaries)必须使用Object.values和for..of循环来计算所有薪水之和若salaries为空对象结果必须是0。给出的示例数据与期望结果如下let salaries { John: 100, Pete: 300, Mary: 250 }; alert( sumSalaries(salaries) ); // 650这里的关键设计意图是不要手动用for..in遍历属性名再去取值而是先通过Object.values一次性提取出所有属性值数组再对数组做累加。这样代码更简洁、语义更直接也更容易配合数组自带的方法如reduce使用。标准解法Object.values for..of官方参考解答solution.md给出了教科书式实现function sumSalaries(salaries) { let sum 0; for (let salary of Object.values(salaries)) { sum salary; } return sum; // 650 } let salaries { John: 100, Pete: 300, Mary: 250 }; alert( sumSalaries(salaries) ); // 650逐步拆解这段代码的执行过程Object.values(salaries)返回一个新数组[100, 300, 250]for..of依次取出数组中的每个数值累加到sum函数返回累加结果650。该实现与仓库中的可运行示例源码完全一致参见 _js.view/solution.js可直接在浏览器或 Node.js 环境运行验证。为什么用 Object.values 而不是 for..in在《JavaScript.info》的配套章节 Object.keys, values, entries 中明确说明Object.values(obj)返回对象所有可枚举属性的值组成的真实数组real Array而for..in需要先取键再手动取值且还要注意原型链上的可枚举属性。直接对值数组做for..of累加既避免了键名干扰也让求和逻辑聚焦在值上。空对象返回 0 的保证当salaries为空对象{}时Object.values({})返回空数组[]for..of循环体一次都不会执行sum保持初始值0因此自动满足空对象返回 0的要求。这一边界条件在仓库的 Mocha 测试中得到了显式验证。仓库测试用例验证行为边界该练习在 01-sum-salaries/_js.view/test.js 中附带了两组基于 Mocha 框架的测试分别覆盖了正常求和与空对象两个场景describe(sumSalaries, function() { it(returns sum of salaries, function() { let salaries { John: 100, Pete: 300, Mary: 250 }; assert.equal( sumSalaries(salaries), 650 ); }); it(returns 0 for the empty object, function() { assert.strictEqual( sumSalaries({}), 0); }); });第一个用例使用assert.equal验证示例数据求和结果等于650第二个用例使用assert.strictEqual验证空对象返回0严格相等确保不是undefined或0。这两条用例与练习页面的测试沙箱一一对应是验证你自写实现是否通过的最直接依据。如果你在本地复刻练习可以用同样的测试用例来驱动开发。进阶解法Object.values reduce 一行求和官方解答还给出了另一种同样被认可的写法借助数组的reduce方法把求和压缩成一行// reduce loops over array of salaries, // adding them up // and returns the result function sumSalaries(salaries) { return Object.values(salaries).reduce((a, b) a b, 0) // 650 }要点解析Object.values(salaries)先取出[100, 300, 250]reduce((a, b) a b, 0)以0为初始累加值依次执行0 100、100 300、400 250最终返回650初始值0至关重要它既保证空数组时reduce返回0而不是对空数组调用reduce时的TypeError也保证了结果始终是数值类型。两种写法在功能上等价。for..of版本更直白、易于阅读和调试reduce版本更函数式、更紧凑适合熟悉高阶函数风格的读者。工程实践中可根据团队风格二选一二者都满足空对象返回 0的约束。深入原理Object.values 与对象遍历家族要真正吃透这道题需要理解Object.keys/Object.values/Object.entries这一族方法。配套章节 Object.keys, values, entries 对此有系统讲解方法返回内容示例user { name: John, age: 30 }Object.keys(obj)键数组[name, age]Object.values(obj)值数组[John, 30]Object.entries(obj)[key, value]对数组[[name,John], [age,30]]三个方法都返回真实数组因此可以直接配合for..of、数组解构、map、filter、reduce等工具使用。这一点与Map/Set的迭代器方法map.values()返回的是可迭代对象而非数组不同。调用语法的差异Object.values(obj) 而非 obj.values()与map.values()不同普通对象必须写成Object.values(obj)。原因在于灵活性对象是一切复杂结构的基础你完全可能自定义一个拥有data.values()方法的对象data此时Object.values(data)依然可用不会与自定义方法冲突。这是Object.*静态方法设计上的核心考量。符号属性被忽略和for..in一样Object.keys/values/entries会忽略以Symbol作为键的属性。这在多数场景下是便利的如果确实需要符号键需改用Object.getOwnPropertySymbols(obj)或使用能返回全部键的Reflect.ownKeys(obj)。这意味着在写sumSalaries时只有普通字符串键的数值属性会计入求和Symbol 键属性若存在会被自动跳过。应用场景从值遍历到对象变换理解Object.values之后很容易把它扩展到配套章节讲解的对象变换套路Object.entries取出[key, value]对数组 → 用数组方法如map变换 → 再用Object.fromEntries转回对象。例如把价格对象中每个值翻倍let prices { banana: 1, orange: 2, meat: 4, }; let doublePrices Object.fromEntries( Object.entries(prices).map(entry [entry[0], entry[1] * 2]) ); alert(doublePrices.meat); // 8sumSalaries正是这一族方法在只关心值、不关心键场景下的典型应用当聚合操作只依赖数值本身时Object.values是最匹配的入口。关联练习与扩展思考与本题同目录的另一个练习 Count properties 展示了同族方法的另一典型用法——统计对象属性个数function count(obj) { return Object.keys(obj).length; }两者的模式互为镜像一个用Object.values聚合数值一个用Object.keys统计数量。可见Object.keys/values/entries是日常操作普通对象时最高频的基础工具。值得思考的扩展点属性值非数字怎么办sum salary依赖运算符的隐式转换。若某个属性值是字符串会被拼接而非相加。生产代码中可先过滤或校验数据类型如Number(value)后再累加。继承属性Object.values只返回自身可枚举属性不包含原型链上的可枚举属性这与for..in会遍历原型链行为不同求和结果更可控。大对象性能Object.values需要先构建完整数组对超大对象存在一次性内存开销而for..in可以边遍历边累加。日常规模下差异可忽略可结合项目实际权衡。总结sumSalaries练习浓缩了三个核心知识点Object.values(obj)返回对象自身可枚举属性值的真实数组忽略 Symbol 键for..of遍历数组对值数组直接累加语义清晰空数组边界无论for..of循环不执行还是reduce依赖初始值0都能自然返回0。官方解法与测试源码分别位于 solution.md 和 _js.view/test.js配套理论章节为 Object.keys, values, entries。掌握这组方法后你就能用更少的代码、更少的出错机会完成对象值求和、统计、变换等日常聚合任务。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐用 Cursor 优化 Unity 开放世界 Draw Call从 3200 到 480 的 AI 协作实战用 Cursor 优化 Unity 开放世界 Draw Call从 3200 到 480 的 AI 协作实战 本文基于 GameDevMind 仓库中的 AI文档/教程前端JavaScript 对象属性求和实战从 for..in 到 Object.values 的薪资汇总JavaScript 对象属性求和实战从 for..in 到 Object.values 的薪资汇总 本篇文章围绕 JavaScript 教程中「对象属性求和文档/教程前端Modern JavaScript Tutorial 实战用 for..in 遍历 salaries 对象并完成属性求和Modern JavaScript Tutorial 实战用 for..in 遍历 salaries 对象并完成属性求和 本篇文章以 Modern JavaS文档/教程前端上一篇5个简单技巧用skills4技能库快速构建AI教学工具下一篇GraphRAG 从零到一CLI 快速上手索引与查询非结构化文本的完整实践创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表