Question

说我有这种树结构：

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

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

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

深度等于3，因为root作为深度为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;
  }

有些事情。（我知道这不起作用:-)）。

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>

让孩子拥有最大的父母深度

2 个答案: