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

一个朋友问我应该怎么从一个树的 JSON 数组生成 HTML，使用 <ul> 和 <li> 来构建页面元素。于是我简单的画了个树型结构图

然后写了对应的模拟数据（JavaScript 对象）

const data = {
    name: "A",
    nodes: [
        { name: "B", nodes: [{ name: "F" }] },
        { name: "C" },
        {
            name: "D",
            nodes: [
                { name: "G" },
                { name: "H" },
                { name: "I", nodes: [{ name: "J" }, { name: "K" }] }
            ]
        },
        { name: "E" }
    ]
};

最后写了一个递归，生成了 HTML 的树型结构。原本是用 JavaScript ES6 写的，为了表明数据结构，这里改用 TypeScript 来写：

interface INode {
    name: string;
    nodes?: INode[];
}

function makeTree(roots: INode[]): JQuery<HTMLElement> {
    function makeNode(node: INode): JQuery<HTMLElement> {
        const $div = $("<div>").text(node.name || "");
        const $li = $("<li>").append($div);
        if (node.nodes && node.nodes.length) {
            $li.append(makeNodeList(node.nodes));
        }
        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);
}

效果还是蛮不错的