今天在工作中又碰到了一个问题，根据需求要把后端返回的数据组装成一个有很多层级的树状结构，而且每个树状结构可以通过点击按钮继续生成或者删除子节点，为了动态调整页面的宽度，我需要知道这个树状结构的最大层级到底是多少
经过考虑，最终选择使用递归函数来实现这个效果：
var flag = 0; // 计数器，计算当前总共递归了多少层
var max = 0; // 保存最大递归层数
function getNumOfChild(arr) {
for (var i = 0; i < arr.length; i++) {
if (arr[i].children && arr[i].children.length > 0) {
// 如果子节点仍然有自己的子节点，那么计数器加一，并对子子节点调用函数
flag++;
getNumOfChild(arr[i].children);
} else {
// 更新最大递归层数
if (flag > max) {
max = flag;
}
}
}
// 每次循环结束后，计数器减一
if (flag !== 0) {
flag--;
}
}可以写一个测试数组来看看函数能否正常运行：
const test = [
{ id: 1, children: null },
{
id: 2,
children: [
{
id: 3,
children: [
{ id: 4, children: null },
{
id: 5,
children: [
{ id: 6, children: null },
{ id: 7, children: null },
],
},
],
},
],
},
];
getNumOfChild(test);
console.log(max); // 3