JavaScript面向对象学习深拷贝、浅拷贝（三）

⭐️⭐️⭐️  作者：船长在船上
🚩🚩🚩  主页：来访地址船长在船上的博客
🔨🔨🔨  简介：资深前端开发工程师，专注前端开发，欢迎咨询交流，共同学习

🔔🔔🔔感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主，如果三连收藏支持就会更好，在这里博主不胜感激！！！

如有疑问可以留言、评论，看到后会及时回复。  

 

目录

理解

浅拷贝

深拷贝

问题解答

解构赋值是浅拷贝还是深拷贝？

---

理解

深拷贝：修改新变量的值不会影响原有变量的值。默认情况下基本数据类型都是深拷贝。
浅拷贝：修改新变量的值会影响原有的变量的值。默认情况下引用类型都是浅拷贝。

浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用。

深拷贝拷贝多层，每一级别的数据都会拷贝。

浅拷贝

        var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };
        var o = {};
        Object.assign(o, obj);
        console.log(o);
        o.msg.age = 20;
        console.log(obj);

打印结果：

深拷贝

 
        var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            },
            color: ['pink', 'red']
        };
        var o = {};
        // 封装函数 
        function deepCopy(newobj, oldobj) {
            for (var k in oldobj) {
                // 判断属性值属于那种数据类型
                // 1. 获取属性值  oldobj[k]
                var item = oldobj[k];
                // 2. 判断这个值是否是数组
                if (item instanceof Array) {
                    newobj[k] = [];
                    deepCopy(newobj[k], item)
                } else if (item instanceof Object) {
                    // 3. 判断这个值是否是对象
                    newobj[k] = {};
                    deepCopy(newobj[k], item)
                } else {
                    // 4. 属于简单数据类型
                    newobj[k] = item;
                }
 
            }
        }
        deepCopy(o, obj);
        console.log(o);
 
        var arr = [];
        console.log(arr instanceof Object);
        o.msg.age = 20;
        console.log(obj);

打印结果：

问题解答

解构赋值是浅拷贝还是深拷贝？

代码示例：

const obj = {
      name: 'name',
      age: 18,
      marry: false,
      addr: { city: '武汉' }
    }
 
let { name, age, marriage, addr } = obj
 
name = 'myname'
age = 26
marry = true
addr.city = '河南'
 
console.log(name, age, marry, addr) 
console.log(obj) 

打印结果：

 从对象a中解构赋值了name、age、marry、addr四个变量，分别是string、number、boolean 、object类型。改变这四个变量的值后，再与obj原来的值作对比，我们发现obj的name，age，marry属性没有改变，而addr属性发生了改变。由此可以得出结论，解构赋值对object类型只是浅拷贝。

实际上，无论是使用扩展运算符(...)还是解构赋值，对于引用类型都是浅拷贝。所以在使用splice()、concat()、...对数组拷贝时，只有当数组内部属性值不是引用类型时，才能实现深拷贝。 

 

  👉👉👉 欢迎来访船长在船上的博客，如有疑问可以留言、评论，看到后会及时回复。