Skip to content

将具有父子关系的数据转换为树形结构的数组

Emmally edited this page Jan 22, 2021 · 1 revision
/**
 * 该方法用于将有父子关系的数组转换成树形结构的数组
 * 接收一个具有父子关系的数组作为参数
 * 返回一个树形结构的数组
 * @param {Array} data 需要处理的数据
*/
function translateDataToTree(data) {
  //没有父节点的数据
  let parents = data.filter((value) => value.parentId === 0);
  //有父节点的数据
  let children = data.filter((value) => value.parentId !== 0);
  //定义转换方法的具体实现
  let translator = (parents, children) => {
    //遍历父节点数据
    parents.forEach((parent) => {
      //遍历子节点数据
      children.forEach((child, index) => {
        //找到父节点对应的一个子节点
        if (child.parentId === parent.id) {
          //对子节点数据进行深复制
          let temp = JSON.parse(JSON.stringify(children));
          //让当前子节点从temp中移除,temp作为新的子节点数据,这里是为了让递归时,子节点的遍历次数更少,如果父子关系的层级越多,越有利
          temp.splice(index, 1);
          //让当前子节点作为唯一的父节点,去递归查找其对应的子节点
          translator([child], temp);
          //把找到子节点放入父节点的children属性中
          typeof parent.children !== "undefined"
            ? parent.children.push(child)
            : (parent.children = [child]);
        }
      });
    });
  };
  //调用转换方法
  translator(parents, children);
  //返回最终的结果
  return parents;
}

转换前数据:

[
    {
        "id":1,
        "name":"一级",
        "parentId":0
    },
    {
        "id":2,
        "name":"二级",
        "parentId":1
    },
    {
        "id":3,
        "name":"三级",
        "parentId":2
    }
]

转换后数据:

[
    {
        "id":1,
        "name":"一级",
        "parentId":0,
        "children":[
            {
                "id":2,
                "name":"二级",
                "parentId":1,
                "children":[
                    {
                        "id":3,
                        "name":"三级",
                        "parentId":2
                    }
                ]
            }
        ]
    }
]