1、效果图
需求：首先这是一个数据集—js的类型，我们需要把生成一个tree形式的对象 :
var data = [
{ id: 1, name: "办公管理", pid: 0 },
{ id: 2, name: "请假申请", pid: 1 },
{ id: 3, name: "出差申请", pid: 1 },
{ id: 4, name: "请假记录", pid: 2 },
{ id: 5, name: "系统设置", pid: 0 },
{ id: 6, name: "权限管理", pid: 5 },
{ id: 7, name: "用户角色", pid: 6 },
{ id: 8, name: "菜单设置", pid: 6 },
];id,与pid之间的对应关系，当pid不存在，或pid:0的时候，这一项，应该为树的顶端,那么我们需要去重新建一次索引，怎么建呢，，，以原数据集的id的值，重新生成一个数据如下:
var data = [
{id: 1, name: "办公管理", pid: 0 ,
children:[
{ id: 2, name: "请假申请", pid: 1,
hildren:[
{ id: 4, name: "请假记录", pid: 2 },
],
},
{ id: 3, name: "出差申请", pid: 1},
]
},
{id: 5, name: "系统设置", pid: 0 ,
children:[
{ id: 6, name: "权限管理", pid: 5,
hildren:[
{ id: 7, name: "用户角色", pid: 6 },
{ id: 8, name: "菜单设置", pid: 6 },
]
},
]
},
];js转换为上面数据集，实现数树级递归方法：
<script>
function toTree(data) {
// 删除 所有 children,以防止多次调用
data.forEach(function (item) {
delete item.children;
});
// 将数据存储为 以 id 为 KEY 的 map 索引数据列
var map = {};
data.forEach(function (item) {
map[item.id] = item;
});
// console.log(map);
var val = [];
data.forEach(function (item) {
// 以当前遍历项，的pid,去map对象中找到索引的id
var parent = map[item.pid];
// 好绕啊，如果找到索引，那么说明此项不在顶级当中,那么需要把此项添加到，他对应的父级中
if (parent) {
(parent.children || ( parent.children = [] )).push(item);
} else {
//如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中，作为顶级
val.push(item);
}
});
return val;
}
console.log(toTree(data))
</script>使用jquery，生成上述效果图的完整实例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.8.3.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
var data = [
{ id: 1, name: "办公管理", pid: 0 },
{ id: 2, name: "请假申请", pid: 1 },
{ id: 3, name: "出差申请", pid: 1 },
{ id: 4, name: "请假记录", pid: 2 },
{ id: 5, name: "系统设置", pid: 0 },
{ id: 6, name: "权限管理", pid: 5 },
{ id: 7, name: "用户角色", pid: 6 },
{ id: 8, name: "菜单设置", pid: 6 },
];
GetData(0, data);
$("body").append(menus);
});
//菜单列表html
var menus = '';
//根据菜单主键id生成菜单列表html
//id：菜单主键id
//arry：菜单数组信息
function GetData(id, arry) {
var childArry = GetParentArry(id, arry);
if (childArry.length > 0) {
menus += '<ul>';
for (var i in childArry) {
menus += '<li>' + childArry[i].name;
GetData(childArry[i].id, arry);
menus += '</li>';
}
menus += '</ul>';
}
}
//根据菜单主键id获取下级菜单
//id：菜单主键id
//arry：菜单数组信息
function GetParentArry(id, arry) {
var newArry = new Array();
for (var i in arry) {
if (arry[i].pid == id)
newArry.push(arry[i]);
}
return newArry;
}
</script>
</body>
</html>
JS递归及二叉搜索树的移除节点
递归含义：在某时某刻某个条件下调用包含自己的函数；注意点：⑴递归过程中一定要加限制条件，要不然会陷入死循环：递归有个过程，不是一步到位的，这一点尤其重要
递归获取页面元素的真实offsetLeft和offsetTop
由于父元素的定位属性, 导致子元素及其孙元素等的offsetLeft和offsetTop变得和预期不一致(预期上都是到屏幕左边和上边的位置), 由于需要做鼠标拖动旋转和鼠标框选
递归与循环的区别
递归：你打开面前这扇门，看到屋里面还有一扇门（这门可能跟前面打开的门一样大小（静），也可能门小了些（动）），你走过去，发现手中的钥匙还可以打开它，你推开门，发现里面还有一扇门，你继续打开
Js中的递归
递归函数是在一个函数通过名字调用自身的情况下构成的,这种写法在函数有名字，而且名字以后也不会变的情况下是没有问题的。但是函数的执行与函数名factorial紧紧耦合在了一起
js 用迭代器模式优雅的处理递归问题
循环数组或对象内每一项值，在 js 里原生已经提供了一个迭代器。凡是需要用到递归的函数参考迭代器模式，能写出更优雅，可读性更高的代码。
JavaScript实现无限级递归树
最近遇到一个需求，平时被后台惯着直接返回了树形结构给到前端，前端对这种嵌套类型的数据（如地区的级联或菜单的树形结构）省掉了一层处理。换了个后台开发返回了扁平化的数组数据给到前端自己去处理如下data。突然有点慌......
Vue一个案例引发的递归组件的使用
什么是递归组件？简单来说就是在组件中内使用组件本身，下面我们就来看看如何在项目中使用递归组件去解决我们上面问题。类似与信息分类的展示在我们的项目中是非常常见的形式，我们利用递归组件可以很好的去解决问题
js递归函数——函数体内调用本函数的方式
在js中通过如果一个函数直接或间接调用函数本身，则该函数称为递归函数。