本文讲解如何安全遍历包含“节（section）”和独立项的混合数据结构，解决因误对普通对象使用 for...of 导致的 TypeError: iterator method is not callable 错误，并提供简洁、可扩展的解决方案。
本文讲解如何安全遍历包含“节（section）”和独立项的混合数据结构，解决因误对普通对象使用 `for...of` 导致的 `typeerror: iterator method is not callable` 错误，并提供简洁、可扩展的解决方案。
在处理前端常见的混合数据结构（如既有带 items 字段的分组对象，又有直接表示条目的扁平对象）时，一个典型陷阱是：对非可迭代对象（如普通 {id: "5"} 对象）错误地使用 for...of 循环。这正是原代码中 Attempt 1 的 else 分支报错的根本原因：
} else {
// ❌ 错误：section 是一个普通对象（如 {id: "5"}），不可迭代！
for (const item of section) { // TypeError: iterator method is not callable
item.isFavourite = favourites.includes(item.id);
}
}
for...of 要求其右侧操作数必须具有可调用的 @@iterator 方法（即实现了迭代协议），而普通对象默认不满足该条件——因此抛出 TypeError。
✅ 正确做法是：在 else 分支中，section 本身就是一个待处理的条目，应直接为其添加 isFavourite 属性：
function addIsFavourite(favourites = [], sections) {
for (const section of sections) {
if ("items" in section) {
// ✅ section 是分组对象，遍历其 items 数组
for (const item of section.items) {
item.isFavourite = favourites.includes(item.id);
}
} else {
// ✅ section 就是单个条目，直接设置属性
section.isFavourite = favourites.includes(section.id);
}
}
return sections;
}
该方案逻辑清晰、无副作用，且兼容任意深度的混合结构（只要嵌套层级仅限“节→条目”两级）。
? 更优雅的函数式写法（推荐用于简单场景）：
利用 flatMap() 统一展平数据，再批量处理：
function addIsFavourite(favourites = [], sections) {
// 将 sections 展平为所有底层条目数组：[...section.items, ..., {id:"5"}, ...]
const allItems = sections.flatMap(section => section.items ?? [section]);
// 为每个条目设置 isFavourite
allItems.forEach(item => {
item.isFavourite = favourites.includes(item.id);
});
return sections;
}
⚠️ 注意事项：
section.items ?? [section]确保当items不存在或为null/undefined时，回退为包裹section自身的单元素数组；flatMap返回新数组，但forEach直接修改原对象属性，因此无需返回新数据结构；- 此方法不支持三级及以上嵌套（如
section.items[i].items）。若需通用嵌套处理，请改用递归或栈式遍历。
✅ 最终验证示例：
const data = [
{title: "Section 1", items: [{id: "1"}, {id: "2"}]},
{title: "Section 2", items: [{id: "3"}, {id: "4"}]},
{id: "5"},
{id: "6"},
{id: "7"},
];
addIsFavourite(["1", "6"], data);
console.log(data);
// 输出中：{id:"1"}.isFavourite === true，{id:"6"}.isFavourite === true，其余为 false
掌握对象可迭代性边界、善用 ?? 和 flatMap，即可稳健处理混合数据结构，彻底规避 iterator method is not callable 类型错误。
