线性结构与树形结构相互转换(ES6实现)

前言

  当树形结构的层级愈来愈深时,操做某一节点会变得愈来愈费劲,维护成本不断增长。因此线性结构与树形的相互转换变得异常重要!node

  首先,咱们约定树形结构以下:数组

node = {
  id: number,  // 数值
parentId: number, // 数值 name: string,
children: [] || null, // 用数组的方式保存子节点,适合更多业务场景 }

   线性结构:spa

list = [
   { id: number, parentId: number, name: string }, 
   { id: number, parentId: number, name: string },
];

特殊状况  

  上面的树形结构并非很完美,当遇到菜单或者分类等业务场景时,每一个顶级节点的parentId约定为0,当存在多个顶级节点,显得不是一个完整的树。因此在这类特殊状况下,咱们须要构造一个顶级节点。将菜单或者分类的原有顶级节点存储至该节点的children中。 因此最后约定顶级节点以下。code

root = null || {
  id: 0,
  parentId: null,
  children: [node1, node2, ...],  
}

线性结构与树形结构相互转换

  线性转树形:blog

function listConvertTree(list) {
  let root = null;
  if (list && list.length) {
    root = { id: 0, parentId: null, children: [] };
    const group = {};
    for (let index = 0; index < list.length; index += 1) {
      if (list[index].parentId !== null && list[index].parentId !== undefined) {
        if (!group[list[index].parentId]) {
          group[list[index].parentId] = [];
        }
        group[list[index].parentId].push(list[index]);
      }
    }
    const queue = [];
    queue.push(root);
    while (queue.length) {
      const node = queue.shift();
      node.children = group[node.id] && group[node.id].length ? group[node.id] : null;
      if (node.children) {
        queue.push(...node.children);
      }
    }
  }
  return root;
}

  树形转线性:string

function treeConvertList(root) {
  const list = [];
  if (root) {
    const Root = JSON.parse(JSON.stringify(root));
    const queue = [];
    queue.push(Root);
    while (queue.length) {
      const node = queue.shift();
      if (node.children && node.children.length) {
        queue.push(...node.children);
      }
      delete node.children;
      if (node.parentId !== null && node.parentId !== undefined) {
        list.push(node);
      }
    }
  }
  return list;
}
相关文章
相关标签/搜索