JSON数据转树形结构的算法实现与优化

1. JSON数据转树形结构的核心需求解析

在前端开发中，我们经常遇到需要将扁平的JSON数据转换为树形结构的需求。这种转换在管理系统菜单、组织架构图、分类目录等场景中尤为常见。原始数据通常是一个包含父子关系的数组，每个元素通过ID和父ID相互关联。

为什么需要这种转换？因为树形结构能够：

• 直观展示层级关系
• 方便实现递归渲染
• 支持展开/折叠操作
• 符合用户对层次数据的认知习惯

2. 核心算法设计与实现原理

2.1 数据结构分析

典型的扁平数据结构包含以下关键字段：

javascript复制[
  {id: "1", name: "节点1"},
  {id: "1-1", name: "节点1-1"}, 
  {id: "1-2", name: "节点1-2"},
  {id: "2", name: "节点2"}
]

2.2 算法实现步骤

1. 创建节点映射表：使用对象存储所有节点，键为节点ID，值为节点数据
2. 初始化子节点数组：为每个节点添加children属性
3. 构建父子关系：遍历数据，将子节点放入对应父节点的children数组
4. 收集根节点：没有父节点或父节点不存在的节点作为树的根

2.3 关键代码解析

javascript复制const nodeMap = {};
const tree = [];

// 初始化节点映射表
flatData.forEach(item => {
  nodeMap[item[f_id]] = {...item, children: []};
});

// 构建树形结构
flatData.forEach(item => {
  const node = nodeMap[item[f_id]];
  const parentId = getParentId(item[f_id]);
  
  if (parentId && nodeMap[parentId]) {
    nodeMap[parentId].children.push(node);
  } else {
    tree.push(node);
  }
});

3. 完整实现与功能扩展

3.1 基础功能实现

完整的buildTreeById函数包含以下核心功能：

• 支持自定义ID字段名
• 可选是否允许选择父节点
• 自动排序功能

javascript复制function buildTreeById(flatData, field_id = 'id', selectable_parent = false) {
  const nodeMap = {};
  const tree = [];
  
  // 处理参数默认值
  const f_id = field_id || 'id';
  const selectable = selectable_parent || false;
  
  // 排序预处理
  flatData.sort((a, b) => a[f_id].localeCompare(b[f_id]));
  
  // 初始化节点
  flatData.forEach(item => {
    no