js将list转化为tree格式的几种写法 _js

文章插图

最近在考虑一个树状结构存储。
最终需要将list转化为tree格式
源数据示例源数据共401条

[{ "menuId" : "5f50c5fb8f0d74536bbfb7a4", "menuName" : "菜单管理", "parentMenuId" : null },{ "menuId" : "5f524416ff216c2cbc554907", "menuName" : "频道管理", "parentMenuId" : "5f50c5fb8f0d74536bbfb7a4" },{ "menuId" : "5f576677d9588f3d78fbdb74", "menuName" : "分类管理", "parentMenuId" : "5f524416ff216c2cbc554907" },{ "menuId" : "5f588b22499cd2538411b98a", "menuName" : "发布管理", "parentMenuId" : "5f50c5fb8f0d74536bbfb7a4" },{ "menuId" : "5f588b85499cd2538411b98b", "menuName" : "权限管理", "parentMenuId" : "5f50c5fb8f0d74536bbfb7a4" },{ "menuId" : "5f588f8358bc0d3e647403a1", "menuName" : "菜单管理", "parentMenuId" : "5f588b85499cd2538411b98b" }...]

方法1递归遍历children
共执行递归 161202 次 5ms左右时间（win10/i7 8th/16G）

const list = [...]// 递归 161202 次 5ms左右时间const list2tree1 = (list, parentMenuId) => {return list.filter(item => {if (item.parentMenuId === parentMenuId) {item.children = list2tree1(list, item.menuId)return true}return false})}list2tree1(list, null)

方法2因为方法1是查询的children ，所以每次必须全部遍历。
我们换个思路，查询每个节点的parent ，查到paret之后，内部循环就可以截止了。（使用find方法）
共执行 68976 次 3.6ms左右

const list = [...]// 68976 次 3.6ms左右const list2tree2 = (list, parentMenuId) => {return list.filter(item => {if (item.parentMenuId !== parentMenuId) {let parent = list.find(parent => parent.menuId === item.parentMenuId)if (!parent.children) parent.children = []parent.children.push(item)return false}return true})}list2tree2(list, null)

方法3【js将list转化为tree格式的几种写法】在方法2的基础上，将每次find的parentNode缓存起来，减少相同parent的查询次数
共执行 15337 次 1.8ms左右

const list = [...]// 15337 次 1.8ms左右 cache parentconst list2tree3 = (list, parentMenuId) => {let parentObj = {}return list.filter(item => {if (item.parentMenuId !== parentMenuId) {if (!parentObj[item.parentMenuId]) {parentObj[item.parentMenuId] = list.find(parent => parent.menuId === item.parentMenuId)parentObj[item.parentMenuId].children = []}parentObj[item.parentMenuId].children.push(item)return false}return true})}list2tree3(list, null)

方法4遍历tree之前，先遍历一遍数组，将数据缓存到object中。
二次遍历，直接使用object中的缓存
共执行 802 次 0.2ms左右

const list = [...]// 802 次 0.2ms左右const list2tree4 = (list, parentMenuId) => {let menuObj = {}list.forEach(item => {item.children = []menuObj[item.menuId] = item})return list.filter(item => {if (item.parentMenuId !== parentMenuId) {menuObj[item.parentMenuId].children.push(item)return false}return true})}