JS 深度优先遍历与广度优先遍历 实现查找
在日常的开发工作中，牵扯到层级结构比较复杂的节点，如树形节点，级联选择器，这些都是牵扯到前端算法的遍历的；本文将介绍常用到的两种遍历方式：深度优先遍历和广度优先遍历
深度优先遍历：depth first search
广度优先遍历：breadth first search
目录
1.示意图
2.具体的代码示例
2.1.深度优先遍历
2.2.广度优先遍历
3.总结
1.示意图
通过两组示意图来明白什么叫做深度优先遍历和广度优先遍历
- 图一（深度遍历示意图）
深度遍历查找会按照图中绿色标注的数字去查找，就相当于是一条道走到黑，如果没有叶子节点的话，会再拐回来，回溯到上一个节点再搜索其余的，按照同样一条道走到黑的过程去遍历，直到把整个节点都遍历完了就停止遍历；
- 图二（广度遍历示意图）
广度遍历的遍历顺序如图所示，也是按照我上图标注的数字大小去先后遍历的，不要太在意颜色的不同，我之所以把颜色用不同的来标注是因为我想要强调的是：广度遍历是先把同级的节点遍历完毕以后再去遍历下级节点，直到把所有节点都遍历完毕以后就停止遍历；相当于警察抓小偷的游戏中，警察们从一个点由里圈向外圈一圈一圈发散那样去抓一个小偷一样。
2.具体的代码示例
以树形节点为例子，用JS代码实现两种查找方式：
// 这个是要进行遍历的树形节点
const root = [
{
"id":1,
"pid":null,
"key":1,
"title":"1-1111",
"children":[
{
"id":2,
"pid":1,
"key":2,
"title":"2-1111",
"children":[
{
"id":4,
"pid":2,
"key":4,
"title":"8-1111",
"children":[]
},
{
"id":5,
"pid":2,
"key":5,
"title":"9-1111",
"children":[
{
"id":7,
"pid":5,
"key":7,
"title":"5-1111",
"children":[]
},
{
"id":8,
"pid":5,
"key":8,
"title":"8-1111",
"children":[]
},
]
},
{
"id":6,
"pid":2,
"key":6,
"title":"10-1111",
"children":[]
},
]
},
{
"id":3,
"pid":1,
"key":3,
"title":"9-1111",
"children":[]
}
]
}
]
2.1.深度优先遍历
深度优先查找（depth first search），采用栈结构，后进先出，JS用递归实现和没有用递归实现
// 用递归实现深度优先遍历
const depthFirstSearchWithRecursive = source => {
const result = []; // 存放结果的数组
// 递归方法
const dfs = data => {
// 遍历数组
data.forEach(element => {
// 将当前节点 id 存放进结果
result.push(element.id);
// 如果当前节点有子节点，则递归调用
if (element.children && element.children.length > 0) {
dfs(element.children);
}
});
};
// 开始搜索
dfs(source);
return result;
};
const s = depthFirstSearchWithRecursive(root)
console.log(s);// 结果为 [1, 2, 4, 5, 7, 8, 6, 3]
// 不用递归实现深度遍历优先
const depthFirstSearchWithoutRecursive = source => {
const result = []; // 存放结果的数组
// 当前栈内为全部数组
const stack = JSON.parse(JSON.stringify(source));
// 循环条件，栈不为空
while (stack.length !== 0) {
// 最上层节点出栈
const node = stack.shift();
// 存放节点
result.push(node.id);
// 如果该节点有子节点，将子节点存入栈中，继续下一次循环
const len = node.children && node.children.length;
for (let i = len - 1; i >= 0; i -= 1) {
stack.unshift(node.children[i]);
}
}
return result;
};
const s = depthFirstSearchWithoutRecursive(root)
console.log(s);// 结果为 [1, 2, 4, 5, 7, 8, 6, 3]
2.2.广度优先遍历
广度优先查找（breadth first search），采用栈结构，后进先出，JS用递归实现和没有用递归实现
const breadthFirstSearch = source => {
const result = []; // 存放结果的数组
// 当前队列为全部数据
const queue = JSON.parse(JSON.stringify(source));
// 循环条件，队列不为空
while (queue.length > 0) {
// 第一个节点出队列
const node = queue.shift();
// 存放结果数组
result.push(node.id);
// 当前节点有子节点则将子节点存入队列，继续下一次的循环
const len = node.children && node.children.length;
for (let i = 0; i < len; i += 1) {
queue.push(node.children[i]);
}
}
return result;
};
const s = breadthFirstSearch(root)
console.log(s);// 结果为 [1, 2, 3, 4, 5, 6, 7, 8]
3.总结
以上的两种方法就是本篇的重点内容了，如果对你的开发有帮助的话，欢迎点赞或评论
主要是参考了这篇文章：https://juejin.cn/post/6844903893118238733#heading-2