Closed. This question needs to be more focused。它当前不接受答案。
想改善这个问题吗?更新问题,使其仅通过editing this post专注于一个问题。
5年前关闭。
好人,请向我解释,请使用此功能:
这是沙盒的链接,完整代码为:http://jsbin.com/zonoxereqa/1/edit
我如何看待这些功能非常了解:
仅
我仍然不明白为变量childrenUl分配了什么?为什么总是在调试器中未定义它?
然后将子对象作为子列表追加到递归中
如果该值不是空对象,则不会创建子列表,因为第一个命令存在停止条件:
逐步处理上面的数组:对于第一个项目,该函数创建
但这还没有完成,现在递归称为:
现在要说的是:第三个论点。在执行递归之前,它看起来像这样:
但是第三个成员的值不是一个空对象,因此命令
像上面一样一步一步创建一个
如果某些嵌套项目包含另一个非空对象,则它将作为子子列表附加到某些子列表
有可能更好地阅读等价物:
想改善这个问题吗?更新问题,使其仅通过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/