Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

扁平化数组与树形结构的互转 #65

Open
18888628835 opened this issue Feb 4, 2022 · 0 comments
Open

扁平化数组与树形结构的互转 #65

18888628835 opened this issue Feb 4, 2022 · 0 comments

Comments

@18888628835
Copy link
Owner

18888628835 commented Feb 4, 2022

1.扁平化数组转树形结构

答案:

const data = [
  { 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 },
  { id: 6, name: "部门5", pid: 0 },
  { id: 7, name: "部门5", pid: 6 },
  { id: 8, name: "部门5", pid: 9 },
  { id: 9, name: "部门5", pid: 7 }
];
/* 要求结果
      [
        {
          id: 1,
          name: "部门1",
          pid: 0,
          children: [
            {
              id: 2,
              name: "部门2",
              pid: 1,
              children: []
            },
            {
              id: 3,
              name: "部门3",
              pid: 1,
              children: [
                //  ,,,
              ]
            }
          ]
        }
      ];
*/
function arrayToTree(data) {
  let roots = [];
  let map = new Map();

  function setGroup(data) {
    for (let item of data) {
      if (item.pid === 0) {
        // roots中放置pid为0的根节点
        roots.push({ ...item, children: [] });
        continue;
      }
      // map将有pid的都按照pid分类,属性为pid,值为对应的children
      if (!map.has(item.pid)) {
        map.set(item.pid, []);
      }
      map.get(item.pid).push({ ...item, children: [] });
    }
  }
  setGroup(data);
  console.log(map);

  function setChildren(roots) {
    // 2.遍历根节点
    for (let root of roots) {
      // 3.匹配map的key(pid)与当前节点的id
      if (map.has(root.id)) {
        root.children = map.get(root.id);
      }
      // 4.如果当前节点有children,则将childen作为根节点,进入递归
      if (root.children.length > 0) {
        setChildren(root.children);
      }
    }
  }
  // 1.首先从roots根节点进入
  setChildren(roots);
  return roots;
}

let result = arrayToTree(data);
console.log(result);

2.树形结构转扁平化数组

      const data = [
        {
          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: []
                    }
                  ]
                }
              ]
            }
          ]
        }
      ];

      /* 要求结果
      [
        { 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 treeToFlat(data) {
  let root = [];
  for (let item of data) {
    let { children, ...rest } = item;
    root.push({ ...rest });
    if (item.children) {
      root = root.concat(treeToFlat(item.children));
    }
  }
  return root;
}
let result = treeToFlat(data);
console.log(result);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant