ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2020-09-10 18:00:20  阅读:249  来源: 互联网

标签:parentMenuId return parent menuId list tree js item


最近在考虑一个树状结构存储。

最终需要将list转化为tree格式

源数据示例

源数据共401条

方法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

在方法2的基础上,将每次find的parentNode缓存起来,减少相同parent的查询次数

共执行 15337 次 1.8ms左右

const list = [...]
// 15337 次 1.8ms左右 cache parent
const 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
    })
}
list2tree4(list, null)

 

   

标签:parentMenuId,return,parent,menuId,list,tree,js,item
来源: https://www.cnblogs.com/shb190802/p/13647203.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有