前端练习43 最高产的猪 - Go语言中文社区

前端练习43 最高产的猪


知识点

  1. childElementCount
  2. 广度优先搜索

题目

用一个HTML结构表示一头猪的子子孙孙:

<div class="pig">
  <div class="pig">
    <div class="pig">
      <div class="pig"></div>
    </div>
    <div class="pig">
      <div class="pig"></div>
    </div>
    <div class="pig">
      <div class="pig"></div>
    </div>
  </div>
  <div class="pig">
    <div class="pig"></div>
    <div class="pig"></div>
  </div>
  <div class="pig">
    <div class="pig">
      <div class="pig"></div>
      <div class="pig"></div>
      <div class="pig"></div>
      <div class="pig"></div>
      <div class="pig"></div>
    </div>
  </div>
</div>

每个DOM节点都是一头猪,子节点就是这头猪的孩子。

请你完成一个函数findMostProductivePigChildrenCount它接受一个DOM节点作为参数,返回一个数组。存放同代猪最高产的猪的孩子的数量。例如:

1:          o
2:    o     o     o
3:  o o o  o o    o
4:  o o o       ooooo 

上面的结果是[3, 3, 5, 0],解释如下:

第一代猪有三个孩子,所以数组第一项是3

第二代的三头猪中,第一头猪生了3个,第二头猪生了2个,第三头猪生了1个。最高产的是第一头猪,它的孩子数是3,所以数组第二项为3

第三代的前三头猪都有一个后代,中间两头猪绝后,而最后一头猪惊人地生出了5头猪。这一代最高产的猪的孩子数是5,所以数组项是5

最后一代无后,所以是0

实现

题目比较复杂,但是说白了其实就是给出了一个树状结构,要求求出树的每一个层级的最大子节点数,然后存入到一个数组中。

做了半天,没做出来…

翻了评论区才了解到,这道题考察的是广度优先搜索的知识。

广度优先搜索

广度优先搜索是属于图的算法中的一种,相对应的就是深度优先搜索。这里先只学习广度优先搜索。

广度优先搜索就是按照数据结构的层次,一层层遍历搜索。它的思路是:

  1. 将根节点放入队列中
  2. 对当前队列进行遍历,对每一个成员进行处理(题目中就是求出成员的子节点数目)
  3. 在对成员处理时,如果有子节点,则将所有未经过处理的子节点加入新的队列中
  4. 当前队列遍历完成后,检查新的队列,如果新的队列中没有待检查的成员,则结束遍历
  5. 如果新的队列中有待检查的成员,则重复步骤2

根据这个思路,仿照别人的答案实现了:

const findMostProductivePigChildrenCount = (dom) => {
  let result = [];
  // 广度优先遍历
  const find = (targets, result) => {
    // 下一轮待遍历的节点
    let childrenTargets = [];
    // 当前轮遍历后子节点的最大值
    let max = 0;
    // 当前轮遍历
    for (let target of targets) {
      // 如果有子节点
      if (target.childElementCount) {
        // 将子节点放入待遍历的数组中
        childrenTargets.push(...target.children);
        // 当前轮遍历后子节点的最大值
        max = Math.max(max, target.childElementCount)
      }
    }
    result.push(max);
    // 进行下一轮遍历
    if (childrenTargets.length) {
      find(childrenTargets, result)
    }
  };
  // 初始化遍历,根节点放入队列中
  find([dom], result);
  return result;
}

这里面还是要注意,判断DOM子节点长度的时候用到了childElementCount属性,实际上也可以使用children.length代替的,没什么区别

唉,数据结构和算法,还差得远智商不够

参考

版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/duola8789/article/details/86063297
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2020-06-28 03:07:21
  • 阅读 ( 549 )
  • 分类:前端

0 条评论

请先 登录 后评论

官方社群

GO教程

推荐文章

猜你喜欢