获取最大深度为 parent 的 child

Question

假设我有这个树结构：

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

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

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

深度等于 3，因为根作为 parent 在深度 1，在深度 2 具有一级 children，并且其中一个 (child1) 在深度 3 具有 children。

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

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

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

深度等于1，因为从innerChild1的角度来看，它没有任何children，所以它的深度为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>

Answer 2

由于OP在我回答之前并不清楚用法，所以这里是DOM版本。

function getInnerDepth(parent){ 
   var depth = 1; 
   if (parent.children.length) {
     var childDepth = 0;
     for(var i=0; i<parent.children.length; i++){
       childDepth = Math.max(getInnerDepth(parent.children[i]), childDepth);
     };
     depth += childDepth;
   }
   return depth;
}

console.log(getInnerDepth(document.getElementById('root')));

<div id="root">
  <span></span>
  <ul>
    <li></li>  
  </ul>
</div>

获取最大深度为 parent 的 child

Get the child with biggest depth of a parent

javascript

recursion

dom

children

depth