如何遍历嵌套对象数组？这类嵌套待办列表是否有更优数据结构表示方法？

你给出的嵌套待办列表属于典型的不定深度树结构，最常用的遍历方式是递归实现，仅需要注意你的示例数据存在子列表键名不统一的问题（混用了subList和itemList两个键），遍历逻辑里可以做兼容处理：

// 递归遍历实现，level参数可选，用于控制层级缩进展示
function traverseTodo(list, level = 0) {
  const indent = '  '.repeat(level)
  for (const item of list) {
    // 处理字符串类型的待办项
    if (typeof item === 'string') {
      console.log(`${indent}- ${item}`)
      continue
    }
    // 处理带子列表的对象类型待办项
    if (typeof item === 'object' && item.itemName) {
      console.log(`${indent}- ${item.itemName}`)
      // 兼容两种子列表键名，无子列表则默认空数组
      const subList = item.subList || item.itemList || []
      // 递归遍历子列表，层级+1
      traverseTodo(subList, level + 1)
    }
  }
}

// 调用时直接传入你的待办数组即可
traverseTodo(yourTodoArray)

如果担心层级过深导致栈溢出（正常待办场景几乎不会遇到），可以改用迭代方式实现深度优先遍历：

function traverseTodoIterative(list) {
  const stack = [[list, 0]]
  // 倒序遍历保证输出顺序和递归一致
  while (stack.length) {
    const [currentList, level] = stack.pop()
    const indent = '  '.repeat(level)
    for (let i = currentList.length - 1; i >= 0; i--) {
      const item = currentList[i]
      if (typeof item === 'string') {
        console.log(`${indent}- ${item}`)
        continue
      }
      if (typeof item === 'object' && item.itemName) {
        console.log(`${indent}- ${item.itemName}`)
        const subList = item.subList || item.itemList || []
        stack.push([subList, level + 1])
      }
    }
  }
}

你当前的结构存在两个明显的设计缺陷：

• 子列表键名不统一，遍历需要额外做兼容，容易触发隐藏bug
• 字符串类型和对象类型的待办项混用，后续如果要给简单待办加完成状态、截止时间、优先级等属性时，完全无法扩展

推荐统一使用全对象格式的树结构，字段规范如下：

• 所有待办项均为对象，必填name字段存储待办内容
• 统一使用subTodos作为子列表的键，无子列表则省略或赋值为空数组
• 可自由扩展completed（完成状态）、deadline（截止时间）等自定义属性

优化后的结构示例：

const optimizedTodoList = [
  { name: "Buy milk" },
  {
    name: "Buy Meat",
    subTodos: [
      { name: "Beef" },
      {
        name: "Fish",
        subTodos: [
          { name: "Tilapia" },
          { name: "Catfish" },
          { name: "Monkfish" },
          { name: "Halibut" }
        ]
      },
      { name: "Chicken" },
    ]
  },
  { name: "Buy cooking oil" },
  { name: "Buy baking soda" },
  {
    name: "Buy Vegetable",
    subTodos: [
      { name: "Cabbage" },
      { name: "Carrot" },
      { name: "Tomato" },
      { name: "Lettuce" }
    ]
  },
  { name: "Buy bread" }
]

该结构的优势十分明显：

• 字段完全统一，遍历逻辑不需要做任何类型兼容，代码更简洁可靠
• 扩展性极强，任何层级的待办项都可以随时新增自定义属性，无需修改解析逻辑
• 符合标准树结构设计规范，后续做节点增删改查、序列化存储、UI渲染的成本都极低

内容的提问来源于stack exchange，提问作者Romeo