广度优先和深度优先
BFS算法（Breadth-First-Search，广度优先搜索）BFS简介BFS类似于树的层次遍历过程,从根节点开始，沿着树的宽度遍历树的节点。如果所有节点均被访问，则算法中止。
广度优先搜索（BFS）是一种图形搜索算法，其目的是在图形中找到从起点到终点的最短路径。
算法思路队列（先进先出）
创建一个空队列queue（用来存放节点）和一个空列表visit（用来存放已访问的节点）
依次将起始点及邻接点加入queue和visit中
poo出队列中最先进入的节点,从图中获取该节点的邻接点
如果邻接点不在visit中，则将该邻接点加入queue和visit中
输出pop出的节点
重复3、4、5，直至队列为空
算法思路待续
代码实现(JavaScript)下面是一个使用 JavaScript 实现的简单广度优先搜索算法的代码示例：
123456789101112131415161718192021222324252627282930313233function BFS(graph, start, end) { const queue = [start]; const ...
MacOS M2 安装MySQL服务
安装Homebrew这里应该需要在终端开启代理才能访问。
1/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
然后在终端输入命令查看版本，用来确定安装成功
1brew -v
安装指定版本的MySQL这里安装MySql 5.71brew install mysql@5.7
添加环境变量安装完成会有类似于这样的文字出现
12If you need to have mysql@5.7 first in your PATH, run: echo 'export PATH="/opt/homebrew/opt/mysql@5.7/bin:$PATH"' >> ~/.zshrc
然后输入这里可能有变化，请输入自己终端显示的内容
1echo 'export PATH="/opt/homebrew/opt/mysql@5.7/bin:$PATH"' ...
使用Docker Desktop创建容器
安装Docker Desktop
首先去官网进行下载，选择你的电脑系统进行下载安装。
这里国内访问可能有点慢，可使用🪜
测试安装的成功与否打开终端，输入以下命令查看docker的版本，能够显示就说明安装成功了。
1docker -v
构建Node映像为Node.js创建一个Dockerfile接下来，我们需要在Dockerfile中添加一行，告诉Docker应用程序将使用哪个基本映像。
123# syntax=docker/dockerfile:1FROM node:18-alpine
Docker镜像可以从其他镜像继承。因此，我们将使用官方的Node.js镜像，而不是创建我们自己的基本镜像，它已经拥有运行Node.js应用程序所需的所有工具和包。您可以用与面向对象编程中的类继承相同的方式来考虑这个问题。例如，如果我们能够在JavaScript中创建Docker镜像，我们可能会编写如下内容。class MyImage extends NodeBaseImage {}这将创建一个名为MyImage的类，它继承了基类NodeBaseImage的功能。以同样 ...
使用 iTerm2 打造美观高效的 Mac 终端
iTerm2iTerm2 是默认终端的替代品，也是目前 macOS 下最好用的终端工具，集颜值和效率于一身。
进入官网，点击Download按钮进行下载安装。
进行一些基础设置设置热键为了快速唤出 iterm2 终端，这里推荐使用热键进行唤出。但是需要程序常驻后台，也就是说不能退出程序，这就好比你使用微信截图或者QQ截图功能，需要打开对应的程序。
设置status bar（顶部的状态栏）iterm2 提供了很多 Status bar，可在在终端页面显示更多关于本机的信息，如：CPU、内存、电池电量等。
配色选择一个自己喜欢的配色方案或者自定义。
光标选择这里提供了三种光标可供选择：_,|,[]
窗口设置这里可以设置窗口透明度、背景图片、行列数以及风格等。可参考：![pp16qmQ.png](https://s1.ax1x.com/2023/03/15/pp16qmQ.png
最终效果如下
oh-my-zsh下载oh-my-zsh可能需要科学上网工具才能进行访问
使用crul使用wegt1sh -c "$(curl -fsSL https://raw.githubuser ...
前端面试之JS基础篇(三)
深浅拷贝在 JavaScript 中，赋值操作符=可以实现浅拷贝，即复制一个对象的引用给另一个对象。当修改其中一个对象的属性时，另一个对象的相应属性也会改变。这是因为两个对象共享同一个内存地址。
但是，在某些情况下，我们需要拷贝一个对象，同时又不想改变原始对象，这时就需要深拷贝了。深拷贝是指将一个对象完整地拷贝一份，即创建一个新的对象，两个对象互不影响。
实现深拷贝有多种方法，其中比较常见的是：
JSON.parse() 和 JSON.stringify() 实现这种方法先将对象序列化为 JSON 字符串，再将字符串解析为新的对象，从而实现深拷贝。123function deepClone(obj) { return JSON.parse(JSON.stringify(obj));}
这种方法虽然简单，但是有一些限制 ：
无法处理函数、正则表达式、Date 等特殊类型。
无法处理循环引用的情况，比如对象 A 的某个属性引用了对象 A 本身。
手动递归拷贝每个属性递归实现是最常见的深拷贝方法，通过递归遍历对象或数组，将其内部的对象或数组也递归拷贝。1234 ...
前端面试之JS基础篇(二)
null，undefined的区别在 JavaScript 中，null和undefined都表示“没有值”的含义，但在使用时有一些区别。
null表示一个空对象指针，即该处不应该有值，是开发者为变量赋值的一种“无值”的情况。undefined表示变量已经声明，但是并未赋值，或者被显式地赋值为undefined。在使用null和undefined时需要注意：
如果要检查变量是否为null或undefined，最好使用全等运算符（=== 或 !==），因为这两个值都是 falsy 值（即转换为布尔值时为 false），使用双等运算符（== 或 !=）可能会出现意外结果。
如果要判断一个变量是否为null，可以使用null字面量进行判断，如：myVar === null。
如果要判断一个变量是否为undefined，可以使用 typeof 运算符，如：typeof myVar === 'undefined'。
在声明变量时，尽量不要将变量初始化为undefined，因为undefined不是 ...
前端面试之CSS基础篇(三)
a标签上四个伪类的执行顺序是怎么样的a标签上的四个伪类是:link、:visited、:hover、:active。它们的执行顺序是：
:link，表示链接的初始状态，未访问的链接。
:visited，表示链接被访问过的状态。
:hover，表示鼠标悬停在链接上的状态。
:active，表示链接被激活的状态，即鼠标按下但还没有释放的状态。
其中:visited会受到安全策略的影响，不允许修改链接的颜色、背景颜色和边框颜色等属性，以防止恶意网站进行欺骗、钓鱼等活动。如果有多个伪类选择器同时作用于一个元素，那么它们的优先级与 CSS 选择器的优先级规则一样，即后面的选择器优先级高。
例如，对于以下样式：
12a:link {color: red;}a:hover {color: green;}
当鼠标悬停在链接上时，文字颜色将变成绿色 ，而不是红色。
网站图片文件，如何点击下载，而非点击预览要让网站上的图片文件以下载而不是预览的形式呈现，可以为图片文件添加下载属性（download attribute）。
在 HTML 中，可以通过在 ...
前端面试之CSS基础篇(二)
伪类和伪元素的区别?在CSS中，伪类和伪元素是两个不同的概念。
伪类（Pseudo-class）是CSS中的一种选择器，用于选择某些元素的特定状态，例如链接的状态（未访问、已访问、悬停、激活），或者鼠标悬停在元素上时的状态。伪类在选择器后面使用一个冒号（:）来表示,例如：123a:hover { color: red;}
上面的代码中，:hover是一个伪类，用于选择鼠标悬停在链接上时的状态，并将链接的颜色设置为红色。
伪元素（Pseudo-element）是CSS中的另一种选择器，用于向某些元素添加特殊的效果或内容，例如为某些元素添加特定的样式或者在元素的内容前后添加特定的内容。伪元素在选择器后面使用两个冒号（::）来表示,例如:123p::before { content: "前缀";}
上面的代码中，::before是一个伪元素，用于在段落内容前添加一个”前缀”，并通过content属性指定前缀的内容。总的来说，伪类用于选择某些元素的特定状态，而伪元素用于向某些元素添加特殊的效果或内容。需要注意的是，虽然伪类和伪元 ...
前端面试之CSS基础篇(一)
css-sprite是什么-有什么优缺点?CSS sprite 是一种将多个图像合并为一个单独的大图像的技术，然后使用 CSS 背景定位和剪切来呈现图像。
优点
减少 HTTP 请求数量：合并图像为一张大图可以减少网页中的 HTTP 请求数量，从而提高网页加载速度。
提高缓存效率：一次请求的大图比多次请求的多张小图更易缓存，从而降低网页加载时间。
减小图像文件大小：因为图像可以合并为一个单独的大图，所以文件大小也会减小。
缺点
不适合大图：如果图像文件过大，合并图像可能会导致大图加载时间过长。
不利于图像维护：如果需要更改图像，需要重新合并大图，并且需要重新修改 CSS 代码。
无法支持动态图像：CSS sprite 只适用于静态图像，对于动态图像不适用。
总体来说，CSS sprite 技术可以提高网页性能，但是在使用时需要注意适用情况和图像维护问题。
display-none-与visibility-hidden-的区别?display: none和visibility: hidden是 CSS 中两种用于隐藏元素的方法。但它们之间有一些显著的区别： ...
前端面试之JS基础篇(一)
JS中的数据类型有哪些
原始类型（Primitive types）：包括数字（Number）、字符串（String）、布尔值（Boolean）、空（Null）、未定义（Undefined）、大整数（BigInt）和符号（Symbol）。
引用类型（Reference types）：包括对象（Object）、数组（Array）、函数（Function）等。
在 ES6 中，还引入了新的数据类型：Map、Set、WeakMap、WeakSet，以及用于处理二进制数据的 ArrayBuffer、TypedArray 和 DataView 类型。
介绍js有哪些内置对象JavaScript 中有许多内置对象，它们提供了许多有用的方法和属性，下面是一些常见的内置对象：
Object：JavaScript 的基本对象，所有其他内置对象都是 Object 的后代。
Array：表示一个数组，提供了许多有用的方法来处理数组。
String：表示一个字符串，提供了许多有用的方法来处理字符串。
Number：表示一个数字，提供了许多有用的方法来处理数字。
Boolean：表示一个布尔值，即 tru ...