javaScript使用递归循环遍历多层级对象方法（无限不定数层级）

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，发现这就是我们想要的代码格式

总结

当我们需要多次调用同一个函数的时候，就可以使用递归
全文原创，觉得这篇文章不错的话，给我多多点赞评论收藏哦~~
打赏支持 ~