JS实现数组与树结构的相互转换

JS实现数组与树结构的相互转换

    let data = [{ id: 0, parentId: null, name: '生物' },{ id: 1, parentId: 0, name: '动物' },{ id: 2, parentId: 0, name: '植物' },{ id: 3, parentId: 0, name: '微生物' },{ id: 4, parentId: 1, name: '哺乳动物' },{ id: 5, parentId: 1, name: '卵生动物' },{ id: 6, parentId: 2, name: '种子植物' },{ id: 7, parentId: 2, name: '蕨类植物' },{ id: 8, parentId: 4, name: '大象' },{ id: 9, parentId: 4, name: '海豚' },{ id: 10, parentId: 4, name: '猩猩' },{ id: 11, parentId: 5, name: '蟒蛇' },{ id: 12, parentId: 5, name: '麻雀' },]function transTree(data) {let result = []let map = {}if (!Array.isArray(data)) {//验证data是不是数组类型return []}data.forEach((item) => {//建立每个数组元素id和该对象的关系map[item.id] = item //这里可以理解为浅拷贝，共享引用})data.forEach((item) => {let parent = map[item.parentId] //找到data中每一项item的爸爸if (parent) {//说明元素有爸爸，把元素放在爸爸的children下面;(parent.children || (parent.children = [])).push(item)} else {//说明元素没有爸爸，是根节点，把节点push到最终结果中result.push(item) //item是对象的引用}})return result //数组里的对象和data是共享的}let res = transTree(data)console.log(res)function transArr(node) {let queue = [node]let data = [] //返回的数组结构while (queue.length !== 0) {//当队列为空时就跳出循环let item = queue.shift() //取出队列中第一个元素data.push({id: item.id,parentId: item.parentId,name: item.name,})let children = item.children // 取出该节点的孩子if (children) {for (let i = 0; i < children.length; i++) {queue.push(children[i]) //将子节点加入到队列尾部}}}return data}console.log(transArr(res[0]))

重写：

const data = [{ id: '01', name: '张大大', pid: '', job: '项目经理' },{ id: '02', name: '小亮', pid: '01', job: '产品leader' },{ id: '03', name: '小美', pid: '01', job: 'UIleader' },{ id: '04', name: '老马', pid: '01', job: '技术leader' },{ id: '05', name: '老王', pid: '01', job: '测试leader' },{ id: '06', name: '老李', pid: '01', job: '运维leader' },{ id: '07', name: '小丽', pid: '02', job: '产品经理' },{ id: '08', name: '大光', pid: '02', job: '产品经理' },{ id: '09', name: '小高', pid: '03', job: 'UI设计师' },{ id: '10', name: '小刘', pid: '04', job: '前端工程师' },{ id: '11', name: '小华', pid: '04', job: '后端工程师' },{ id: '12', name: '小李', pid: '04', job: '后端工程师' },{ id: '13', name: '小赵', pid: '05', job: '测试工程师' },{ id: '14', name: '小强', pid: '05', job: '测试工程师' },{ id: '15', name: '小涛', pid: '06', job: '运维工程师' },
]const tree = arrToTree(data)
// console.log(tree)const arr = treeToArr(tree)
// console.log(arr)// 数组变树
function arrToTree(data) {let res = []let map = {}data.forEach((item) => {map[item.id] = item})data.forEach((item) => {let parent = map[item.pid]if (parent) {;(parent.children || (parent.children = [])).push(item)} else {res.push(item)}})// 输出resreturn res
}// 树变数组
function treeToArr(data) {let arr = []for (let item of data) {if (item.children) {data.push(...item.children)delete item.children}arr.push(item)}return arr
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！