JavaScript深度优先遍历(DFS)和广度优先遍历(BFS）算法的笔记

本篇文章给大家带来的内容是关于JavaScript深度优先遍历(DFS)和广度优先遍历(BFS）算法的介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

背景： 主要是无意间看到好多乱写的文章，自己留个纪念，不喜勿喷！

准备

首先准备一个嵌套的数据。

const datasource = [
      {
        title: 1,
        children: [
          {
            title: 2,
            children: [
              {
                title: 5,
                children: [
                  {
                    title: 8,
                    children: [
                      {
                        title: 10,
                      }
                    ]
                  }
                ]
              },
              {
                title: 6,
                children: [
                  {
                    title: 9,
                  }
                ]
              },
              {
                title: 7,
              },
            ]
          },
          {
            title: 3
          },
          {
            title: 4
          },
        ]
      },
      {
        title: 11,
      }
    ];

让我们来把这个dom结构转化成树的样子（借了别人的图，属实是懒得搞了）

深度优先

深度优先比较常见，就是一条道跑到黑，然后在查找出发点的兄弟节点，然后在向深度遍历，依次类推！

function loop(data) {
   data.forEach(item => {
     console.log(item.title);
     if (item.children && item.children.length) {
       loop(item.children)
     }
   });
}
loop(datasource)

输出结果：

广度优先

和深度有点遍历不同，广度优先是先把同层节点全都遍历一遍，然后在去查找下一层的第一个节点再遍历这个层，依次类推！

function loop1(data) {
   let childArr = []
   data.forEach(item => {
     console.log(item.title);
     if (item.children) {
        childArr = [...childArr, ...item.children]
      }
   });
   if (childArr.length) {
     loop1(childArr)
   }
}

输出结果：

这个切实也没什么难度，就是在边里当给层的时候，把下一层的节点都掏出来放到一个新的集合中去，然后判断结合是否有数，有则直接调用递归函数即可！