如何在JavaScript中遍历含嵌套子对象的数组并打印？

对于这种包含多层子对象的数组，普通for循环只能处理表层和直接子对象，要遍历所有层级（包括孙对象及更深），可以用递归或者**迭代（栈/队列）**的方式实现，下面分别给出具体代码：

方法一：递归遍历 #

递归是最直观的方式，遍历每个对象时先处理当前对象，再递归处理它的children数组（如果存在）：

const data = [
  {
    "id": "1",
    "name": "sara",
    "children": [
      {
        "id": "2",
        "name": "dian"
      },
      {
        "id": "3",
        "name": "michael",
        "children": [
          {
            "id": "4",
            "name": "dkny"
          },
          {
            "id": "5",
            "name": "Anne"
          }
        ]
      }
    ]
  },
  {
    "id": "6",
    "name": "Tommy"
  },
  {
    "id": "7",
    "name": "danken",
    "children": [
      {
        "id": "8",
        "name": "biria"
      }
    ]
  }
];

function traverseItems(items) {
  items.forEach(item => {
    // 打印当前对象信息，可根据需求调整输出格式
    console.log(`id: ${item.id}, name: ${item.name}`);
    // 存在子数组则递归遍历
    if (item.children && Array.isArray(item.children)) {
      traverseItems(item.children);
    }
  });
}

// 启动遍历
traverseItems(data);

这段代码会按层级顺序打印所有对象，从表层到最深层的后代对象都不会遗漏。

方法二：迭代遍历（栈/队列实现） #

如果数组层级极深，递归可能触发栈溢出，这时可以用迭代方式，借助栈或队列处理所有层级：

基于栈的实现（后进先出） #

function traverseItemsIteratively(items) {
  const stack = [...items];
  
  while (stack.length > 0) {
    const item = stack.pop();
    console.log(`id: ${item.id}, name: ${item.name}`);
    // 将子对象压入栈，继续处理
    if (item.children && Array.isArray(item.children)) {
      stack.push(...item.children);
    }
  }
}

traverseItemsIteratively(data);

基于队列的实现（先进先出，保持原层级顺序） #

如果需要和递归完全一致的遍历顺序（从左到右），可以用队列替代栈：

function traverseItemsQueue(items) {
  const queue = [...items];
  
  while (queue.length > 0) {
    const item = queue.shift();
    console.log(`id: ${item.id}, name: ${item.name}`);
    if (item.children && Array.isArray(item.children)) {
      queue.push(...item.children);
    }
  }
}

traverseItemsQueue(data);

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