JavaScript 中嵌套数据结构的扁平化遍历与属性标记教程-js教程-PHP中文网

JavaScript 中嵌套数据结构的扁平化遍历与属性标记教程

本文讲解如何正确遍历混合结构（含顶层对象和嵌套 items 数组）的数据，避免 TypeError: iterator method is not callable 错误，并提供简洁、健壮的解决方案。

本文讲解如何正确遍历混合结构（含顶层对象和嵌套 `items` 数组）的数据，避免 `typeerror: iterator method is not callable` 错误，并提供简洁、健壮的解决方案。

在实际开发中，我们常遇到“扁平+分组”混合的数据结构：一部分元素是普通对象（如 {id: "5"}），另一部分是带 items 字段的“节”对象（如 {title: "Section 1", items: [...]}）。此时若错误地对单个普通对象使用 for...of 循环（如 for (const item of section)），JavaScript 会尝试调用该对象的 Symbol.iterator 方法——而普通对象默认不可迭代，从而抛出 TypeError: iterator method is not callable。

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

} else {
  for (const item of section) { // ❌ 错误：section 是普通对象，不能直接 for...of
    item.isFavourite = favourites.includes(item.id);
  }
}

section 此时是一个类似 {id: "5"} 的 plain object，不支持迭代；应直接对其设置属性，而非循环。

✅ 正确做法是：仅对 items 数组迭代，对普通对象则直接处理自身：

Java 接口排错助手

在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。

下载

function addIsFavourite(favourites = [], sections) {
  for (const section of sections) {
    if ("items" in section) {
      // 处理嵌套 items 数组
      for (const item of section.items) {
        item.isFavourite = favourites.includes(item.id);
      }
    } else {
      // 直接处理普通对象（非数组），无需循环
      section.isFavourite = favourites.includes(section.id);
    }
  }
  return sections;
}

更优雅、函数式风格的解法是先扁平化数据，再统一处理。利用 flatMap + 空值合并操作符 ?? 可安全提取所有可遍历项：

const data = [
  { title: "Section 1", items: [{ id: "1" }, { id: "2" }] },
  { title: "Section 2", items: [{ id: "3" }, { id: "4" }] },
  { id: "5" },
  { id: "6" },
  { id: "7" }
];

const favourites = ["1", "6"];

// 扁平化：每个元素 → 若有 items 则展开 items，否则保留自身
const allItems = data.flatMap(item => item.items ?? [item]);

// 统一标记 isFavourite
allItems.forEach(item => {
  item.isFavourite = favourites.includes(item.id);
});

console.log(data);
// 输出中，{id:"1"} 和 {id:"6"} 的 isFavourite 均为 true

⚠️ 注意事项：

flatMap(x => x.items ?? x) 要求 x.items 为数组或 null/undefined；若 items 是其他类型（如字符串、数字），需改用 Array.isArray(x.items) ? x.items : [x] 更严谨。
此方案仅适用于两层结构（顶层 + 一层嵌套）。如需支持任意深度嵌套，应改用递归或栈式遍历。
flatMap 返回新数组，但本例中我们直接修改原对象属性，因此仍作用于原始 data（注意这是副作用操作，如需不可变更新，应深拷贝后再处理）。