先画个树,然后解释 何为深度, 何为广度

                            第一层  子集                                    |                        __________________________                        |                        |                第二层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) //111111122

这段代码很好理解,如果有子集,将子集和父集做同样处理,或者说,作为一个新的参数给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) //121112111

具体内容就这些了,这两个算法我刚刚自己想着写的,不知道和一些比较正式的文章算法是不是略有出入,我也懒得去看了