JavaScript树形数据扁平化的三种实现方法(递归/迭代/flatMap)

const treeData = [
  {
    id: 1,
    name: "A",
    children: [
      {
        id: 2,
        name: "A-1",
        children: [
          { id: 3, name: "A-1-1" },
          { id: 4, name: "A-1-2" }
        ]
      },
      {
        id: 5,
        name: "A-2"
      }
    ]
  },
  {
    id: 6,
    name: "B"
  }
];

[
  { id: 1, name: "A" },
  { id: 2, name: "A-1" },
  { id: 3, name: "A-1-1" },
  { id: 4, name: "A-1-2" },
  { id: 5, name: "A-2" },
  { id: 6, name: "B" }
]

function treeToArray(tree) {
  let result = [];

  function traverse(nodeList) {
    for (const node of nodeList) {
      // 拷贝当前节点（防止修改原数据）
      const { children, ...rest } = node;
      result.push(rest);

      // 如果有子节点，递归处理
      if (children && children.length) {
        traverse(children);
      }
    }
  }

  traverse(tree);
  return result;
}

const flatArray = treeToArray(treeData);
console.log(flatArray);

[
  { id: 1, name: 'A' },
  { id: 2, name: 'A-1' },
  { id: 3, name: 'A-1-1' },
  { id: 4, name: 'A-1-2' },
  { id: 5, name: 'A-2' },
  { id: 6, name: 'B' }
]

function treeToArrayIterative(tree) {
  let result = [];
  let stack = [...tree]; // 先把根节点放进栈

  while (stack.length) {
    const node = stack.pop();
    const { children, ...rest } = node;
    result.push(rest);

    // 注意：这里用栈，所以先放子节点才能保证顺序
    if (children && children.length) {
      stack.push(...children);
    }
  }

  return result;
}

const flatArray2 = treeToArrayIterative(treeData);
console.log(flatArray2);

function treeToArrayFlatMap(tree) {
  return tree.flatMap(({ children, ...rest }) =>
    children ? [rest, ...treeToArrayFlatMap(children)] : [rest]
  );
}

console.log(treeToArrayFlatMap(treeData));