如何使用JavaScript将扁平对象转换为树形对象

在前端开发中，我们经常会遇到需要处理树形数据结构的情况，比如网站导航栏、组织机构图等。为了方便处理和可视化，我们需要将扁平的数据结构转换为树形结构。

JavaScript 提供了很多方法可以实现这个功能，其中一种简单且常用的方法是使用递归。

首先，我们需要定义一个递归函数，该函数接收一个扁平对象和一个可选的父节点参数。如果父节点参数为空字符串，则表示当前节点为根节点。

接下来，我们需要遍历扁平对象，并检查每个节点的 parent 字段。如果 parent 字段与父节点参数匹配，则表示当前节点是父节点的子节点。

如果当前节点是父节点的子节点，则将其添加到父节点的 children 数组中。否则，则将其添加到根节点的 children 数组中。

最后，我们需要返回根节点，即可获得转换后的树形对象。

function convertToTree(flatObject, parent = '') {
  const tree = {};

  for (const key in flatObject) {
    if (flatObject[key].parent === parent) {
      tree[key] = convertToTree(flatObject, key);
    } else {
      tree[parent] = convertToTree(flatObject, '');
    }
  }

  return tree;
}

例如，我们有一个如下扁平对象：

const flatObject = {
  '1': {
    'name': 'Node 1',
    'parent': ''
  },
  '2': {
    'name': 'Node 2',
    'parent': '1'
  },
  '3': {
    'name': 'Node 3',
    'parent': '1'
  },
  '4': {
    'name': 'Node 4',
    'parent': '2'
  },
  '5': {
    'name': 'Node 5',
    'parent': '3'
  }
};

使用 convertToTree 函数将这个扁平对象转换为树形对象：

const tree = convertToTree(flatObject);

转换后的树形对象如下：

{
  '1': {
    'name': 'Node 1',
    'children': {
      '2': {
        'name': 'Node 2',
        'children': {
          '4': {
            'name': 'Node 4'
          }
        }
      },
      '3': {
        'name': 'Node 3',
        'children': {
          '5': {
            'name': 'Node 5'
          }
        }
      }
    }
  }
}

通过这种方法，我们可以轻松地将扁平对象转换为树形对象，方便后续处理和可视化。