js递归通过指定id值获取树结构内的位置

最新推荐文章于 2024-03-01 11:35:36 发布

岁月如歌_

最新推荐文章于 2024-03-01 11:35:36 发布

阅读量2.6k

点赞数 3

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/namechenfl/article/details/112258141

版权

前端专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一种通过ID获取复杂层级结构中元素位置的方法，并详细解释了如何递归地遍历这些层级来收集所需的数据信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

返回层级结构的id

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
</body>
<script>
    var data = [
        {
            id: 1,
            name: '一级1',
            children: [
                {
                    id: 4,
                    name: '二级1',
                },
                {
                    id: 5,
                    name: '二级2',
                    children: [
                        {
                            id: 7,
                            name: '三级1',
                        },
                        {
                            id: 8,
                            name: '三级2',
                            children: [
                                {
                                    id: 11,
                                    name: '四级1',
                                },
                                {
                                    id: 10,
                                    name: '四级2',
                                },
                            ]
                        },
                        {
                            id: 9,
                            name: '三级3',
                        },
                    ]
                }
            ]
        },
        {
            id: 2,
            name: '一级2',
        },
        {
            id: 3,
            name: '一级3',
            children: [
                {
                    id: 6,
                    name: '二级3',
                    children: [
                        {
                            id: 12,
                            name: '三级4',
                        },
                    ]
                },
            ]
        }]

    // 注释：数据结构不确定层级，不确定是否有子集（children） ，要求通过id获得指定数据的位置并记录他的层级内容信息
    // 获取指定id的位置   并以层级的形式放入数组 
    //  要求获取指定层级的信息 如 id 1  结果 [1]  id 6 结果 [3,6]  id 11 结果 [1，5，8，11]
    function getCidList(val, id) {
        let cid_list = []
        val.forEach((item, index) => {
            if (item.id == id) {
                cid_list = [item.id]
                return false
            } else {
                if (item.children) {
                    let newCid_list = [item.id]
                    let list = nodefun(item.children, id, newCid_list)
                    if (list) {
                        cid_list = list
                    }
                }
            }
        })
        // 递归函数
        function nodefun(newVal, newId, newCid_list) {
            let flag = false
            newVal.forEach(j => {
                // console.log(j)
                if (j.id == newId) {
                    newCid_list.push(j.id)
                    flag = true
                } else {
                    if (j.children) {
                        let cid_list = JSON.parse(JSON.stringify(newCid_list))
                        cid_list.push(j.id)
                        let list = nodefun(j.children, newId, cid_list)
                        if (list) {
                            newCid_list = list
                            flag = true
                        }
                    }

                }
            })
            if (flag) {
                return newCid_list
            }
        }
        return cid_list
    }
    var a = getCidList(data,11)
    console.log(a)
</script>

</html>

返回层级结构的层级信息

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
</body>
<script>
    var data = [
        {
            id: 1,
            name: '一级1',
            children: [
                {
                    id: 4,
                    name: '二级1',
                },
                {
                    id: 5,
                    name: '二级2',
                    children: [
                        {
                            id: 7,
                            name: '三级1',
                        },
                        {
                            id: 8,
                            name: '三级2',
                            children: [
                                {
                                    id: 11,
                                    name: '四级1',
                                },
                                {
                                    id: 10,
                                    name: '四级2',
                                },
                            ]
                        },
                        {
                            id: 9,
                            name: '三级3',
                        },
                    ]
                }
            ]
        },
        {
            id: 2,
            name: '一级2',
        },
        {
            id: 3,
            name: '一级3',
            children: [
                {
                    id: 6,
                    name: '二级3',
                    children: [
                        {
                            id: 12,
                            name: '三级4',
                        },
                    ]
                },
            ]
        }]

    // 注释：数据结构不确定层级，不确定是否有子集（children） ，要求通过id获得指定数据的位置并记录他的层级内容信息
    // 获取指定id的位置   并以层级的形式放入数组 输出
    //  要求获取指定层级的信息 如 
    //    id 1  结果 [{id:1,name:'一级1'}] 
    //    id 6  结果 [{id:3,name:'一级3'},{id:6,name:'二级3'}]
    //    id 11 结果 [{id:1,name:'一级1'},{id:5,name:'二级2'},{id:8,name:'三级2'},{id:11,name:'四级1'}]
    function getCidList(val, id) {
        let cid_list = []
        val.forEach((item, index) => {
            if (item.id == id) {
                let obj = {
                    id: item.id,
                    name: item.name
                }
                cid_list = [item.id]
                return false
            } else {
                if (item.children) {
                    let obj = {
                        id: item.id,
                        name: item.name
                    }
                    let newCid_list = [obj]
                    let list = nodefun(item.children, id, newCid_list)
                    if (list) {
                        cid_list = list
                    }
                }
            }
        })
        // 递归函数
        function nodefun(newVal, newId, newCid_list) {
            let flag = false
            newVal.forEach(j => {
                // console.log(j)
                if (j.id == newId) {
                    let obj = {
                        id: j.id,
                        name: j.name
                    }
                    newCid_list.push(obj)
                    flag = true
                } else {
                    if (j.children) {
                        let cid_list = JSON.parse(JSON.stringify(newCid_list))
                        let obj = {
                            id: j.id,
                            name: j.name
                        }
                        cid_list.push(obj)
                        let list = nodefun(j.children, newId, cid_list)
                        if (list) {
                            newCid_list = list
                            flag = true
                        }
                    }

                }
            })
            if (flag) {
                return newCid_list
            }
        }
        return cid_list
    }
    var a = getCidList(data, 6)
    console.log(a)
</script>

</html>