浅拷贝和深拷贝

首先定义两个对象

data: {
      // 对象一
      obj1:{
        name:'pingchangxin',
      },
      // 对象二
      obj2:{
        name:'',
      }
    },

一、浅拷贝：

浅拷贝就是只拷贝表面的数据，其内存所指的地址还是一样的，所以修改其中一个另外一个也会被修改，比如下面：

methods:{
edit1(){
        this.obj2 = this.obj1; //把obj1复制给obj2
        this.obj1.name = 'pingchangxinzuishuai' //修改obj1的name属性
        console.log(this.obj1.name) //打印结果为pingchangxinzuishuai
        console.log(this.obj2.name) //打印结果为pingchangxinzuishuai
      }
}      

二、深拷贝

深拷贝就是不仅复制另一个对象的数据，而且还会生成一个指向不同内存地址的对象，当修改原对象的数据时，这个新生成的对象不会发生改变,可以利用Object.assign()来实现，比如下面:

edit2(){
        this.obj2 = Object.assign({},this.obj1); //把obj1复制给obj2
        this.obj1.name = 'pingchangxinzuishuai' //修改obj1的name属性
        console.log(this.obj1.name) //打印结果为pingchangxinzuishuai
        console.log(this.obj2.name) //打印结果为pingchangxin
      },

三、Object.assign是不是万能的呢？

我都这么问了，那明显不是万能的，因为在用Object.assign的时候它只对对象里面的第一层数据有效，比如下面这个例子：

data: {
      // 对象一
      obj1:{
        name:'pingchangxin',
        params:[0,1,2,3],
      },
      // 对象二
      obj2:{
        name:'',
        params:[],
      }
    },
methods:{
      edit2(){
        this.obj2 = Object.assign({},this.obj1);
        this.obj1.params[0] = 9; //修改obj1的params属性
        console.log(this.obj1.params) //打印结果为[9,1,2,3]
        console.log(this.obj2.params) //打印结果为[9,1,2,3]
      },
    }

大家会发现，当我用了Object.assign之后修改了obj1，obj2也随之改变了，所以这里给大家提个醒，那这种情况怎么办呢？

最简单的方法就是把第二层的数据拿出来单独Object.assign一份，再放回原对象里面，比如下面这样:

data: {
      // 对象一
      obj1:{
        name:'pingchangxin',
        params:[0,1,2,3],
      },
      // 对象二
      obj2:{
        name:'',
        params:[],
      },
      // 暂时存放数据的数组
      helpparams:[],
    },
methods:{
      edit2(){
        // 先把obj1.params单独复制给helpparams
        this.helpparams = Object.assign([],this.obj1.params)
        // 然后再分别复制obj1.name属性给obj2.name和helpparams给obj2.params
        this.obj2.name = Object.assign({},this.obj1.name)
        this.obj2.params = Object.assign([],this.helpparams)
        this.obj1.params[0] = 9; //修改obj1的params属性
        console.log(this.obj1.params) //打印结果为[9,1,2,3]
        console.log(this.obj2.params) //打印结果为[0,1,2,3]
      },
    }

这里就是运用了Object.assign只对最外层数据有效的原理,如果说obj1有两层甚至三层,我们一层一层复制给obj2就没问题了。

本文地址：https://blog.csdn.net/ImDaret/article/details/107890555