Object.assign()方法详解

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

语法

Object.assign(target, ...sources)

参数：

target

目标对象

source

源对象

 

返回值

目标对象

说明：

如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。

String类型和 Symbol 类型的属性都会被拷贝。

在出现错误的情况下，例如，如果属性不可写，会引发TypeError，如果在引发错误之前添加了任何属性，则可以更改target对象。

注意，Object.assign 不会跳过那些值为 null 或 undefined 的源对象。

示例：

1. 返回值是目标对象，返回值是目标对象，返回值是目标对象！

var obj1 = {
    name: 'jack',
    age: 25
}

var obj2 = {
    name: 'curry'
}
var obj3 = {
    age: 30
}

Object.assign(obj1, obj2, obj3) ;

// { name: 'curry', age: 30 }
console.log(obj1) ;

由此可见，Object.assign()是对目标对象进行修改。

2. 复制对象

var obj1 = {
    a: 1,
    b: 2,
    c: 'usa'
}
targetObj = {} ;
var target = Object.assign(targetObj, obj1) ;

// { a: 1, b: 2, c: 'usa' }
console.log(targetObj)
// true
console.log(targetObj === target) ;

由此可见，Object.assign()返回的确实是目标对象（targetObj）。

注意，Object.assign()复制对象，第一级属性深拷贝，以后级别属性浅拷贝。

也就是说，源对象某个属性的属性值如果是一个引用，那么复制的也只是这个引用。

var obj1 = {
    a: 1,
    b: 2,
    c: 'usa'
}

var targetObj = Object.assign({}, obj1) ;
// { a: 1, b: 2, c: 'usa' }
console.log(targetObj)

obj1.a = 4 ;
console.log('--------------------') ;
// { a: 1, b: 2, c: 'usa' }
console.log(targetObj)
// { a: 4, b: 2, c: 'usa' }
console.log(obj1)

这种情况下，源对象的属性值是基本数据类型（Number, String），此时目标对象对于属性值的拷贝属于深拷贝。

var obj1 = {
    name: {first: 'Stenphen', second: 'Jack'}
}

var targetObj = Object.assign({}, obj1) ;
// { name: { first: 'Stenphen', second: 'Jack' } }
console.log(targetObj)

obj1.name.first = 'qinney' ;
console.log('--------------')
// { name: { first: 'qinney', second: 'Jack' } }
console.log(obj1)
// { name: { first: 'qinney', second: 'Jack' } }
console.log(targetObj)

源对象的属性值是引用类型，目标对象复制的只是这个引用，属于浅拷贝。

3. 合并对象

var obj1 = {a: 1} ;
var obj2 = {b: 2} ;
var obj3 = {c: 3} ;

var targetObj = Object.assign({}, obj1, obj2, obj3) ;
// { a: 1, b: 2, c: 3 }
console.log(targetObj)

4. 合并具有相同属性的对象

var obj1 = {a: 1, b: 6, c: 100} ;
var obj2 = {b: 2} ;
var obj3 = {c: 5} ;

var targetObj = Object.assign({}, obj1, obj2, obj3) ;
// { a: 1, b: 2, c: 5 }
console.log(targetObj)

相同的属性，属性值会被后面的覆盖。