JavaScript - 使用递归方法遍历树形数据

首先，树形结构的数据，每个节点只有2个属性，1个是节点值，1个是子节点。如下面的arr

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',
        },
    ]

HTML的中存在一个默认的容器.box，我们将数据插入.box中

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

详细JavaScript代码如下：

    function createMenu(data, con) {
        let ul = $('<ul/>'); // 创建树枝
        data.forEach(item => {
            let li = $('<li/>').text(item.name); // 创建节点
            if (item.children)
            createMenu(item.children, li); // 向下层遍历，value.children为子节点，li为子节点的容器
            ul.append(li); // 插入节点
        });
        con.append(ul); // 将树枝插入到容器
    }
    createMenu(att, $('.box'))

逐层递归最终呈现的效果如下：