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

return $li;

}

function makeNodeList(nodes: INode[]): JQuery<HTMLElement> {

return nodes

.map(child => makeNode(child))

.reduce(($ul, $li) => {

return $ul.append($li);

}, $("<ul>"));

}

return makeNodeList(roots);

}

效不雅照样蛮不错的

遍历办法

树形数据的遍历有两种办法，大年夜家都知道：广度遍历和深度遍历。一般情况下，广度遍历是采取队列来实现，而深度遍历刚更合适应用递归来实现。

广度遍历

大年夜图上大年夜致可以懂得广度遍历的过程：

预备一个空队列;
将根(单根或多根均可)节点放到队列中;
大年夜队列中掏出一个节点
处理(比如打印)这个节点
检查节点的子节点，如不雅有，全部依次添加到队列中
回到第 3 步开端处理，直到队列为空(处理完成)

function travelWidely(roots: INode[]) { 
    const queue: INode[] = [...roots]; 
    while (queue.length) { 
        const node = queue.shift()!; 
        // 打印节点名称及其子节点数 
        console.log(`${node.name} ${node.nodes && node.nodes.length || ""}`); 
        if (node.nodes && node.nodes.length) { 
            queue.push(...node.nodes); 
        } 
    } 
} 
 
// 开端遍历 
travelWidely([data]);

const node = queue.shift()!，这后面的 ! 后缀表示声明其结不雅不为 undefined 或 null。这是一个 TypeScript 语法。因为 .shift() 在数组中没有元素时会返回 undefined，所以其返回类型被声明为 INode | undefined，因为大年夜逻辑可以包管 .shift() 必定会返回一个节点对象，所以这里用 ! 后缀忽视类型中的 undefined 部分，使 node 的类型被推导为 INode。

代率攀里稍难解得一点的是要留意 queue 的内容和长度随时在变更。如不雅想应用 for 代替 while 轮回，节点序号会因 .shift() 而赓续变更，所以 i < queue.length 如许的断定是缺点的。

深度遍历是一个递归过程，递归一向是编程的可贵。

递归是一个轮回来去的处理过程，它有两个点须要留意：

递归调用点，递归调用本身(或另一个可能会调用本身的函数)
递归停止点，退出当前函数

以树节点为例，我们期望处理过程是处理(打印)一个树结点，即 printNode(node: INode)。那么它的

递归调用点：如不雅该节点有子节点，依次对子节点调用 printNode(children[i])
递归停止点：处理完所有子节点(子节点数量是有限的，所以必定会停止)

用一段伪代码描述这一过程

2/5 首页上一页 1 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