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

前端小技巧: TS实现数组转树，树转数组

news 2025/7/14 18:48:37

将数组转为树

interface IArrayItem {id: number,name: string,parentId: number
}interface ITreeNode {id: numbername: stringchildren?: ITreeNode[]
}const arr = [{id: 1, name: '部门A', parentId: 0},{id: 2, name: '部门B', parentId: 1},{id: 3, name: '部门C', parentId: 1},{id: 4, name: '部门D', parentId: 2},{id: 5, name: '部门E', parentId: 2},{id: 6, name: '部门F', parentId: 3}
]function convert(arr: IArrayItem[]): ITreeItem | null {// 用于id和treeNode的映射关系表const idToTreeNode: Map<number, ITreeNode> = new Map()let root = nullarr.forEach(item => {const {id, name, parentId} = itemconst treeNode: ITreeNode = { id, name }idToTreeNode.set(id, treeNode)// 找到 parentNode 并加入到它的 childrenconst parentNode = idToTreeNode.get(parentId)if (parentNode) {!parentNode.children && parentNode.children = [] // 没有则初始化一个parentNode.children.push(treeNode)}// 找到根节点if (!parentId) root = treeNode})return root
}const tree = convert(arr)
console.log('tree: ', tree)

遍历数组，生成 tree node
找到parentNode，加入其children
扩展：
- 数组：像是mysql, 关系型
- 树，像是文档型

将树转数组

const obj = {id: 1,name: '部门a',children: [{id: 2,name: '部门b',children: [{ id: 4, name: '部门d'}{ id: 5, name: '部门e'}]},{id: 3,name: '部门c',children: [{ id: 6, name: '部门f'}]}]
}interface IArrayItem {id: number,name: string,parentId: number
}interface ITreeNode {id: numbername: stringchildren?: ITreeNode[]
}const arr = []// 使用广度优先遍历，最好function convert(root: ITreeNode): IArrayItem[] {const nodeToParent: Map<ITreeNode, ITreeNode> = new Map()const arr: IArrayItem[] = []const queue = ITreeNode[] = []queue.unshift(root) // 根节点入队while(queue.length) {const curNode = queue.pop() // 出队if (!curNode) breakconst { id, name, children = [] } = curNode// 创建数组 item 并 pushconst parentNode = nodeToParent.get(curNode)const parentId = parentNode?.id || 0const item = { id, name, parentId }arr.push(item) // 只在这里加入// 子节点入队children.forEach(child => {// 映射 parentnodeToParent.set(child, curNode)// 入队queue.unshift(child)})}
}const arr = convert(obj)
console.log('arr:', arr)