扁平章节数据转树形结构技巧

本文讲解如何将扁平的章节数据转化为树形结构，解决数据展示层级关系的问题。 给定一个包含`level`（层级）、`content`（内容）和`url`（链接）字段的扁平数组，文章通过一个高效的JavaScript函数`createTreeByList`，利用栈数据结构，将扁平数据转换为嵌套的树形结构，每个父节点包含其子节点，层级关系清晰可见。 文中提供了详细的代码示例、输入数据和预期输出结果，方便读者理解和实践。 学习本文，您可以轻松掌握扁平数据到树形结构的转换方法，提升数据处理效率。

本文介绍如何将扁平的章节数据转换为嵌套的树形结构。假设我们有一个扁平数组，每个对象包含 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'
}];

目标嵌套结构：

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 用于格式化输出，方便查看结果。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。