[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 } ~~~