ES6之Object.assign()用法，Object.assign()到底是浅拷贝还是深拷贝？

一、Object.assign()的用法：

1、Object.assign()方法的第一个参数是目标对象，后面的参数都是源对象，Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

var obj = {};
var o1 = { a: 1 };
var o2 = { b: 2 };
var obj = Object.assign(obj, o1, o2);
console.log(obj); // { a: 1, b: 2 }

     

    
    

    

     
1
     
2
     
3
     
4
     
5
    

注意：如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

const target = { a: 1, b: 1 };
const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
console.log(target); // {a:1, b:2, c:3}

     

    
    

    

     
1
     
2
     
3
     
4
     
5
    

2、Vue中的使用技巧：

由于Object.assign()有上述特性，所以我们在Vue中可以这样使用：Vue组件可能会有这样的需求：在某种情况下，需要重置Vue组件的data数据。此时，我们可以通过this.$data获取当前状态下的data，通过this.$options.data()获取组件初始状态下的data。然后只要使用Object.assign(this.$data, this.$options.data())就可以将当前状态的data重置为初始状态，非常方便。

二、Object.assign()到底是深拷贝还是浅拷贝？

1、通过上面我们已经对Object.assign()的用法有了一定的了解，那么Object.assign()到底是深拷贝还是浅拷贝呢？

• 对象的浅拷贝：浅拷贝是对象共用的一个内存地址，对象的变化相互影响。
• 对象的深拷贝：简单理解深拷贝是将对象放到新的内存中，两个对象的改变不会相互影响。

2、测试1：

let srcObj = {'name': 'lilei', 'age': '20'};
let copyObj2 = Object.assign({}, srcObj);
console.log('srcObj', srcObj);		//'name': 'lilei', 'age': '20'
console.log('copyObj2', copyObj2);	//'name': 'lilei', 'age': '20'
srcObj.name="zhangsan";
console.log('srcObj', srcObj);		//'name': 'zhangsan', 'age': '20'
console.log('copyObj2', copyObj2);	//'name': 'lilei', 'age': '20'
copyObj2.age="10";
console.log('srcObj', srcObj);		//'name': 'zhangsan', 'age': '20'
console.log('copyObj2', copyObj2);	//'name': 'lilei', 'age': '10'

     

    
    

    

     
1
     
2
     
3
     
4
     
5
     
6
     
7
     
8
     
9
     
10
    

从上面可以看出我们使用Object.assign()将srcobj的属性拷贝到了copyobj2中，而当我们修改srcobj（源对象）的属性或是copyobj2（目标对象）的属性时，变化的只有对象本身，这样看来是深拷贝啊，别着急下结论我们继续测试；

3、测试2：

let srcObj = {'name': 'lilei', 'grade': {'chi':"80", 'eng':"100"}};
let copyObj2 = Object.assign({}, srcObj);
console.log('srcObj', srcObj);		//name: "lilei" grade: {chi: "80", eng: "100"}
console.log('copyObj2', copyObj2);	//name: "lilei" grade: {chi: "80", eng: "100"}

     

    
    

    

     
1
     
2
     
3
     
4
    

还是和上面一样，我们先将srcobj对象的属性拷贝到目标对象中，正常打印输出；

1）首先我们在上面代码的基础上修改源对象的属性：

let srcObj = {'name': 'lilei', 'grade': {'chi':"80", 'eng':"100"}};
let copyObj2 = Object.assign({}, srcObj);
srcObj.name="zhangsan";
srcObj.grade.chi="10";
console.log('srcObj', srcObj);		//name: "zhangsan" grade: {chi: "10", eng: "100"}
console.log('copyObj2', copyObj2);	//name: "lilei" grade: {chi: "10", eng: "100"}

     

    
    

    

     
1
     
2
     
3
     
4
     
5
     
6
    

2）我们试试修改目标对象的属性，看看对源对象有什么影响：

let srcObj = {'name': 'lilei', 'grade': {'chi':"80", 'eng':"100"}};
let copyObj2 = Object.assign({}, srcObj);
copyObj2.name="zhangsan";
copyObj2.grade.chi="50";
console.log('srcObj', srcObj);		//name: "lisi" grade: {chi: "50", eng: "100"}
console.log('copyObj2', copyObj2);	//name: "zhangsan" grade: {chi: "50", eng: "100"}

     

    
    

    

     
1
     
2
     
3
     
4
     
5
     
6
    

分析：从例子中可以看出，当我们修改目标对象的属性值时，源对象的name没有变化，但是grade.chi却被改变了（修改源对象的属性也是同理），因此我们可以看出Object.assign()拷贝的只是属性值，假设源对象的属性值是一个指向对象的引用，那么它也只拷贝那个引用值。

总结：也就是说，对于Object.assign()而言，如果对象的属性值为简单类型（string，number），通过Object.assign({},srcobj);得到的新对象为深拷贝；如果属性值为对象或其他引用类型，那对于这个对象而言其实是浅拷贝的，这是Object.assign()特别需要注意的地方。

另外多说一句，Object.assign({},src1,src2);对于src1和src2之间相同的属性是直接覆盖的，如果属性值为对象，是不会对对象直接的属性进行合并的。

补充：Object.assign不会在那些源对象值为null或undefined的时候抛出错误。