JavaScript 如何递归遍历树形结构数据并转为列表

在 JavaScript 开发中，处理树形结构数据是一个常见的任务。树形结构数据在很多场景下都有应用，比如菜单导航、组织结构图等。而有时我们需要将树形结构数据转换为列表形式，以便于展示或进行其他操作。递归是实现这一转换的常用且有效的方法。

我们来看一个简单的树形结构数据示例：

const tree = [
  {
    id: 1,
    name: '父节点1',
    children: [
      {
        id: 2,
        name: '子节点1.1',
        children: []
      },
      {
        id: 3,
        name: '子节点1.2',
        children: []
      }
    ]
  },
  {
    id: 4,
    name: '父节点2',
    children: []
  }
];

接下来，我们编写递归函数来遍历这个树形结构并将其转为列表。

function treeToList(tree) {
  const list = [];
  function traverse(node) {
    list.push(node);
    if (node.children && node.children.length > 0) {
      node.children.forEach(child => {
        traverse(child);
      });
    }
  }
  tree.forEach(node => {
    traverse(node);
  });
  return list;
}

const result = treeToList(tree);
console.log(result);

在这个代码中，我们定义了 treeToList 函数，它接收一个树形结构数据作为参数。在函数内部，我们创建了一个空数组 list 用于存储转换后的列表数据。

traverse 函数是递归的核心部分。它首先将当前节点添加到 list 中，然后检查当前节点是否有子节点。如果有子节点，就遍历每个子节点并递归调用 traverse 函数。

最后，我们遍历树形结构的根节点数组，对每个根节点调用 traverse 函数，完成遍历并返回转换后的列表。

通过这种递归的方式，我们可以轻松地将复杂的树形结构数据转换为扁平的列表形式，方便后续的数据处理和展示。掌握这种方法，能让我们在处理树形结构数据时更加得心应手，提升开发效率。