递归方法无限级菜单--javascript v1.0

菜单遍历用递归的方法最简单，不用考虑有多少级，可以实现全部遍历，前提是后台代码的规范性，一般从后台返回的数据是json格式，这里有两种结构，一种是用pid的形式，一种是用children的形式，什么意思呢，用pid的形式，就是返回的数据没有层级结构，需要你通过查询pid来看是否有父级对象，如果有再往上找，直到没有pid属性，那就是一级菜单了，这种方式不利于前端的实现；第二种就是我将要说的这种“children”的形式，这种json格式可以明显看出菜单的层级结构，前端可以使用递归的方法实现无限极分类，非常方便。废话不多说，直接上代码：

var arr = [{
    "id": 1,
    "name": "一级菜单1",
    "children":[
        {
            "id": 2,
            "name": "1-1二级菜单",
            "children":[
                {
                    "id":3,
                    "name":"1-1-1三级菜单",
                    "children":[]
                },
                {
                    "id":4,
                    "name":"1-1-2三级菜单",
                    "children":[
                        {
                            "id":5,
                            "name":"1-1-2-1四级菜单",
                            "children":[]
                        }
                    ]
                }
            ]
        }
    ]
},{
    "id": 6,
    "name": "一级菜单2",
    "children":[
        {
            "id": 7,
            "name": "2-1二级菜单",
            "children":[
                {
                    "id":8,
                    "name":"2-1-1三级菜单",
                    "children":[]
                },
                {
                    "id":9,
                    "name":"2-1-2三级菜单",
                    "children":[
                        {
                            "id":10,
                            "name":"2-1-2-1四级菜单",
                            "children":[]
                        }
                    ]
                }
            ]
        }
    ]
}];

这是模拟后端传入的数据，可以看到结构非常清晰，下面开始解析：

//解析函数
function parseJson(arr){
    if(arr.length!=0){
        function pp(arr){
            for(var i=0;i<arr.length;i++){
                if(arr[i].children && arr[i].children.length!=0){
                    console.log(arr[i].name);//这里可以写菜单的样式结构...
                    pp(arr[i].children);
                }else{
                    console.log(arr[i].name);//这里可以写菜单的样式结构...
                }
            }
        }
        pp(arr);
    }
}
parseJson(arr);

利用回调函数就将代码解析了，这里的console.log是调试代码，实际可以替换为菜单的样式等。