0

0

如何遍历嵌套对象并累加指定属性的数值总和

聖光之護

聖光之護

发布时间:2026-02-06 19:22:18

|

447人浏览过

|

来源于php中文网

原创

如何遍历嵌套对象并累加指定属性的数值总和

本文讲解如何正确遍历 javascript 中的嵌套对象,提取每一项中特定键(如 `numberofdrinks`)的数值,并高效计算其总和,避免常见索引错误。

在处理类似 { 'Alice': { count: 5 }, 'Bob': { count: 3 } } 这样的键值对结构时,一个典型误区是混淆了 Object.values() 返回的值对象数组与原始对象的键名关系。例如,原代码中:

const drunks = {
  'Cheryl': { numberOfDrinks: 10 },
  'Jeremy': { numberOfDrinks: 4 },
  'Gordon': { numberOfDrinks: 2 },
  'Laura': { numberOfDrinks: 6 }
};

let totalDrunks = 0;
let numberOfDrunks = Object.values(drunks); // → [{numberOfDrinks:10}, {numberOfDrinks:4}, ...]

numberOfDrunks.forEach((drink) => {
  totalDrunks += drunks[drink]; // ❌ 错误!drink 是对象,不能作为 drunks 的 key
});

此处 drink 是一个对象(如 { numberOfDrinks: 10 }),而 drunks[drink] 实际上等价于 drunks[Object.prototype.toString.call(drink)],结果为 undefined,导致累加失败(最终 totalDrunks 为 NaN)。

✅ 正确做法是:直接访问当前值对象上的目标属性

numberOfDrunks.forEach((drink) => {
  totalDrunks += drink.numberOfDrinks; // ✅ 正确:从每个 value 对象中取属性
});
console.log(totalDrunks); // 22

更简洁、函数式风格的写法推荐使用 reduce:

闪光简历
闪光简历

一款专业的智能AI简历制作工具

下载
const totalDrunks = Object.values(drunks)
  .reduce((sum, person) => sum + person.numberOfDrinks, 0);
console.log(totalDrunks); // 22

⚠️ 注意事项:

  • 确保每个嵌套对象都存在目标属性(如 numberOfDrinks),否则需添加安全访问逻辑(如 person?.numberOfDrinks ?? 0);
  • 若对象结构更深(如 person.stats?.drinks?.count),建议结合可选链(?.)与空值合并(??)操作符提升健壮性;
  • 避免用 for...in 配合 hasOwnProperty——虽可行,但 Object.values() + 数组方法更语义清晰、性能更优。

总结:遍历嵌套对象求和的核心在于明确数据层级——Object.values() 提供的是“值的集合”,而非“键的集合”,应直接操作这些值对象本身,而非试图反向用它们去索引原对象。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
counta和count的区别
counta和count的区别

Count函数用于计算指定范围内数字的个数,而CountA函数用于计算指定范围内非空单元格的个数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

198

2023.11.20

undefined是什么
undefined是什么

undefined是代表一个值或变量不存在或未定义的状态。它可以作为默认值来判断一个变量是否已经被赋值,也可以用于设置默认参数值。尽管在不同的编程语言中,undefined可能具有不同的含义和用法,但理解undefined的概念可以帮助我们更好地理解和编写程序。本专题为大家提供undefined相关的各种文章、以及下载和课程。

5503

2023.07.31

网页undefined是什么意思
网页undefined是什么意思

网页undefined是指页面出现了未知错误的意思,提示undefined一般是在开发网站的时候定义不正确或是转换不正确,或是找不到定义才会提示undefined未定义这个错误。想了解更多的相关内容,可以阅读本专题下面的文章。

3127

2024.08.14

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容,阅读下面的文章了解更多详细内容。后续继续更新。

879

2025.12.25

Golang处理数据库错误教程合集
Golang处理数据库错误教程合集

本专题整合了Golang数据库错误处理方法、技巧、管理策略相关内容,阅读专题下面的文章了解更多详细内容。

0

2026.02.06

java多线程方法汇总
java多线程方法汇总

本专题整合了java多线程面试题、实现函数、执行并发相关内容,阅读专题下面的文章了解更多详细内容。

0

2026.02.06

1688阿里巴巴货源平台入口与批发采购指南
1688阿里巴巴货源平台入口与批发采购指南

本专题整理了1688阿里巴巴批发进货平台的最新入口地址与在线采购指南,帮助用户快速找到官方网站入口,了解如何进行批发采购、货源选择以及厂家直销等功能,提升采购效率与平台使用体验。

82

2026.02.06

快手网页版入口与电脑端使用指南 快手官方短视频观看入口
快手网页版入口与电脑端使用指南 快手官方短视频观看入口

本专题汇总了快手网页版的最新入口地址和电脑版使用方法,详细提供快手官网直接访问链接、网页端操作教程,以及如何无需下载安装直接观看短视频的方式,帮助用户轻松浏览和观看快手短视频内容。

15

2026.02.06

C# 多线程与异步编程
C# 多线程与异步编程

本专题深入讲解 C# 中多线程与异步编程的核心概念与实战技巧,包括线程池管理、Task 类的使用、async/await 异步编程模式、并发控制与线程同步、死锁与竞态条件的解决方案。通过实际项目,帮助开发者掌握 如何在 C# 中构建高并发、低延迟的异步系统,提升应用性能和响应速度。

9

2026.02.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.7万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.7万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号