1.需求
在做一个Echarts关系图项目的时候碰到一个需求,后端传过来的数据格式是这样子的:
"data":{
name:"小明",
relation:null
children:{
name:"小红",
relation:"情侣"
children:{
name:"小蓝",
relation:"同学"
... // 这里还有很多层,且层级数是不定的
}
}
}
而我在echarts关系图中,需要用到的数据格式是这样的:
[
{
name:"小明"
},
{
name:"小红"
},
{
name:"小蓝"
},
]
这里肯定是要对数据进行处理的,但for ... in...
每次只能循环到一层,第二层想要再循环需要再那for ... in...
,但是层级那么多且又不定,那么如何循环多层级对象?且对象层级是不定的?
我想到了一个办法:使用递归函数
2.使用递归循环多层级对象
递归的基本概念
- 自己调用自己的函数叫做递归函数,递归函数是在程序中函数直接或间接调用自己。
具体实践
代码:
// 后端传过来的数据,这里应该是res.data,这里为了方便大家观看,用模拟数据
var serverData = {
name: "小明",
children: {
name: "小红",
relation: "情侣",
children: {
name: "小蓝",
relation: "同学",
children: {
name: "小绿",
relation: "同学"
// ...
// 这里还有很多层,且层级数是不定的
}
}
}
}
// 定义一个数组,用来存放处理后的数据
var datalist = [];
// 定义递归函数 里面的参数datas就是我们每次调用要处理的对象
function doObj(datas) {
// 循环每次的对象
for (let key in datas) {
// 如果它里面的children还是对象的话,就再调用一次这个函数
if (typeof datas.children == "object") {
// 递归,这里的调用传入的参数都是每一层的children对象!!
doObj(datas.children);
// CSDN coderYYY
}
datalist.push({
name: datas.name
});
// 跳出循环,避免重复push
break;
}
}
// 这里第一次调用,参数是serverData一整个对象
doObj(serverData);
console.log(datalist)
// CSDN coderYYY
打印datalist,发现这就是我们想要的代码格式
总结
当我们需要多次调用同一个函数的时候,就可以使用递归
全文原创,觉得这篇文章不错的话,给我多多点赞评论收藏哦~~
打赏支持 ~