带层级的数组和树的转换函数

  const familyArray = [
    { id: "01", name: "贾母", pId: "-1" },
    { id: "02", name: "贾赦", pId: "01" },
    { id: "03", name: "贾政", pId: "01" },
    { id: "04", name: "贾敏", pId: "01" },
    { id: "05", name: "贾琏", pId: "02" },
    { id: "06", name: "贾迎春", pId: "02" },
    { id: "07", name: "贾珠", pId: "03" },
    { id: "08", name: "贾宝玉", pId: "03" },
    { id: "09", name: "贾元春", pId: "03" },
    { id: "10", name: "贾探春", pId: "03" },
    { id: "11", name: "林黛玉", pId: "04" },
    { id: "12", name: "巧姐", pId: "05" },
    { id: "13", name: "贾兰", pId: "07" },
  ];

  const familyTree = [
    {
      "id": "01",
      "name": "贾母",
      "pId": "-1",
      "children": [
        {
          "id": "02",
          "name": "贾赦",
          "pId": "01",
          "children": [
            {
              "id": "05",
              "name": "贾琏",
              "pId": "02",
              "children": [
                {
                  "id": "12",
                  "name": "巧姐",
                  "pId": "05",
                  "children": []
                }]
            },
            {
              "id": "06",
              "name": "贾迎春",
              "pId": "02",
              "children": []
            }]
        },
        {
          "id": "03",
          "name": "贾政",
          "pId": "01",
          "children": [
            {
              "id": "07",
              "name": "贾珠",
              "pId": "03",
              "children": [
                {
                  "id": "13",
                  "name": "贾兰",
                  "pId": "07",
                  "children": []
                }]
            },
            {
              "id": "08",
              "name": "贾宝玉",
              "pId": "03",
              "children": []
            },
            {
              "id": "09",
              "name": "贾元春",
              "pId": "03",
              "children": []
            },
            {
              "id": "10",
              "name": "贾探春",
              "pId": "03",
              "children": []
            }]
        },
        {
          "id": "04",
          "name": "贾敏",
          "pId": "01",
          "children": [
            {
              "id": "11",
              "name": "林黛玉",
              "pId": "04",
              "children": []
            }]
        }]
    }]
  
  // 把带层级关系的数组转换为树  
  const ArrayToTree = (familyArray) => {
    // 对象转成树的函数
    const objToTree = (familyObj, pId = '-1') => {
      const familyTree = familyObj[pId] ||[];
      familyTree.forEach(
        (item) => {
          // console.log("item.pId", item)
          item.children = objToTree(familyObj, item.id)
        }
      )
      return familyTree;
    };

    // 数组遍历转成对象
    const familyObj = {};
    familyArray.forEach(
      (item) => {
        if (!familyObj[item.pId]) {
          familyObj[item.pId] = []
        }
        familyObj[item.pId].push(item);
      }
    )
    // console.log("familyObj", familyObj)

    //  // 调用对象转成树的函数
    const familyTree = objToTree(familyObj)

    // 打印树
    // console.log("familyTree", familyTree)
    return familyTree;
  };

  const familyArrayCopy=JSON.parse(JSON.stringify(familyArray))
  const newFamilyTree=ArrayToTree(familyArrayCopy);
  console.log("familyArray",familyArray);
  console.log("newFamilyTree",newFamilyTree);

  // 把树转换为带层级关系的数组
  const TreeToArray=(familyTree,familyArray=[])=>{
    if(familyTree.length<1){ return familyArray};
    for(let i=0;i<familyTree.length;i+=1){
      const familyTreeItem=familyTree[i];
      const newFamilyTree=familyTreeItem.children || [];
      delete familyTreeItem.children;
      familyArray.push(familyTreeItem);
      TreeToArray(newFamilyTree,familyArray)
    }
    return familyArray;
  };
  const familyTreeCopy=JSON.parse(JSON.stringify(familyTree))
  const newFamilyArray=TreeToArray(familyTreeCopy)
  console.log("familyTree",familyTree);
  console.log("newFamilyArray",newFamilyArray);
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容