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

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

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

前言🌧️

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

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

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

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

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

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

图是什么? 😊

• 图是网络结构的抽象模型，是一组由边连接的节点。
• 图可以表示任何二元关系，比如道路、航班✈️

• JS中没有图，但是可以用Object和Array构建图。
• 图的表示法：领接矩阵、领接表、关联矩阵......

图的表示法 🍃

邻接矩阵

邻接表

图的常用操作🦀

• 深度优先遍历

  尽可能深的搜索图的分支。

• 广度优先遍历

  先访问离根节点最近的节点。

图的深度优先遍历 🌵

深度优先遍历算法口诀 🐂

• 访问根节点
• 对根节点的没访问过的相邻节点挨个进行深度优先遍历。

深度优先遍历源码 🔥

const graph={
    0:[1,2],
    1:[2],
    2:[0,3],
    3:[3]
}

const visited=new Set();

const dfs=(n)=>{
    console.log(n);
    visited.add(n);
    graph[n].forEach(c => {
        if(!visited.has(c)){
            dfs(c)
        }
    });
}
dfs(2)

图的广度优先遍历 🌵

广度优先遍历算法口诀 🐂

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

深度优先遍历源码 🔥

const graph={
    0:[1,2],
    1:[2],
    2:[0,3],
    3:[3]
}

const visited=new Set()

const q=[2];

visited.add(2)
while(q.length){
    const n=q.shift();
    console.log(n);
    graph[n].forEach(c => {
        if(!visited.has(c)){
            q.push(c)
            visited.add(c)
        }
    });
}

结束语🌞

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

github🤖:sudongyu

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

vx👦:sudongyuer

写在最后

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

加我微信：sudongyuer，邀你进群，一起学习前端，成为更优秀的工程师～（群二维码在这里->前端要早睡, 二维码过期了的话看链接沸点中的评论，我会把最新的二维码放在评论区，当然也可以加我微信我拉你进群，毕竟我也是有趣的前端，认识我也不赖🌟～

「欢迎在评论区讨论，掘金官方将在掘力星计划活动结束后，在评论区抽送100份掘金周边，抽奖详情见活动文章」。