列表和树结构相互转换

180 阅读1分钟

扁平化数组转为树

列表结构通常是在节点信息中给定了父级元素的id,然后通过这个依赖关系将列表转换为树形结构,列表结构是类似于

let arr = [
    {id: 1, name: '部门1', pid: 0},
    {id: 2, name: '部门2', pid: 1},
    {id: 3, name: '部门3', pid: 1},
    {id: 4, name: '部门4', pid: 3},
    {id: 5, name: '部门5', pid: 4},
]
function listToTree(list, pid = 0) {
  return list
    .filter((item) => item.pid === pid)
    .map((item) => ({ ...item, children: listToTree(list, item.id) }));
}

function listToTree2(list) {
  let info = list.reduce(
    (map, node) => ((map[node.id] = node), (node.children = []), map),
    {}
  );
  return list.filter((node) => {
    info[node.pid] && info[node.pid].children.push(node);
    return !node.pid;
  });
}

树结构转化为扁平化数组

let treeData = [
  {
    id: 1,
    name: "部门1",
    pid: 0,
    children: [
      { id: 2, name: "部门2", pid: 1, children: [] },
      {
        id: 3,
        name: "部门3",
        pid: 1,
        children: [
          {
            id: 4,
            name: "部门4",
            pid: 3,
            children: [{ id: 5, name: "部门5", pid: 4, children: [] }],
          },
        ],
      },
    ],
  },
]

function treeToList(tree, arr = []) {
  tree.forEach((item) => {
    const { children } = item;
    if (children) {
      delete item.children;
    }
    if (children.length) {
      arr.push(item);
      return treeToList(children, arr);
    }
    arr.push(item);
  });
  return arr;
}

//递归实现
function treeToList2(tree, result = [], level = 0) {
  tree.forEach((node) => {
    result.push(node);
    node.level = level + 1;
    node.children && treeToList2(node.children, result, level + 1);
  });
  return result;
}