先画个树，然后解释 何为深度，何为广度
第一层 子集
|
__________________________
| |
第二层 1 子集 第二层 2 子集
| |
-----------------
第三层 11，子集 第三层 12
|
第四层 111
图就不画太复杂了，最高四层的结构，如果换成 html 的形式的话可以理解成
<div>------ 第一层
<ul>---------- 第二层 1
<li> ----------- 第三层 11
<span></span> ----------- 第四层 111
</li>
<li>--------------- 第三层 12
</li>
</ul>
<p></p> ------------ 第一层 2
<div>
深度遍历，就是 从 第一层开始 -》1 -》11 -》111 -》12 -》2
这个意思就是，如果有下一级优先探索下一级的，没有了话，再去探索兄弟层级（以此类推）
就是做一道菜，需要菜和调料，调料是需要调制的，比如调料需要鸡汁和糖，鸡汁又需要调制，那么 正常流程 就是，
1、开始做菜 -》开始调料 -》鸡汁 -》调制鸡汁的材料
2、等这些弄完了，再去加糖，完成调料步骤
3、糖加完了，再去切菜，完成做菜步骤
这个就是一个深度的过程
而广度遍历则相反，顺序应该是 -> 1-> 2 -> 11 -> 12 -> 111
意思就是有兄弟层级优先解析兄弟层级，然后解析下一层级
广度比较符合正常人的思维，就像复习的时候，
1. 先把整本书捋一遍，然后画重点，
2. 捋完之后看重点，重点内容里面有一些具体时间，再整理出来，
3. 最后重点背诵时间
广度遍历需要手动去终结（判断还有没有整理内容了）
根据 js 单线程的原理，深度很好实现，因为循环递归默认就是深度遍历
把刚刚的图 写成一个数组
const arr = [
{
name: '1',
childrens: [
{
name: '11',
childrens: [
{name: '111'}
]
},
{name: '12'}
]
},
{name: '2'}
]我多加了一些换行，方便看清楚
深度遍历
function check(nodeArr) {
nodeArr.forEach(node => {console.log(node.name)
if(node.childrens) {check(node.childrens)
}
})
}
check(arr) //
1
11
111
12
2这段代码很好理解，如果有子集，将子集和父集做同样处理，或者说，作为一个新的参数给 check 这个方法。
广度遍历
广度遍历的话需要一个容器去记录子集，等此层级的兄弟集处理完成，再去处理子集，子集的处理也以此类推
先上代码
function checkN(nodeX) {var node_ = []; // 用来存储子集
nodeX.forEach(node => {console.log(node.name);
if(node.childrens) {node_ = [...node_, ...node.childrens];
}
})
if(node_[0])
checkN(node_);
}
checkN(arr) //
1
2
11
12
111具体内容就这些了，这两个算法我刚刚自己想着写的，不知道和一些比较正式的文章算法是不是略有出入，我也懒得去看了