.map(node => { 

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

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

                return { 

                    node, 

                    dom: $li 

                }; 

            }); 

 

        const $ul = domNodes 

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

 

        // 将两个数组构成一个元组（对象）返回 

        return { 

            domNodes, 

            $ul 

        }; 

    } 

 

    // 解析元组，声明变量 queue 和 $rootUl， 

    // 并分别将 domNodes 和 $ul 的值赋值给 queue 和 $rootUl 两个变量 

    const { domNodes: queue, $ul: $rootUl } = convert(roots); 

 

    while (queue.length) { 

        const { node, dom } = queue.shift()!; 

 

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

            const { domNodes, $ul } = convert(node.nodes); 

            dom.append($ul); 

            queue.push(...domNodes); 

        } 

    } 

    return $rootUl; 

}  

看疗效：http://jsfiddle.net/y7bw4yj2/1/

【编辑推荐】

1. JavaScript的函数式编程，你懂得吗？
2. 早年端到全端：JavaScript逆袭之路
3. 若何用JavaScript实现双向数据绑定
4. JavaScript开辟者的10款必备对象
5. JavaScript的6个算法实用小技能

【义务编辑：庞桂玉 TEL：（010）68476606】

深度遍历生成节点

　　推荐阅读

　　让我们一起来消灭CSRF跨站请求伪造（上）

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

本文标题：使用递归遍历并转换树形数据（以TypeScript为例）

地址：http://www.17bianji.com/lsqh/38416.html

 1/2    1