[TOC] >[success] # 渲染ul-li樹形結構 需求：請求接口后，根據后端返回的數據進行渲染成ul li的樹的結構樣式。 樹型數據結構： ~~~ var data = [ { name: '1', hasChild: false, child: [] }, { name: '2', hasChild: true, child: [ { name: '2-2', hasChild: false, child: [] } ] } ] ~~~ 要實現的效果： ~~~ <ul> <li>1</li> <li>2 <ul> <li>2-2</li> </ul> </li> </ul> ~~~ <br/> >[success] ## 實現思路1（for循環） ~~~ 這種方式雖然也能實現，但是僅限'已知層級的樹形結構'，如果是無限層級的樹就需要用遞歸的方式實現。 ~~~ ~~~ // 拼接變量 var str = ''; str = '<ul>' for (var i = 0; i < data.length; i++) { // 循環第一層樹節點 str += '<li>' + data[i].name; if (data[i].hasChild && !!data[i].child) { // 是否存在子級 str += '<ul>' for (var j = 0; j < data[i].child.length; j++) { // 循環第二層樹節點 str += '<li>' + data[i].child[j].name + '</li>' } str += '</ul>' } str += '</li>' } str += '</ul>' ~~~ <br/> >[success] ## 實現思路2（遞歸） ~~~ // 遞歸樹 function recursive(data) { var str = '<ul>'; for (var i = 0; i < data.length; i++) { // 循環第一層樹節點 str += '<li>' + data[i].name if (data[i].hasChild && !!data[i].child) { // 循環第N層樹節點 str += recursive(data[i].child) // 子節點拼接好return返回的數據: <ul><li>2-2</li></ul> } str += '</li>' } str += '</ul>'; return str } ~~~