JavaScript - 递归无限数组

在HTML建一个div容器

<div class="box"></div>

导入jQuery文件

<script src='https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js'></script>

创建一个无限数组att

        let att = [
        {
            name: 'a',
            children: [
                {
                    name: 'a-1',
                    children: [
                        {
                            name: 'a-1-1',
                            children: [
                                {
                                    name: 'a-1-1-1'
                                }
                            ]
                        }
                    ]
                },
                {
                    name: 'a-2',
                }
            ]
        },
        {
            name: 'b',
            children: [
                {
                    name: 'b-1',
                    children: [
                        {
                            name: 'b-1-1'
                        }
                    ]
                }
            ]
        },
        {
            name: 'c',
            children: [
                {
                    name: 'c-1',
                }
            ]
        },
        {
            name: 'd',
        },
    ]

详细代码如下：

    function createMenu(data, con) {
        //创建一个ul标签
        let ul = $('<ul/>')
        //遍历数组
        data.forEach(item => {
            //将数组中的name写入li标签中
            let li = $('<li/>').text(item.name)
            //如果name里的children为空
            if (item.children)
                //重新走一遍函数createMenu
                createMenu(item.children, li)
            //将li标签导入到ul标签中
            ul.append(li)
        });
        //将ul标签导入到con容器中
        con.append(ul)
    }
    //运行函数createMenu
    createMenu(att, $('.box'))

运行效果如下：