获取父节点最深层次的子节点

Question

假设我有这样的树形结构：

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

我想编写一个JS函数，它可以接收一棵树的元素，并从该元素的角度来查看它有多深。例如：

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

这里的“深度”是指根节点作为父节点位于第1层，它的一级子节点位于第2层，其中一个子节点（child1）拥有深度为3的子节点。

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

深度为2，因为在这种情况下child1被认为是父级，所以它的深度为1。Child1有子节点，所以结果为2。

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

深度为1，因为从innerChild1的角度来看，它没有任何子元素，所以它的深度为1。

我想这应该是递归实现的，但我在思考一个好的方法时遇到了困难。

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

类似于这样的内容。（我知道这不起作用 :-) ）。

（注：该段文字已被翻译为中文，保留了原有的HTML标签。）

- Konstantin Hadzhiev

---

我认为这个链接可以帮助你入门：https://dev59.com/u2865IYBdhLWcg3wfeqU - Jonas Grumann

你只需要深度还是带有深度的子节点？ - Nina Scholz

只是深度 @NinaScholz - Konstantin Hadzhiev

这与DOM有关吗？ - prosti

不，这与JavaScript对象有关。我有一个组的数组，可能有子组，也可能没有。 - Konstantin Hadzhiev

这里有一个使用.reduce()的例子...function getDepth(root, depth) { return root.children.reduce((d, ch) => Math.max(d, getDepth(ch, depth+1||1)), depth||0) } - user1106925

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>

- Alnitak

---

我应该更具体一些，这与DOM无关。我有一个可能有子组的组数组。我需要能够看到每个组的深度。我现在会尝试您的建议。 - Konstantin Hadzhiev

@KonstantinHadzhiev 算法是一样的，唯一不同的是如何确定节点是否有子节点以及它们的名称。 - Alnitak

@T.J.Crowder做得很好，DOM版本很棒 - 我也在同一时间添加了一个（不可运行的）。 - Alnitak

Answer 2

由于提问者之前没有明确使用情况，因此在我回答之前，这里提供 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>

- JstnPwll