树结构之JavaScript

当我们需要在JavaScript中构建树形结构时，可以使用常见的方法如递归，或者使用专门用于构建树形结构的库，例如d3.js、jstree等库来构建。

在这里我们将讨论使用递归方式来构建树形结构的方法。

1.构建节点对象

首先我们需要构建一个节点对象，用来表示树中的一个节点。该节点应包含以下属性：

• value: 该节点的值
• children: 该节点所属的子节点，可以是一个包含节点对象的数组

例如，我们可以这样定义一个节点对象：

class TreeNode {
  constructor(value) {
    this.value = value;
    this.children = [];
  }
}

2.构建树形结构

有了节点对象后，我们就可以使用递归方式来构建树形结构了。通常情况下，我们会从整个树的根节点开始递归，依次向下遍历整棵树，直到构建完成。

在构建树形结构时，我们需要注意以下几点：

• 递归结束条件：遍历到叶子节点时，递归终止。
• 维护递归状态：使用递归函数参数来维护当前节点。
• 处理子节点：对于当前节点的每个子节点，递归调用构建树函数，将子节点作为参数传入。

例如，下面是一个完整的构建树形结构的函数：

function buildTree(arr) {
  // 构建根节点
  const root = new TreeNode(null);

  function build(node, arr) {
    for (let i = 0; i < arr.length; i++) {
      const child = new TreeNode(arr[i].value);
      node.children.push(child);
      if (Array.isArray(arr[i].children)) {
        // 递归处理子节点
        build(child, arr[i].children);
      }
    }
  }

  build(root, arr);
  return root.children;
}

3.使用示例一

const arr = [
  { value: 1, children: [{ value: 2 }, { value: 3 }] },
  {
    value: 4, children: [
      { value: 5, children: [{ value: 6 }] },
      { value: 7 }]
  },
];

const tree = buildTree(arr);

// 输出树形结构
console.log(tree)

运行结果：

[
  TreeNode {
    value: 1,
    children: [
      TreeNode { value: 2, children: [] },
      TreeNode { value: 3, children: [] }
    ]
  },
  TreeNode {
    value: 4,
    children: [
      TreeNode {
        value: 5,
        children: [ TreeNode { value: 6, children: [] } ]
      },
      TreeNode { value: 7, children: [] }
    ]
  }
]

4.使用示例二

const arr = [
  { value: 1, children: [{ value: 2 }] },
  {
    value: 3, children: [
      { value: 4, children: [{ value: 5 }] },
      { value: 6 }]
  },
];

const tree = buildTree(arr);

function printTree(node, level) {
  console.log(`${' '.repeat(level * 2)}${node.value}`)
  if (node.children.length > 0) {
    for (let child of node.children) {
      printTree(child, level + 1)
    }
  }
}

printTree({ value: null, children: tree }, 0)

运行结果：

1
  2
3
  4
    5
  6