javascript - 获取 parent 深度最大的 child

Question

假设我有这个树结构:

-root
|
|
|-child1
 |
 |-innerChild1
 |
 |-innerChild2
|
|-child2

我想制作一个 JS 函数，它接受树的一个元素，并从它的 Angular 来看它有多深。例如:

    var depth = getInnerDepth(root);
    depth = 3;

深度等于 3，因为根作为深度 1 的父级，在深度 2 有一级 child ，其中一个 (child1) 在深度 3 有 child 。

    var depth = getInnerDepth(child1);
    depth = 2;

深度等于2，因为child1在这种情况下被认为是父级，所以它的深度是1。child1有 child ，所以结果是2。

   var depth = getInnerDepth(innerChild1);
   depth = 1;

深度为1，因为从innerChild1的 Angular 来看，它没有任何 child ，所以它的深度为1。

我想这应该递归地实现，但我很难想出一个好的方法。

 function getInnerDepth(parent){ 
   var depth = 1; 
   if (parent.hasChildren) {
    depth++;
    parent.children.forEach(function(child){ getInnerDepth(child); }) 
   }
   return depth;
  }

类似的东西。 (我知道这不起作用 :-))。

Answer 1

我相信这会按要求工作，假设 .children 属性是一个数组，基于 OP 在他们的尝试中对 .forEach 的使用:

function getInnerDepth(node) {
    if (node.hasChildren) {
        var depths = node.children.map(getInnerDepth);
        return 1 + Math.max.apply(Math, depths);
    } else {
        return 1;
    }
} 

使用 DOM 的示例仅用于说明(需要进行小的调整，因为 DOM 中的 children 并不是真正的数组):

function getInnerDepth(node) {
  if (node.children.length) {
    var depths = Array.prototype.map.call(node.children, getInnerDepth);
    return 1 + Math.max.apply(Math, depths);
  } else {
    return 1;
  }
}

document.body.addEventListener("click", function(e) {
  console.log("Depth: ", getInnerDepth(e.target));
}, false);

div:not(.as-console-wrapper) {
  padding-left: 2em;
  border: 1px solid black;
}

<div>
  Root
  <div>
    Child 1
    <div>
      Sub-child 1-1
    </div>
    <div>
      Sub-child 1-2
      <div>
        Sub-child 1-2-1
      </div>
    </div>
  </div>
  <div>
    Child 2
  </div>
</div>