使用简单算法加jQuery接受json数据传入到Html树中

1.我们前端开发经常会得到后端人员的一个json数据，如果每次我们都去根据结构解析数据挺麻烦的，所以我写了一个简单的算法去解决这个问题，可以遍历大多数json数据

2.我们模拟从后台得到一个类似下面的数据，我们先传递一个简单一些的数据，json内部数据的数组部分

 let obj2 = [
{name:'周星驰1' , key : '至尊宝1' ,child1 : [
{name:'周星驰child1' , key : '至尊宝child'},
{name:'周星驰child2' , key : '至尊宝'},
{name:'周星驰child3' , key : '至尊宝'},
{name:'周星驰child4' , key : '至尊宝'},
{name:'周星驰child5' , key : '至尊宝'},
],
child2 :[
{name:'周星驰child1' , key : '至尊宝child'},
{name:'周星驰child2' , key : '至尊宝'},
]
},
{name:'周润发' , key : '发哥1',child:[{name:'周润发child1' , key : '赌神child'},]},
{name:'周杰伦' , key : '周董1'},

]

    我们来遍历这个对象，我们把对象obj当作一个树的根节点，他有3个子节点，每个子节点都是一个子树，每个子树可能有自己的叶子和child子树，child子树又可能有自己的叶子和child子树....以此类推形成一个庞大的大树。

  分析这个树，其实你会发现十分容易但是有代表性，通过分析，我们发现在这个树的节点中，只有3中，1：叶子节点，也就是我们需要的数据，2：拥有叶子节点和子树节点的节点，3：在2的基础上拥有叶子节点和子树节点的节点，子树拥有多个子树节点，其实就是更复杂一些的2类型的数据。把这三种数据对应在js的对象，就几乎是等于js的object(代表2类型)，array（代表3类型，代表多个子树节点没有叶子节点的集合)，和string（对应1，就是我们需要的值节点）。现在问题就十分清楚了，我们只需要分这三种情况就可以遍历这颗树了。我们开始写代码

//遍历树
function readTree(obj){
if(obj instanceof Array ){//他是[]，里面放个很多个节点
let length = obj.length;
//先获取数据对象个数，也就是子树节点个数
for(let i = 0 ; i <= length ; i++ ){
let eachObj = obj[i];
//开始遍历数据每一项，也就是得到每一个子树节点
for(let key in eachObj){
if(typeof eachObj[key]==='object'){//遍历每一个子树节点
console.log(key+"开始")
//每一项的键值是对象也就是子树节点那就递归
readTree(eachObj[key]);
console.log(key+"结束")
}else{
//每一项是值也就是叶子节点就输出
console.log(key+":"+eachObj[key])
}
}
}
}else if(typeof obj === 'object'){
//传过来了一个对象
for(i in obj){
//先遍历这个对象,对象下的每一项是对象就递归，不用考虑Array，因为递归帮我们考虑了 
let eachObj = obj[i];