遞歸是一種解決方案，通過不斷的調用自己，達到實現功能的目的。 在特殊業務下才有可能使用到，先了解，不必強求，真正需要的時候再深究。 下面講幾個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": {} } } } } } } ```