JavaScript高级中递归遍历DOM树案例与递归,JSON深拷贝方法详解

最新推荐文章于 2023-11-05 21:28:42 发布

我的Y轴是反的

最新推荐文章于 2023-11-05 21:28:42 发布

阅读量281

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/vip77778888/article/details/122203528

版权

直接上代码

递归遍历DOM树

JSON深拷贝

递归深拷贝

递归遍历DOM树

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .menu p {
      width: 100px;
      border: 3px solid;
      margin: 5px;
    }

    .menu>div p {
      margin-left: 10px;
      border-color: red;
    }

    .menu>div>div p {
      margin-left: 20px;
      border-color: green;
    }

    .menu>div>div>div p {
      margin-left: 30px;
      border-color: yellow;
    }
  </style>
</head>

<body>
  <div class="menu">
    <!-- <div>
        <p>第一级菜单</p>
        <div>
          <p>第二级菜单</p>
          <div>
            <p>第三级菜单</p>
          </div>
        </div>
      </div> -->
  </div>
  <script>
    //服务器返回一个不确定的数据结构,涉及到多重数组嵌套
    let arr = [{
        type: '电子产品',
        data: [{
            type: '手机',
            data: ['iPhone手机', '小米手机', '华为手机']
          },
          {
            type: '平板',
            data: ['iPad', '平板小米', '平板华为']
          },
          {
            type: '智能手表',
            data: []
          }
        ]
      },
      {
        type: '生活家居',
        data: [{
            type: '沙发',
            data: ['真皮沙发', '布沙发']
          },
          {
            type: '椅子',
            data: ['餐椅', '电脑椅', '办公椅', '休闲椅']
          },
          {
            type: '桌子',
            data: ['办公桌']
          }
        ]
      },
      {
        type: '零食',
        data: [{
            type: '水果',
            data: []
          },
          {
            type: '咖啡',
            data: ['雀巢咖啡']
          }
        ]
      }
    ]
    let menu = document.querySelector('.menu')

    function add(arr, father) {
      for (let i = 0; i < arr.length; i++) {
        let div = document.createElement('div')
        div.innerHTML = `<p>${arr[i].type||arr[i]}</p>`
        father.appendChild(div)
        if (arr[i].data) {
          add(arr[i].data, div)
        }
      }
    }
    add(arr, menu)
  </script>
</body>

</html>

JSON深拷贝

<!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>
  <script>
    let obj = {
      name: '聪明蛋',
      age: 30,
      hobby: ['打台球', '看视频', '吃东西']
    }
    // (1)先把js对象转换为JSON格式字符串,JSON.stringify(js对象)
    //json在把js抓成json格式字符串的时候,底层会自动帮你深拷贝
    //(2)再把刚刚的json字符串,转成js对象,JSON.parse(json格式)
    let newObj = JSON.parse(JSON.stringify(obj))
    newObj.hobby = '打台球'
    console.log(newObj, obj)
  </script>
</body>

</html>

递归深拷贝

<!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>
  <script>
    let obj = {
      name: '聪明蛋',
      age: 30,
      hobby: ['讲课', '学生', '学习'],
      friend: {
        name: '朋友',
        sex: '男'
      }
    }

    function copy(newObj, obj) {
      for (let key in obj) {
        if (obj[key] instanceof Array) {
          newObj[key] = []
          copy(newObj[key], obj[key])
        } else if (obj[key] instanceof Object) {
          newObj[key] = {}
          copy(newObj[key], obj[key])
        } else {
          newObj[key] = obj[key]
        }
      }
    }
    let newObj = {}
    copy(newObj, obj)
    newObj.hobby[1] = '爱吃糖'
    console.log(newObj, obj);
  </script>
</body>

</html>