JS处理多层嵌套数据

李逸风

已于 2022-10-24 10:52:10 修改

阅读量2.5k

点赞数 1

文章标签： javascript 前端 html 递归嵌套数据处理 1024程序员节

于 2022-10-15 18:09:38 首次发布

本文链接：https://blog.youkuaiyun.com/sheng_li/article/details/127337610

版权

本文介绍如何在JavaScript中处理多层嵌套数据，特别是在前端开发中将这种数据渲染到HTML页面上。通过一个实例展示了如何避免使用多层for循环，转而采用递归方式解决这个问题。示例代码演示了如何构建一个函数，该函数能够动态处理任意层级的数据，并将其转换为HTML结构。递归的关键在于检查每个元素是否存在子级（child），如果有，则继续调用自身函数，最终形成完整的HTML字符串。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们假设有一组数据，他有两层，我们现在要将他通过 ul > li 标签将他渲染到页面上，该怎么处理呢？

就比如下面这种

let data = [
    {
        name: '深圳学校'
        child: [
            {
                name: '深圳一中'
            },
            {
                name: '深圳二中'
            },
        ]
    },
    {
        name: '东莞学校'
        child: [
            {
                name: '东莞一中'
            },
            {
                name: '东莞二中'
            },
        ]
    }
]

可能我们会想到for循环去嵌套for循环，利用两个for循环来实现这个需求，就比如下面这段代码实现

为了更清晰的看到代码效果，我们先写一个通用的页面结构

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="list"></div>
    <script>
        // 处理代码...
    </script>
  </body>
</html>

然后编写for循环代码

let str = `<ul>`
for (let i = 0; i < data.length; i++) {
    str += `<li>${data[i].name}</li>`
    let strs = `<ul>`
    for (let j = 0; j <

最低0.47元/天解锁文章