前端练习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代替的，没什么区别

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

参考

• #75 最高产的猪@ScriptOJ
• JS 中的广度与深度优先遍历@掘金
• ParentNode.childElementCount@MDN
• children.length和childElementCount？@知乎