js 树形数组转一维数组，或一维数组转树形数组

树形数组转一维数组

要将一棵树结构（包含 children 属性）拍平为一个一维数组，可以使用递归或迭代的方法。下面是两种常见的实现方式：

1. 使用递归

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

  tree.forEach(node => {
    result.push(node);
    if (node.children) {
      result = result.concat(flattenTree(node.children));
    }
  });

  return result;
}

// 示例
const tree = [
  {
    id: 1,
    name: "Node 1",
    children: [
      { id: 2, name: "Node 1.1" },
      { id: 3, name: "Node 1.2", children: [{ id: 4, name: "Node 1.2.1" }] }
    ]
  },
  { id: 5, name: "Node 2" }
];

const flatTree = flattenTree(tree);
console.log(flatTree);

2. 使用迭代（栈）

function flattenTree(tree) {
  const result = [];
  const stack = [...tree];

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

  return result;
}

// 示例
const tree = [
  {
    id: 1,
    name: "Node 1",
    children: [
      { id: 2, name: "Node 1.1" },
      { id: 3, name: "Node 1.2", children: [{ id: 4, name: "Node 1.2.1" }] }
    ]
  },
  { id: 5, name: "Node 2" }
];

const flatTree = flattenTree(tree);
console.log(flatTree);

结果输出

无论使用递归还是迭代，输出的结果都是一个包含所有节点的扁平数组：

[
  { id: 1, name: "Node 1", children: [...] },
  { id: 2, name: "Node 1.1" },
  { id: 3, name: "Node 1.2", children: [...] },
  { id: 4, name: "Node 1.2.1" },
  { id: 5, name: "Node 2" }
]

小结

• 递归 方法简单直观，易于理解。
• 迭代 方法避免了潜在的栈溢出问题，更适合处理较深的树结构。

一维数组转树形数组

要将一个一维数组转换为树形结构，您可以根据每个节点的 pid（父节点 ID）和 id 来构建树形关系。下面是一个简单的实现示例：

实现方法

function arrayToTree(data) {
  const map = {};
  const tree = [];

  // 创建一个映射，方便查找节点
  data.forEach(item => {
    map[item.id] = { ...item, children: [] };
  });

  // 构建树形结构
  data.forEach(item => {
    if (item.pid) {
      map[item.pid].children.push(map[item.id]);
    } else {
      tree.push(map[item.id]);
    }
  });

  return tree;
}

// 示例
const data = [
  { id: 1, name: "Node 1", pid: null },
  { id: 2, name: "Node 1.1", pid: 1 },
  { id: 3, name: "Node 1.2", pid: 1 },
  { id: 4, name: "Node 1.2.1", pid: 3 },
  { id: 5, name: "Node 2", pid: null }
];

const tree = arrayToTree(data);
console.log(JSON.stringify(tree, null, 2));

输出结果

上面的代码将输出以下树形结构：

[
  {
    "id": 1,
    "name": "Node 1",
    "pid": null,
    "children": [
      {
        "id": 2,
        "name": "Node 1.1",
        "pid": 1,
        "children": []
      },
      {
        "id": 3,
        "name": "Node 1.2",
        "pid": 1,
        "children": [
          {
            "id": 4,
            "name": "Node 1.2.1",
            "pid": 3,
            "children": []
          }
        ]
      }
    ]
  },
  {
    "id": 5,
    "name": "Node 2",
    "pid": null,
    "children": []
  }
]

代码解释

1. 创建映射：首先遍历数组，创建一个以 id 为键的映射，使得可以快速查找每个节点。
2. 构建树：再次遍历数组，将每个节点根据其 pid 放入其父节点的 children 数组中；如果节点没有父节点（pid 为 null），则将其推入根节点数组。

这种方法效率较高，时间复杂度为 O(n)，适合处理较大的数组。