js扁平数组对象转成树结构

假如有个需求，是如下结构：

let arr = [{id: 1, name: '部门1', pid: 0},{id: 2, name: '部门2', pid: 1},{id: 3, name: '部门3', pid: 1},{id: 4, name: '部门4', pid: 3},{id: 5, name: '部门5', pid: 4},
]

通过pid这个字段，要转成树结构，就是这样：

[{"id": 1,"name": "部门1","pid": 0,"children": [{"id": 2,"name": "部门2","pid": 1,"children": []},{"id": 3,"name": "部门3","pid": 1,"children": [{"id": 4,"name": "部门4","pid": 3,"children": [{"id": 5,"name": "部门5","pid": 4,"children": []}]}]}]}
]

思路如下：

先把数据转成Map形式去存储，再去遍历这个Map找到对应的数据，完整代码：

let arr = [{id: 1, name: '部门1', pid: 0},{id: 2, name: '部门2', pid: 1},{id: 3, name: '部门3', pid: 1},{id: 4, name: '部门4', pid: 3},{id: 5, name: '部门5', pid: 4},
]
let result = []
let trees = {}// 遍历给每一个对象添加一个children属性并转换成Map形式；并添加进trees对象，id为键
arr.forEach(item => {item.children = []trees[item.id] = item
})// 遍历查找对应的Map做存储
arr.forEach(item => {// 找到pid不为0的对象if(trees[item.pid]){// 因为pid对应的父节点是id，所以通过pid找到父节点再把当前的对象添加进入子数组里面trees[item.pid].children.push(item)}// 把pid为0的对象添加进最终的数组result，做为父节点if(item.pid == 0){// item是引用类型(浅拷贝)，针对当前数据所以只需push一次到resultresult.push(item)}
})

但是目前这个有个缺点，就是假如有两个父节点，就会有问题，因为这里是用的pid===0来判断的，更完整的如下：

// 假设有如下数据，需要转成树结构：
let arr = [{ id: 1, parentId: null, name: 'a' },{ id: 2, parentId: null, name: 'b' },{ id: 3, parentId: 1, name: 'c' },{ id: 4, parentId: 2, name: 'd' },{ id: 5, parentId: 1, name: 'e' },{ id: 6, parentId: 3, name: 'f' },{ id: 7, parentId: 4, name: 'g' },{ id: 8, parentId: 7, name: 'h' },
]// 定义最终输出的数组
let trees = []// 定义一个map
let map = new Map()// 遍历源数组，给map添加数据
for (let v of arr){// set(key,value)方法：  向当前Map对象中添加一个值，返回的Map对象，所以支持链式写法map.set(v.id, v)
}for (let v of arr){const pId = v.parentId// 方法has(key) 返回一个bool值，用来表明map 中是否存在指定元素.// 如果map中不存在当前元素parentId，则该元素为根元素，当前数据针对null，是不存在的if (!map.has(pId)) {// push的对象是引用类型(浅拷贝)trees.push(v)}// 如果map中存在 当前元素的parentId，则该元素不为根元素else {// get(key)    通过key找到value，如果找不到，返回undefinedconst parent = map.get(pId)// instanceof方法：用于判断一个变量是否某个对象的实例// 这里的意思是：如果parent没有children这个字段或者不是一个数组，则手动添加一个children属性为空数组!(parent.children instanceof Array) && (parent.children = [])parent.children.push(v)}
}
console.log(trees)

js扁平数组对象转成树结构相关推荐

js检测数组对象中是否有重复值
判断数组对象里的某个值是否都是同一个值 isRepeat=(arr)=> {var hash = {};for(let i=0;i<arr.length;i++){if (!hash[ar ...
Python学习 Day31 JS类数组对象
JS类数组对象一.三元运算符概述:三元运算符由三部分组成,使用语法如下: A ? B : C 三元运算符A:它需要的是一个布尔值(其他类型数值也可以,但是需要隐式转换为布尔值) 如果A部分为布尔值 ...
js给数组添加数据的方式/js 向数组对象中添加属性和属性值
参考:https://www.cnblogs.com/ayaa/p/14732349.html js给数组添加数据的方式有以下几种: 直接利用数组下标赋值来增加(数组的下标起始值是0) 例,先存在一个 ...
动态js创建数组对象
动态js创建数组对象 var items = []; for (var i = 0; i < 10; i++) { items.push({ id: i, level: i + '级' }) }
js前端数组对象键大写下划线转驼峰
js前端数组对象键大写下划线转驼峰我是分为两步去进行转的第一步,先将对象的键从大写转换为小写第二步,再将下划线转为驼峰格式 1.大写转小写代码参考如下 upLowercase(inputObj) ...
js实现数组对象去重
数组对象去重,可直接复用 /***数组对象去重** @param {Array} arr 去重数组* @param {String} key 唯一标识*/ deduplication(arr, key ...
JS 对数组对象进行排序
对Number类型的数组排序是很简单的,对数组元素为对象的数组进行排序也很简单,可以写一个下面的公共方法 /** 两个参数: 参数1 是排序用的字段, 参数2 是:是否升序排序 true 为升序,fa ...
JS在数组对象中添加新字段
在数组对象中每一项都添加相同字段第一步使用forEach遍历数组然后通过Object.assign()来添加 var arr = [{age:18,sex:'女'}, {age:30,sex:'男 ...
JS删除数组对象中指定元素对应的对象
这里我采用的是过滤的方法(filter),先将数组对象中的指定元素匹配上,然后在将它过滤出来,获取到剩下的对象,将剩下的对象拿到,这样就实现了删除指定元素对应的对象的效果. 举个栗子: 首先定义一个数 ...
js删除数组对象中的某个属性的方法
模拟数组对象数据 let newArr = [{title:'小明', id:18},{title:'小红', id:16}] 方式一:(for循环)删除数组对象中的某个属性,如删除id属性 for ...

js扁平数组对象转成树结构

js扁平数组对象转成树结构相关推荐

最新文章

热门文章