
本文讲解如何正确遍历 javascript 中的嵌套对象(如用户-属性映射结构),提取每个子对象中特定数值属性(如 `numberofdrinks`)并计算其总和,避免常见索引错误。
在处理类似 { 'Alice': { count: 5 }, 'Bob': { count: 3 } } 这样的键值对结构时,一个典型误区是误将 Object.values() 返回的对象数组当作原始键名来访问外层对象(如 drunks[drink]),而实际上 drink 已经是 { numberOfDrinks: 10 } 这样的对象,直接访问其属性即可。
以下为修正后的完整实现:
const drunks = {
'Cheryl': { numberOfDrinks: 10 },
'Jeremy': { numberOfDrinks: 4 },
'Gordon': { numberOfDrinks: 2 },
'Laura': { numberOfDrinks: 6 }
};
let totalDrunks = 0;
const numberOfDrunks = Object.values(drunks);
numberOfDrunks.forEach(drink => {
totalDrunks += drink.numberOfDrinks; // ✅ 正确:直接读取子对象属性
});
console.log(totalDrunks); // 输出:22✅ 关键点说明:
- Object.values(drunks) 返回的是 [ { numberOfDrinks: 10 }, { numberOfDrinks: 4 }, ... ] —— 一个纯对象数组;
- drink 是循环中的单个对象(如 { numberOfDrinks: 10 }),因此应使用 drink.numberOfDrinks 获取数值;
- 原代码 drunks[drink] 等价于 drunks[{ numberOfDrinks: 10 }],因对象无法作为有效属性键,结果为 undefined,导致累加 NaN。
? 更现代、更简洁的写法(推荐):
const totalDrunks = Object.values(drunks) .reduce((sum, person) => sum + person.numberOfDrinks, 0);
⚠️ 注意事项:
- 若数据中可能存在缺失或非数字值(如 numberOfDrinks: null 或 undefined),建议增加类型防护:
sum + (Number(person.numberOfDrinks) || 0)
- 对于深层嵌套(如 person.stats.drinks.total),可结合递归或 Lodash 的 get() 安全取值。
掌握 Object.values() 与属性链访问的配合,是高效处理配置型、用户型嵌套数据的基础技能。










