本文介绍如何将扁平的章节数据转换为嵌套的树形结构。假设我们有一个扁平数组，每个对象包含 level（层级）、content（内容）和 url（链接）字段，表示章节的层级、内容和 URL。我们需要将其转换为嵌套的树形结构，其中每个父节点包含其子节点，子节点的 level 值大于父节点。

原始数据结构：

const chapters = [{
  level: '1',
  content: '案例概况010000-170900',
  url: '案例概况010000-170900.html'
},{
  level: '2',
  content: '案例概况010100-170901',
  url: '案例概况010100-170901.html'
},{
  level: '2',
  content: '案例概况010200-170902',
  url: '案例概况010200-170902.html'
},{
  level: '3',
  content: '案例概况010201-170903',
  url: '案例概况010201-170903.html'
},{
  level: '1',
  content: '案例概况020000-170904',
  url: '案例概况020000-170904.html'
},{
  level: '1',
  content: '案例概况030000-170905',
  url: '案例概况030000-170905.html'
},{
  level: '2',
  content: '案例概况030100-170906',
  url: '案例概况030100-170906.html'
}];

目标嵌套结构：

Vectorizer.AI

Vectorizer.AI是一款AI图像与设计工具，AI一键将位图转换为矢量图片。

下载

const treeStructure = [{
  level: '1',
  content: '案例概况010000-170900',
  url: '案例概况010000-170900.html',
  childs: [{
    level: '2',
    content: '案例概况010100-170901',
    url: '案例概况010100-170901.html',
    childs: []
  },{
      level: '2',
      content: '案例概况010200-170902',
      url: '案例概况010200-170902.html',
    childs: [{
      level: '3',
      content: '案例概况010201-170903',
      url: '案例概况010201-170903.html'
    }]
  }]
},{
  level: '1',
  content: '案例概况020000-170904',
  url: '案例概况020000-170904.html',
  childs: []
},{
  level: '1',
  content: '案例概况030000-170905',
  url: '案例概况030000-170905.html',
  childs: [{
    level: '2',
    content: '案例概况030100-170906',
    url: '案例概况030100-170906.html'
  }]
}];

转换代码：

function createTreeByList(arr) {
  const tree = [];
  const stack = [];

  arr.forEach(item => {
    item.childs = []; // 初始化 childs 属性

    while (stack.length > 0 && +stack[stack.length - 1].level >= +item.level) {
      stack.pop();
    }

    if (stack.length === 0) {
      tree.push(item);
    } else {
      stack[stack.length - 1].childs.push(item);
    }
    stack.push(item);
  });

  return tree;
}

const tree = createTreeByList(chapters);
console.log(JSON.stringify(tree, null, 2)); // 输出树形结构

这段代码利用栈来跟踪父节点，高效地构建树形结构。 +item.level 将字符串类型的 level 转换为数字进行比较。 JSON.stringify 用于格式化输出，方便查看结果。