JS实现深度优先遍历和广度优先遍历
1、要求
- 获取以下数据结构中所有name属性值的集合。
- 数据的结构如下:
const myData = [
{
name: 'a',
children: [
{ name: 'b', children: [{ name: 'e' }] },
{ name: 'c', children: [{ name: 'f' }] },
{ name: 'd', children: [{ name: 'g' }] },
]
},
{
name: 'a2',
children: [
{ name: 'b2', children: [{ name: 'e2' }] },
{ name: 'c2', children: [{ name: 'f2' }] },
{ name: 'd2', children: [{ name: 'g2' }] },
],
}
]
2、实现
2.1、深度优先遍历
- 思路:myData的结构和children的结构是一致的,都要经过循环获得name => 在循环的过程中判断是否有子节点,有则递归子节点,否则仅保存name。
- 程序如下:
function deepTraversal(data) {
const result = [];
function getName(node) {
if (Array.isArray(node) && node.length > 0) {
node.forEach(item => {
if (item.name) {
result.push(item.name)
}
if (item.children) {
getName(item.children);
}
})
}
}
getName(data);
return result;
}
console.log(deepTraversal(myData));
- 输出结果:
["a", "b", "e", "c", "f", "d", "g", "a2", "b2", "e2", "c2", "f2", "d2", "g2"]
2.2、广度优先遍历
- 思路:跟深度优先遍历类似。区别在于子节点不先执行遍历操作,而是先把所有的子节点放入队列 => 收集完成后,利用while循环取出队列中的子节点,执行getName,继续把下一级的子节点放入队列 => 直到队列为空,则返回结果。
- 程序如下:
function wideTraversal(data) {
const result = [];
const child = [];
function getName(node) {
if (Array.isArray(node) && node.length > 0) {
node.forEach(item => {
if (item.name) {
result.push(item.name);
}
if (item.children) {
child.push(item.children);
}
});
}
}
getName(data);
while (child.length > 0) {
let current = child.shift();
getName(current);
}
return result;
}
console.log(wideTraversal(myData));
- 运行结果:
["a", "a2", "b", "c", "d", "b2", "c2", "d2", "e", "f", "g", "e2", "f2", "g2"]
3、 总结
- 网上有很多更好用的方法,也是从深度和广度两个方面遍历数据或节点树。这两个方法,我是通过思考和实践写出来了。
- 优点:相对比较容易理解。缺点:代码量确实比网上的方法要大一半。
- 自学前端半年,萌新入门,欢迎各位技术大拿提出意见和指教。