Closed. This question needs to be more focused。它当前不接受答案。
                        
                    
                
            
        
            
        
                
                    
                
            
                
                    想改善这个问题吗?更新问题,使其仅通过editing this post专注于一个问题。
                
                    5年前关闭。
            
        

    

好人,请向我解释,请使用此功能:

function createTreeDom(obj) {
  if (isObjectEmpty(obj)) return;

  var ul = document.createElement('ul');

  for (var key in obj) {
    var li = document.createElement('li');
    li.innerHTML = key;

    var childrenUl = createTreeDom(obj[key]);
    if (childrenUl) li.appendChild(childrenUl);

    ul.appendChild(li);
  }

  return ul;
}


这是沙盒的链接,完整代码为:http://jsbin.com/zonoxereqa/1/edit

我如何看待这些功能非常了解:

function isObjectEmpty(obj) {
  for (var key in obj) {
    return false;
  }
  return true;
}

function createTree(container, obj) {
  container.appendChild( createTreeDom(obj) );
}


createTreeDom(obj)递归函数,我不太了解她的工作,请帮助我解释她的工作。

我仍然不明白为变量childrenUl分配了什么?为什么总是在调试器中未定义它?

最佳答案

它使用嵌套对象创建嵌套列表。在一级嵌套中,它创建一个单级简单ul li, li ...列表。但是如果某个值是这样的非空对象

var arg = { "one":{}, "two":{}, "three":{"subone":{}, "subtwo":{}}, "four":{}};


然后将子对象作为子列表追加到递归中

var childrenUl = createTreeDom(obj[key]);
if (childrenUl) li.appendChild(childrenUl);


如果该值不是空对象,则不会创建子列表,因为第一个命令存在停止条件:

if (isObjectEmpty(obj)) return;


逐步处理上面的数组:对于第一个项目,该函数创建ul元素并将li以及key="one"obj[key]={}添加到其中:

<ul>
  <li>one</li>
</ul>


但这还没有完成,现在递归称为:createTreeDom({})。由于isObjectEmpty({})(显然)返回true,因此递归结束且childrenUl未定义。因此,没有内容添加到li,并且循环跳到第二个节点,这也是一个简单的字符串文字,因此它添加了另一个li节点:

<ul>
  <li>one</li>
  <li>two</li>
</ul>


现在要说的是:第三个论点。在执行递归之前,它看起来像这样:

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>


但是第三个成员的值不是一个空对象,因此命令

if (childrenUl) li.appendChild(childrenUl);


像上面一样一步一步创建一个ul节点,并填充其内容,并将其附加到li元素:

<ul>
  <li>one</li>
  <li>two</li>
  <li>three
    <ul>
      <li>subone</li>
      <li>subtwo</li>
    </ul>
  </li>
</ul>


如果某些嵌套项目包含另一个非空对象,则它将作为子子列表附加到某些子列表li中,依此类推。

有可能更好地阅读等价物:

function createTreeDom(obj) {
  var ul = document.createElement('ul');

  for (var key in obj) {
    var li = document.createElement('li');
    li.innerHTML = key;

    if (!isObjectEmpty(obj[key])) {
      var childrenUl = createTreeDom(obj[key]);
      li.appendChild(childrenUl);
    }

    ul.appendChild(li);
  }

  return ul;
}

关于javascript - 函数在创建DOM树中的递归,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26940845/

10-11 09:20
查看更多