递归是一种解决方案，通过不断的调用自己，达到实现功能的目的。 在特殊业务下才有可能使用到，先了解，不必强求，真正需要的时候再深究。 下面讲几个demo示例，以代码为主，先初步了解一下，由浅及深，由示例到项目实用，一步一步加深印象。 ## 一、递归实现阶乘：n!=1×2×3×...×n ~~~ function factorial(num) { if(num < 0) { return -1; } else if(num===0 || num===1) { return 1; } else { return num*factorial(num-1); } } factorial(4); // 24 ~~~ ## 二、递归实现斐波那契数列：1、1、2、3、5、8、13、21、34、…… ~~~ function fibonacci(num) { if(num <= 0) { return 0; } if(num===1 || num===2) { return 1; } return fibonacci(num-1)+fibonacci(num-2); } console.log(fibonacci(4)); // 3 ~~~ ## 三、部门渲染 数据： ~~~ var data = [ { name: '部门1', level: 1, children: [ { name: '小组1', level: 2, children: [ { name: '张三', level: 3 }, { name: '李四', level: 3 }, { name: '王二', level: 3 } ] }, { name: '小组2', level: 2, children: [] } ] }, { name: '部门2', level: 1, children: [ { name: '小组1', level: 2, children: [ { name: '张三', level: 3 }, { name: '李四', level: 3 }, { name: '王二', level: 3 } ] } ] } ]; ~~~ **1、简单的列表拼装**  ~~~ function recursiveData(data) { var html = '<ul>'; for(var i=0, len=data.length; i<len; i++) { html += '<li><i>'+data[i].level+'-'+data[i].name+'</i>'; if(data[i].children && data[i].children.length > 0) { html += recursiveData(data[i].children); } html += '</li>'; } html += '</ul>'; return html; } var html = recursiveData(data); document.body.innerHTML = html; ~~~ **2、带缩进的列表拼装**  ~~~ function recursiveData(data, pad) { pad += 10; var html = '<ul>'; for(var i=0, len=data.length; i<len; i++) { html += '<li><i style="padding-left: '+pad+'px;">'+data[i].level+'-'+data[i].name+'</i>'; if(data[i].children && data[i].children.length > 0) { html += recursiveData(data[i].children, pad); } html += '</li>'; } html += '</ul>'; return html; } var html = recursiveData(data, 0); document.body.innerHTML = html; ~~~ ## 四、递归选择  ~~~ var postObj =[ { "id":"1", "name":"客服服务一部", "son":[ { "id":"1-1", "name":"客服服务一室", "son":[ { "id":"1-1-1", "name":"客服服务一组" }, { "id":"1-1-2", "name":"客服服务二组" }, { "id":"1-1-3", "name":"客服服务三组", } ] }, { "id":"1-2", "name":"客服服务二室", "son":[ { "id":"1-2-1", "name":"客服服务1组" }, { "id":"1-2-2", "name":"客服服务2组" }, { "id":"1-2-3", "name":"客服服务3组" } ] } ] }, { "id":"2", "name":"客服服务二部", "son":[ { "id":"2-1", "name":"客服服务三室", "son":[ { "id":"2-1-1", "name":"客服服务一组" }, { "id":"2-1-2", "name":"客服服务二组" }, { "id":"2-1-3", "name":"客服服务三组", } ] }, { "id":"2-2", "name":"客服服务四室" } ] } ]; var dataArr = []; function recursiveGetData(data, name) { for(var i=0, len=data.length; i<len; i++) { if(name === '') { dataArr.push(data); } else if(data[i].name == name) { dataArr.push(data[i].son); } else { if(data[i].son && data[i].son.length>0) { recursiveGetData(data[i].son, name); } } } return dataArr; } function renderData(selector, data) { if(typeof data[0] !== 'undefined') { for(var i=0, len=data.length; i<len; i++) { if(data[i].length > 0) { data = data[i]; break; } } var html = ''; if(!(data[0] instanceof Array)) { $.each(data, function(k, v) { html += '<option>'+v.name+'</option>'; }); } $(selector).html(html); } } renderData('.level-one', recursiveGetData(postObj, '')); // select1 $('.level-one').change(function() { dataArr = []; renderData('.level-two', recursiveGetData(postObj, $(this).val())); $('.level-three').html(''); }); // select2 $('.level-two').change(function() { dataArr = []; renderData('.level-three', recursiveGetData(postObj, $(this).val())); }); ~~~ ## 五、递归交替（先由外到内，再由内到外） 数据结构  ~~~ var reverseTreeArr = []; function alternationRecursive(data, id) { $.each(data, function(i, item) { if(item.id === id) { reverseTreeArr.push({[item.id]: item.code}); if(item.parentid) { alternationRecursive(departments, item.parentid); } } else { if(item.children.length > 0) { alternationRecursive(item.children, id); } } }); } alternationRecursive(departments, '568b9d2c-4c46-4a35-aad9-1786c47356dc'); console.log(reverseTreeArr); ~~~ ## 六、列表数据转树状数据(数组) ``` // 原始数据 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 }, ]; // 转换后的数据 var convertData = []; // 递归方法 function recursiveData(id, index, list, cdata) { list.forEach(function(v) { if(v.pid === id) { cdata[index] = Object.assign({}, v); cdata[index].children = []; recursiveData(v.id, index, list, cdata[index].children); cdata[index].children = cdata[index].children.filter(function(v) { // 过滤无效数据 return v; }); index++; } }); } recursiveData(0, 0, data, convertData); // 打印数据 console.log(JSON.stringify(convertData)); ``` 打印结果 ``` [{ "id": 1, "name": "办公管理", "pid": 0, "children": [{ "id": 2, "name": "请假申请", "pid": 1, "children": [{ "id": 4, "name": "请假记录", "pid": 2, "children": [] }] }, { "id": 3, "name": "出差申请", "pid": 1, "children": [] }] }, { "id": 5, "name": "系统设置", "pid": 0, "children": [{ "id": 6, "name": "权限管理", "pid": 5, "children": [{ "id": 7, "name": "用户角色", "pid": 6, "children": [] }, { "id": 8, "name": "菜单设置", "pid": 6, "children": [] }] }] }] ``` ## 七、列表数据转树状数据(对象) ``` // 原始数据 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 }, ]; // 转换后的数据 var convertData = {}; // 递归方法 function recursiveData(id, list, cdata) { list.forEach(function(v) { if(v.pid === id) { var key = 'c'+v.id; cdata[key] = Object.assign({}, v); cdata[key].children = {}; recursiveData(v.id, list, cdata[key].children); } }); } recursiveData(0, data, convertData) // 打印 console.log(JSON.stringify(convertData)); ``` 打印结果 ``` { "c1": { "id": 1, "name": "办公管理", "pid": 0, "children": { "c2": { "id": 2, "name": "请假申请", "pid": 1, "children": { "c4": { "id": 4, "name": "请假记录", "pid": 2, "children": {} } } }, "c3": { "id": 3, "name": "出差申请", "pid": 1, "children": {} } } }, "c5": { "id": 5, "name": "系统设置", "pid": 0, "children": { "c6": { "id": 6, "name": "权限管理", "pid": 5, "children": { "c7": { "id": 7, "name": "用户角色", "pid": 6, "children": {} }, "c8": { "id": 8, "name": "菜单设置", "pid": 6, "children": {} } } } } } } ```