es6遍历树结构并判断_使用递归遍历并转换树形数据（以 TypeScript 为例）

一个朋友问我应该怎么从一个树的 JSON 数组生成 HTML，使用

• 和
• 来构建页面元素。于是我简单的画了个树型结构图

  然后写了对应的模拟数据(JavaScript 对象)

  const data = {

  name: "A",

  nodes: [

  { name: "B", nodes: [{ name: "F" }] },

  { name: "C" },

  {

  name: "D",

  nodes: [

  { name: "G" },

  { name: "H" },

  { name: "I", nodes: [{ name: "J" }, { name: "K" }] }

  ]

  },

  { name: "E" }

  ]

  };

  最后写了一个递归，生成了 HTML 的树型结构。原本是用 JavaScript ES6 写的，为了表明数据结构，这里改用 TypeScript 来写：

  interface INode {

  name: string;

  nodes?: INode[];

  }

  function makeTree(roots: INode[]): JQuery {

  function makeNode(node: INode): JQuery {

  const $div = $("

  ").text(node.name || "");

  const $li = $("

• ").append($div);

  if (node.nodes && node.nodes.length) {

  $li.append(makeNodeList(node.nodes));

  }

  return $li;

  }

  function makeNodeList(nodes: INode[]): JQuery {

  return nodes

  .map(child => makeNode(child))

  .reduce(($ul, $li) => {

  return $ul.append($li);

  }, $("

  • "));

  }

  return makeNodeList(roots);

  }

  效果还是蛮不错的

  然后朋友说没看明白，好吧，那我从头讲起

  遍历方法

  树形数据的遍历有两