Javascript 基于leftIndent的展平数组生成树结构

需要使树结构从基于

leftIndent

的展平数组到树。 它需要使树状文件夹的视图与库中类似。 增加了理解任务的屏幕截图

const from = [
  {
    id: 1,
    data: {
      leftIndent: 0,
      text: 'L',
    },
  },
  {
    id: 2,
    data: {
      leftIndent: 18,
      text: 'M',
    },
  },
  {
    id: 3,
    data: {
      leftIndent: 0,
      text: 'X',
    },
  },
  {
    id: 4,
    data: {
      leftIndent: 18,
      text: 'Y',
    },
  },
  {
    id: 5,
    data: {
      leftIndent: 36,
      text: 'Z',
    },
  },
  {
    id: 6,
    data: {
      leftIndent: 36,
      text: 'S',
    },
  },
];

const to = [
  {
    id: 0,
    data: {
      leftIndent: 0,
      text: 'L',
    },
    children: [
      {
        id: 2,
        data: {
          leftIndent: 18,
          text: 'M',
        },
      },
    ],
  },
  {
    id: 3,
    data: {
      leftIndent: 0,
      text: 'X',
    },
    children: [
      {
        id: 4,
        data: {
          leftIndent: 18,
          text: 'Y',
        },
        children: [
          {
            id: 5,
            data: {
              leftIndent: 36,
              text: 'Z',
            },
          },
          {
            id: 6,
            data: {
              leftIndent: 36,
              text: 'S',
            },
          },
        ],
      },
    ],
  },
];

constmaketree=（分支）=>{
功能顶级（数据）{
返回data.filter（（node）=>！node.parentId）；
}
函数遍历（数据，父ID）{
const children=data.filter（（branch）=>branch.parentId===parentId）；
children.forEach（（child）=>{
child.children=遍历（数据，child.id）；
});
返回儿童；
}
返回顶级（分支）.map（（分支）=>{
branch.children=遍历（branchs，branch.id）；
返回分支；
});
};
常量makeFlatterNumberingArray=（段落）=>{
常量resultar=[]；
设levelData=null；
让route=''；
//遍历所有数组
for（设i=0；i=0；j--）{
const prev=resultar[j]；
//我们需要检查当前段落和上一段，如果当前！==上一段需要看得更高（向后循环）
if（curr.data.leftIndent>prev.data.leftIndent）{
级别=上一级+1；
parentId=prev.id；
打破
}
}
levelData={
id:curr.id，
数据：当前数据，
儿童：[]，
父ID，
水平
};
结果推送（levelData）；
}
返回结果器；
};
常量段落=MakeFlatterNumberingArray（数据）；
常量树=生成树（段落）；

      const makeTree = (branches) => {
    function topLevel(data) {
      return data.filter((node) => !node.parentId);
    }

    function traverse(data, parentId) {
      const children = data.filter((branch) => branch.parentId === parentId);
      children.forEach((child) => {
        child.children = traverse(data, child.id);
      });
      return children;
    }

    return topLevel(branches).map((branch) => {
      branch.children = traverse(branches, branch.id);
      return branch;
    });
  };

  const makeFlattenNumberingArray = (paragraphs) => {
    const resultArr = [];
    let levelData = null;
    let route = '';

    // iterate over all array
    for (let i = 0; i < paragraphs.length; i++) {
      const curr = paragraphs[i];
      let level = 0; // reset level to `0`. Top level.
      let parentId = null;
      // this loop need only for finding deep level
      for (let j = i - 1; j >= 0; j--) {
        const prev = resultArr[j];
        // we need check current paragraph with previous, if current !== previous paragraph need to look higher(backward loop)
        if (curr.data.leftIndent > prev.data.leftIndent) {
          level = prev.level + 1;
          parentId = prev.id;
          break;
        }
      }

      levelData = {
        id: curr.id,
        data: curr.data,
        children: [],
        parentId,
        level
      };

      resultArr.push(levelData);
    }
    return resultArr;
  };

const paragraphs = makeFlattenNumberingArray(data);

const tree = makeTree(paragraphs);