如何正确遍历混合嵌套与扁平结构的数据并避免 TypeError-js教程-PHP中文网

如何正确遍历混合嵌套与扁平结构的数据并避免 TypeError

本文讲解如何安全遍历包含“节（section）”和普通项的混合数据结构，解决因误将对象当作可迭代对象而引发的 TypeError: iterator method is not callable 错误，并提供简洁、健壮的 JavaScript 实现方案。

本文讲解如何安全遍历包含“节（section）”和普通项的混合数据结构，解决因误将对象当作可迭代对象而引发的 `typeerror: iterator method is not callable` 错误，并提供简洁、健壮的 javascript 实现方案。

在处理层级不统一的数据（如部分元素是含 items 数组的“节”，其余为直接项）时，常见错误是试图对单个普通对象（如 {id: "5"}）使用 for...of 循环——因为对象默认不可迭代，这会直接抛出 TypeError: iterator method is not callable。

问题根源在于 Attempt 1 的 else 分支：

} else {
  for (const item of section) { // ❌ section 是普通对象（如 {id: "5"}），不可迭代！
    item.isFavourite = favourites.includes(item.id);
  }
}

此处 section 实际是单个项对象（非数组），不能用 for...of 遍历。正确做法是直接操作该对象本身，而非尝试循环它。

✅ 正确修复方式（语义清晰、易于维护）：

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;
}

更优雅的函数式写法（推荐用于中等复杂度场景）：

const addIsFavourite = (favourites = [], sections) => {
  sections
    .flatMap(section => section.items ?? [section]) // 展平：有 items 则取 items 数组，否则包装为单元素数组
    .forEach(item => {
      item.isFavourite = favourites.includes(item.id);
    });
  return sections;
};

✅ 关键点：section.items ?? [section] 确保无论 section 是否含嵌套，都产出一个数组；flatMap 自动压平一层，最终得到所有待处理项的一维列表。

⚠️ 注意事项：

flatMap(x => x.items ?? x) 在原答案中存在隐患：若 x.items 为 undefined，?? x 会直接返回 x（即对象），而 flatMap 对非数组值会隐式调用 Array.from()，但普通对象无 [Symbol.iterator]，仍可能报错。因此应显式写为 x.items ?? [x]（如上所示），确保始终返回数组。
该方案仅支持两层结构（节 + 子项）。如需处理任意深度嵌套，应改用递归或栈式遍历。
原地修改对象时需注意数据不可变性要求；若需纯函数式，可先深拷贝 sections。