脚本宝典收集整理的这篇文章主要介绍了

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

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

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

clipboard.png

然后写了对应的模拟数据(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 来写:

猜你喜欢

发表评论

表情