当前位置：首页 > ai >正文

分析vban的utlis中的helper方法（2）——树形数组

ai 2025/6/26 22:38:49

将列表（数组）转换为树形结构的函数

// tree from list
// 列表中的树
export function listToTree<T = any>(list: any[], config: Partial<TreeHelperConfig> = {}): T[] {const conf = getConfig(config) as TreeHelperConfig;//nodeMap 是一个 Map，用于存储每个节点的引用，以 id 为键，节点对象为值。const nodeMap = new Map();const result: T[] = [];const { id, children, pid } = conf;//遍历输入的列表 list，为每个节点初始化 children 字段（如果不存在的话）。
//将每个节点存储到 nodeMap 中，以便后续可以通过 id 快速查找父节点。for (const node of list) {node[children] = node[children] || [];nodeMap.set(node[id], node);}//再次遍历列表，根据每个节点的 pid 在 nodeMap 中查找其父节点。//如果找到了父节点（parent），将当前节点添加到父节点的 children 数组中。//如果没有找到父节点（即当前节点是根节点），则将当前节点添加到 result 数组中。for (const node of list) {const parent = nodeMap.get(node[pid]);(parent ? parent[children] : result).push(node);}return result;
}

示例使用

const list = [{ id: 1, pid: null, name: 'Root' },{ id: 2, pid: 1, name: 'Child 1' },{ id: 3, pid: 1, name: 'Child 2' },{ id: 4, pid: 2, name: 'Grandchild' }
];

调用结果

[{id: 1,pid: null,name: 'Root',children: [{ id: 2, pid: 1, name: 'Child 1', children: [{ id: 4, pid: 2, name: 'Grandchild', children: [] }] },{ id: 3, pid: 1, name: 'Child 2', children: [] }]}
]