闭包与递归什么是闭包什么是递归,递归为何会难倒一众程序员浅拷贝与深拷贝深拷贝使用递归实现深拷贝递归遍历dom树

闭包

闭包是什么 :

a.是一个访问其他函数内部变量的函数

b.函数+上下文调用

闭包的作用: 解决全局变量污染

    // fn1()+num 形成一个闭包
    function fn() {
            let num = 10

            function fn1() {
                console.log(num)
            }
            fn1()
        }
        fn()

递归

什么是递归 : 在函数内部调用自己(递归原理简单,使用极其复杂)

作用:浅拷贝与深拷贝 he 遍历dom树

浅拷贝与深拷贝

浅拷贝:拷贝地址

深拷贝

拷贝数据

使用递归实现深拷贝

    let obj = {
            name: 'kunkun',
            age: '23',
            hobby: ['唱', '跳'],
            student: {
                name: '班长',
                score: 90
            }
        }

        // 使用递归拷贝
        function fn(obj, newObj) {
            for (let key in obj) {
                if (obj[key] instanceof Array) {
                    newObj[key] = []
                    fn(obj[key], newObj[key])
                } else if (obj[key] instanceof Object) {
                    newObj[key] = {}
                    fn(obj[key], newObj[key])
                } else {
                    newObj[key] = obj[key]
                }
            }
        }

        // 创建一个空对象
        let newObj = {}
        fn(obj, newObj)
        console.log(obj, newObj)

递归遍历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: ['雀巢咖啡']
                    }
                ]
            }
        ]

         /* 使用递归遍历数组 */
         function addElement(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)
                 // 如果元素还有data属性,则需要使用递归继续添加下级菜单
                 if (arr[i].data) {
                     addElement(arr[i].data, div)
                 }
             }
         }

         //调用递归函数
         addElement(arr, document.querySelector('.menu'))

    </script>
</body>

</html>