小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金

大家好，我是速冻鱼🐟，一条水系前端💦，喜欢花里胡哨💐，持续沙雕🌲，是隔壁寒草🌿的好兄弟，刚开始写文章。 如果喜欢我的文章，可以关注➕点赞，为我注入能量，与我一同成长吧～

前言🌧️

算法，对前端人来说陌生又熟悉，很多时候我们都不会像后端工程师一样重视这项能力。但事实上，算法对每一个程序员来说，都有着不可撼动的地位。

因为开发的过程就是把实际问题转换成计算机可识别的指令，也就是《数据结构》里说的，「设计出数据结构，在施加以算法就行了」。

编写指令的好坏，会直接影响到程序的性能优劣，而指令又由数据结构和算法组成，所以数据结构和算法的设计基本上决定了最终程序的好坏。

另外，在阅读源码时，如果缺乏对算法和数据结构的了解，也会让我们无法理解作者这样写的原因，读起来十分困难。

如今的大环境里，算法已经成为了前端工程师发展路上不可或缺的技能之一。如果我们想未来更上一层楼，不再是只写业务代码的应用工程师，就离不开对算法和数据结构的掌握。

当然，学习也是有侧重点的，作为前端我们不需要像后端开发一样对算法全盘掌握，有些比较偏、不实用的类型和解法，只要稍做了解即可。

什么是深度/广度优先遍历?👋

• 深度优先遍历：尽可能深的搜索树的分支。

  就好比我们看书的时候先看第一章节，在看每一章节的每个小节，再具体到每一页

• 广度优先遍历：先访问离根结点最近的节点

  就好比我们看书的时候先看目录，在看每一章节的概要，再具体到每一页

  

深度优先遍历算法口诀🌵

• 访问根结点
• 对根结点的children挨个进行深度优先遍历

深度优先遍历源码🦀

const tree = {
    val: 'a',
    children: [
        {
            val: 'b',
            children: [
                {
                    val: 'd',
                    children: [],
                },
                {
                    val: 'e',
                    children: [],
                }
            ],
        },
        {
            val: 'c',
            children: [
                {
                    val: 'f',
                    children: [],
                },
                {
                    val: 'g',
                    children: [],
                }
            ],
        }
    ],
};

const dfs = (root) => {
    console.log(root.val);
    root.children.forEach(dfs);
};

dfs(tree);

广度优先遍历算法口诀🌵

• 新建一个队列，把根节点入队。
• 把对头出队并访问。
• 把对头的children挨个入队。
• 重复第二、三步，直到队列为空。

广度优先遍历源码🦀

const tree = {
    val: 'a',
    children: [
        {
            val: 'b',
            children: [
                {
                    val: 'd',
                    children: [],
                },
                {
                    val: 'e',
                    children: [],
                }
            ],
        },
        {
            val: 'c',
            children: [
                {
                    val: 'f',
                    children: [],
                },
                {
                    val: 'g',
                    children: [],
                }
            ],
        }
    ],
};
const bfs=(root)=>{
  const q=[root];
  while(q.length>0){
    const n=q.shift();
    console.log(n);
    n.children.forEach(child=>{
      q.push(child);
    })
  }
}
bfs(tree);

结束语🌞

那么鱼鱼的LeetCode算法篇的树的深度与广度优先遍历就结束了，虽然前端对算法要求没有后端高，但是算法是编程基础，程序=数据结构➕算法，所以算法这个东西没有捷径，只能多写多练，多总结，文章的目的其实很简单，就是督促自己去完成算法练习并总结和输出，菜不菜不重要，但是热爱🔥，喜欢大家能够喜欢我的短文，也希望通过文章认识更多志同道合的朋友，如果你也喜欢折腾，欢迎加我好友，一起沙雕，一起进步。

github🤖:sudongyu

个人博客👨‍💻:速冻鱼blog

vx👦:sudongyuer

写在最后

伙伴们，如果喜欢我的口水话给🐟🐟点一个赞👍或者关注➕都是对我最大的支持。