本文详解在 javascript 中实现标签计数功能时常见的对象引用错误，重点解决因误访问嵌套属性导致 counter 变为 nan 的问题，并提供健壮、可维护的代码实现方案。
本文详解在 javascript 中实现标签计数功能时常见的对象引用错误，重点解决因误访问嵌套属性导致 counter 变为 nan 的问题，并提供健壮、可维护的代码实现方案。
在处理标签（tag）频次统计时，一个典型需求是：遍历一组对象（如食谱），对每个 recipe.tag 进行计数——若该 tag 尚未出现，则初始化为 { tag, counter: 1 }；若已存在，则仅将其 counter 值加 1。上述代码逻辑看似合理，但关键错误在于：
// ❌ 错误写法（导致 NaN） existingTag.tag.counter += 1; console.log(existingTag.tag.counter);
此处 existingTag 是 tagCounter.find(...) 返回的对象，其结构为 { tag: ..., counter: ... }，tag 字段本身是原始值（如字符串）或简单对象，不包含 .counter 属性。因此 existingTag.tag.counter 实际访问的是 undefined.counter，而 undefined + 1 结果为 NaN。
✅ 正确做法是直接操作 existingTag.counter：
/* Count appearance of every tag */
let tagCounter = [];
allRecipes.forEach(recipe => {
const tag = recipe.tag;
const existingTag = tagCounter.find(item =>
JSON.stringify(item.tag) === JSON.stringify(tag)
);
if (existingTag) {
// ✅ 正确：直接递增 existingTag 的 counter 属性
existingTag.counter += 1;
console.log(`Tag "${tag}" now appears ${existingTag.counter} times`);
} else {
// ✅ 正确：推入新条目，结构为 { tag, counter: 1 }
tagCounter.push({ tag, counter: 1 });
console.log(`New tag "${tag}" added with count 1`);
}
});
console.log("Final tagCounter:", tagCounter);
res.status(200).json({ resultArrayUniqueTags, tagCounter });
⚠️ 注意事项：
- 避免深层嵌套误读：existingTag.tag.counter 暗示 tag 是一个对象且拥有 counter 属性，但实际 tag 是原始值（如 "Breakfast"）或独立对象，counter 属于外层对象。
- 类型安全建议：若 tag 可能为复杂对象（如 { name: "Breakfast", category: "meal" }），使用 JSON.stringify() 比较可行，但性能较低；更优解是定义唯一键（如 item.tagKey = JSON.stringify(tag)）或使用 Map 提升查找效率。
- 防御性编程：可在递增前添加校验，如 if (typeof existingTag.counter === 'number') { existingTag.counter += 1; }，增强鲁棒性。
总结：核心在于理解 find() 返回的对象结构——counter 是该对象的直系属性，而非其 tag 子属性。修正这一引用路径后，计数逻辑即可稳定运行，输出符合预期的整数结果。
