搞定字符串转树形结构

在 Web 开发中，我们经常需要将一些扁平的数据结构转换为树形结构。例如，在处理菜单、分类、标签等内容时，我们通常会使用树形结构来表示它们之间的层次关系。在这篇文章中，我将介绍如何将一个字符串数组转换为树形结构，并提供示例代码。

字符串数组转树形结构

假设我们有一个简单的字符串数组，每个字符串代表一个节点，其中包含一个 id 属性和一个可选的 parent_id 属性。如果 parent_id 为 null 或未定义，则表示该节点是根节点。例如：

const data = [
  { id: '1', parent_id: null, name: 'Node 1' },
  { id: '2', parent_id: '1', name: 'Node 2' },
  { id: '3', parent_id: '1', name: 'Node 3' },
  { id: '4', parent_id: '2', name: 'Node 4' },
  { id: '5', parent_id: '2', name: 'Node 5' },
];

我们可以通过遍历这个数组，将每个节点添加到其父节点的 children 属性中，从而得到一个树形结构。例如：

function buildTree(data) {
  const tree = [];

  // 以 id 为索引创建节点对象
  const nodes = data.reduce((obj, node) => {
    obj[node.id] = {...node, children: []};
    return obj;
  }, {});

  // 每个节点添加到其父节点的 children 数组中
  Object.values(nodes).forEach(node => {
    if (node.parent_id) {
      nodes[node.parent_id].children.push(node);
    } else {
      tree.push(node);
    }
  });

  return tree;
}

const tree = buildTree(data);

在上面的示例代码中，我们首先使用 reduce 方法将字符串数组转换为以 id 为索引的节点对象。然后，我们遍历每个节点，并将它们添加到它们的父节点的 children 属性中。最后，我们返回根节点数组。

示例代码

以下是一个完整的示例代码，用于将字符串数组转换为树形结构：

const data = [
  { id: '1', parent_id: null, name: 'Node 1' },
  { id: '2', parent_id: '1', name: 'Node 2' },
  { id: '3', parent_id: '1', name: 'Node 3' },
  { id: '4', parent_id: '2', name: 'Node 4' },
  { id: '5', parent_id: '2', name: 'Node 5' },
];

function buildTree(data) {
  const tree = [];

  // 以 id 为索引创建节点对象
  const nodes = data.reduce((obj, node) => {
    obj[node.id] = {...node, children: []};
    return obj;
  }, {});

  // 每个节点添加到其父节点的 children 数组中
  Object.values(nodes).forEach(node => {
    if (node.parent_id) {
      nodes[node.parent_id].children.push(node);
    } else {
      tree.push(node);
    }
  });

  return tree;
}

const tree = buildTree(data);

console.log(JSON.stringify(tree, null, 2));

在这个示例代码中，我们首先定义了一个字符串数组 data，然后调用 buildTree 函数将它转换为树形结构，并将结果打印到控制台上。

结语

通过本文的介绍和示例代码，相信您已经了解了如何将字符串数组转换为树形结构。这种技术在 Web 开发中非常常见，特别是在处理菜单、分类、标签等内容时。希望这篇文章能够对您有所帮助！