JS从“深度优先”和“广度优先”遍历获取数据中某一属性值的集合

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、 总结

• 网上有很多更好用的方法，也是从深度和广度两个方面遍历数据或节点树。这两个方法，我是通过思考和实践写出来了。
• 优点：相对比较容易理解。缺点：代码量确实比网上的方法要大一半。
• 自学前端半年，萌新入门，欢迎各位技术大拿提出意见和指教。