浅拷贝 深拷贝

1.浅拷贝

浅拷贝只是复制了对象的引用地址,两个对象指向同一个内存地址,所以修改其中任意的值,另一个值都会随之变化。
就是把一个 对象的地址给了另一个对象,他们指向相同,两个对象之间有共同的属性或者方法,都可以使用。
浅拷贝 深拷贝_第1张图片
常见的浅拷贝方法:

	<script>
        var user = {
     
            name:'张三',
            age:18,
            hobby:['吃饭','睡觉','打老曹']
        }
        var newUser = user
        newUser.age = 12 // 改变newUser里面的age
        console.log(user);// 结果 :{name: '张三', age: 12, hobby: Array(3)}
        console.log(user);// 结果: {name: '张三', age: 12, hobby: Array(3)}
    </script>

2.深拷贝

深拷贝是将内存地址及值都复制一遍,生成全新的对象,两个对象修改其中任意的值另一个值不会改变。
就是在内存中重新开辟一个空间,它们各自有各自的指向,两个对象之间都有自己的属性或者方法。
浅拷贝 深拷贝_第2张图片
通过 递归 深拷贝:

	<script>
         // 1.封装一个深拷贝函数  传入新对象与旧对象
         function setCopy(newObj, object) {
     
            // 用for in循环旧对象
            for (k in object) {
     
                // 用一个临时变量接收一下当前元素的值
                let item = object[k]
                // 判断当前元素的值是不是数组  这里一定要先判断数组   因为数组也是对象
                if (Array.isArray(item)) {
     
                    // 如果当前元素的值是数组   就在新对象内创建一个键为当前元素的键等于一个空数组
                    newObj[k] = []
                    // 利用递归 调用封装函数setCopy  传入上一步创建的数组,和当前元素值
                    setCopy(newObj[k], item)
                } else if (item instanceof Object) {
      //判断当前元素值不是对象
                    // 如果当前元素的值是对象  就在新对象内创建一个键为当前元素的键等于一个空对象
                    newObj[k] = {
     }
                    // 利用递归 调用封装函数setCopy  传入上一步创建的对象,和当前元素值
                    setCopy(newObj[k], item)
                } else {
      // 如果当前元素值既不是数组也不是对象
                    // 如果当前元素的值既不是数组也不是对象 就变现在是一个简单数据类型  直接在新对象里面创键一个键为当前元素的键等于当前元素的值
                    newObj[k] = item
                }
            }
        }

        const user = {
     
            name: '张三',
            age: 18,
            hobby:['吃饭','睡觉','打老曹']
        }
        const newUser = {
     }
        // 2.调用封装的函数拷贝
        setCopy(newUser, user)
       
        newUser.age = 12 // 改变newUser里面的age
        console.log(user);// 结果 :{name: '张三', age: 18, hobby: Array(3)}
        console.log(newUser);// 结果: {name: '张三', age: 12, hobby: Array(3)}
	</script>

你可能感兴趣的:(javascript,前端)