从扁平数据到树形数据：JavaScript 函数实现与解析

本文主要是介绍从扁平数据到树形数据：JavaScript 函数实现与解析，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

我今天遇到扁平数据处理，但是有的数据在父级前面所以无法渲染进去，于是完善了一下转树形数据，大家一起看看吧

function GetTreeData(data) {let TreeData = [];let map = new Map(); // 存在 id, 对应所在的内存地址let outputObj, pid;// 存储无法立即处理的节点let pendingNodes = [];for (let i = 0; i < data.length; i++) {pid = data[i].pid;if (map.has(pid)) {// 存在，将此信息加入到对应 id=pid 的对象上的 childrenif (!map.get(pid).children) map.get(pid).children = [];let obj = { ...data[i] };map.get(pid).children.push(obj);map.set(data[i].id, obj);} else if (pid == 0) {// 处理 pid 为 0 的情况outputObj = { ...data[i] };TreeData.push(outputObj);map.set(data[i].id, outputObj);} else {// 暂时无法处理的节点pendingNodes.push(data[i]);}}// 处理所有暂存的节点while (pendingNodes.length > 0) {let newPendingNodes = [];for (let i = 0; i < pendingNodes.length; i++) {let node = pendingNodes[i];pid = node.pid;if (map.has(pid)) {// 父节点现在已存在，可以处理if (!map.get(pid).children) map.get(pid).children = [];let obj = { ...node };map.get(pid).children.push(obj);map.set(node.id, obj);} else {// 父节点仍然不存在，重新暂存newPendingNodes.push(node);}}// 如果没有新节点被处理，说明存在循环或缺少父节点if (newPendingNodes.length === pendingNodes.length) {console.error("无法处理以下节点，可能缺少父节点或存在循环引用:", newPendingNodes);break;}pendingNodes = newPendingNodes;}return TreeData;
}

这篇关于从扁平数据到树形数据：JavaScript 函数实现与解析的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---