递归方法无限级菜单--javascript v1.0
2023-09-11 14:19:17 时间
菜单遍历用递归的方法最简单,不用考虑有多少级,可以实现全部遍历,前提是后台代码的规范性,一般从后台返回的数据是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是调试代码,实际可以替换为菜单的样式等。
相关文章
- 45个实用的JavaScript技巧、窍门和最佳实践
- JavaScript document
- Google Earth Engine(GEE)——JavaScript基本功能介绍(变量和数据类型及几何类型的简介)
- 前端基础 - JavaScript高级应用(高阶函数)
- 总结一下JavaScript 中apply、call、bind的使用方法
- JavaScript设计模式经典-面向对象中六大原则
- JavaScript 常用方法
- JavaScript-每隔5分钟执行一次ajax请求的实现方法
- 《JavaScript启示录》——导读
- JavaScript中遍历对象的方法,你掌握了几种?
- 原生JavaScript进阶训练---重写filter方法
- 原生JavaScript进阶训练---重写map方法
- JavaScript数组类型
- JavaScript遍历数组、Map
- javascript js date ios手机浏览器出现 NAN的问题解决方法
- javascript 上传图片时预览图片的两种方法
- 华为OD机试 - 招聘(JavaScript) | 机试题+算法思路+考点+代码解析 【2023】
- Web 之 JavaScript 一些常用的方法或者开发技巧整理(代码整理)
- 【javascript】Javascript中"||"的妙用
- Javascript Date原型方法
- javascript-for-loop-example--reference
- JavaScript之面向对象学习二(原型属性对象与in操作符)获取对象中所有属性的方法
- 深入理解JavaScript系列(43):设计模式之状态模式
- javascript的propertyIsEnumerable()方法