使用递归遍历并转换树形数据（以TypeScript为例）

// 大年夜一组节点生成 <ul>，为每个节点生成并附加 <li>，

// 同时将 <li> 到到 <ul> 中保存构造信息

function makeUl(nodes: INode[]) {

return nodes

.map(node => {

const $li = $("<li>")

.append($("<div>").text(node.name || ""));

node.dom = $li;

return $li;

})

.reduce(($ul, $li) => $ul.append($li), $("<ul>"));

}

const $rootUl = makeUl(roots);

const queue: INode[] = [...roots];

while (queue.length) {

const node = queue.shift()!;

if (node.nodes && node.nodes.length) {

const $ul = makeUl(node.nodes);

node.dom.append($ul);

queue.push(...node.nodes);

}

return $rootUl;

}

固然这里和膳绫擎讲递归遍历 printNode 的时刻一样定义下场部函数表达式 makeUl，但这琅绫腔有递归，因为 makeUl 内部没有调用自身，或者某个会调用 makeUl 的函数。

然后同伙说没看明白，好吧，那我大年夜头讲起

但问题照样再深刻一点，因为膳绫擎的代码改变了原数据。而一般情况下，我们应当尽量避免如许的副感化

没有副感化的广度遍历生成节点

// 声明一个新构造，它把 INode 和 DOM 组合在一路。 
// 这个构造将代替 INode 作为队列的元素类型 
interface IDomNode { 
    node: INode; 
    dom: JQuery; 
} 
 
function makeTreeWidely(roots: INode[]): JQuery { 
    // convert 将节点数组转换为 IDomNode 数组， 
    // 同时还干了本来 makeUl 干的工作，返回一个 $ul 
    function convert(nodes: INode[]) { 
        const domNodes = nodes 
	
			 4/5   首页 上一页 2 3 4 5 下一页 尾页	
			

　　推荐阅读
　　让我们一起来消灭CSRF跨站请求伪造（上）
            导致HTTP verb应用欠妥的重要原因在于浏览器对HTTP标准的支撑存在缺点，这是一种汗青遗留问题。在XML HTTP  Request(XHR)风行起来之前，我们几乎得依附特定框架和代码库来应用HTTP verb(除了GET和POST之>>>详细阅读


本文标题：使用递归遍历并转换树形数据（以TypeScript为例）
地址：http://www.17bianji.com/lsqh/38416.html
 1/2    1