Object.assign()方法

基本用法

​Object.assign()​​方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。

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

​Object.assign()​​方法的第一个参数是目标对象,后面的参数都是源对象。

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

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

如果只有一个参数,​​Object.assign()​​会直接返回该参数。

  1. ​const obj = {a: 1};​
  2. ​Object.assign(obj) === obj // true​

如果该参数不是对象,则会先转成对象,然后返回。

  1. ​typeof Object.assign(2) // "object"​

由于​​undefined​​​和​​null​​无法转成对象,所以如果它们作为参数,就会报错。

  1. ​Object.assign(undefined) // 报错​
  2. ​Object.assign(null) // 报错​

如果非对象参数出现在源对象的位置(即非首参数),那么处理规则有所不同。首先,这些参数都会转成对象,如果无法转成对象,就会跳过。这意味着,如果​​undefined​​​和​​null​​不在首参数,就不会报错。

  1. ​let obj = {a: 1};​
  2. ​Object.assign(obj, undefined) === obj // true​
  3. ​Object.assign(obj, null) === obj // true​

其他类型的值(即数值、字符串和布尔值)不在首参数,也不会报错。但是,除了字符串会以数组形式,拷贝入目标对象,其他值都不会产生效果。

  1. ​const v1 = 'abc';​
  2. ​const v2 = true;​
  3. ​const v3 = 10;​
  4. ​const obj = Object.assign({}, v1, v2, v3);​
  5. ​console.log(obj); // { "0": "a", "1": "b", "2": "c" }​

上面代码中,​​v1​​​、​​v2​​​、​​v3​​分别是字符串、布尔值和数值,结果只有字符串合入目标对象(以字符数组的形式),数值和布尔值都会被忽略。这是因为只有字符串的包装对象,会产生可枚举属性。

  1. ​Object(true) // {[[PrimitiveValue]]: true}​
  2. ​Object(10) // {[[PrimitiveValue]]: 10}​
  3. ​Object('abc') // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}​

上面代码中,布尔值、数值、字符串分别转成对应的包装对象,可以看到它们的原始值都在包装对象的内部属性​​[[PrimitiveValue]]​​​上面,这个属性是不会被​​Object.assign()​​拷贝的。只有字符串的包装对象,会产生可枚举的实义属性,那些属性则会被拷贝。

​Object.assign()​​​拷贝的属性是有限制的,只拷贝源对象的自身属性(不拷贝继承属性),也不拷贝不可枚举​的属性(​​enumerable: false​​)。

  1. ​Object.assign({b: 'c'},​
  2. ​Object.defineProperty({}, 'invisible', {​
  3. ​enumerable: false,​
  4. ​value: 'hello'​
  5. ​})​
  6. ​)​
  7. ​// { b: 'c' }​

上面代码中,​​Object.assign()​​​要拷贝的对象只有一个不可枚举属性​​invisible​​,这个属性并没有被拷贝进去。

属性名为 Symbol​ 值的属性,也会被​​Object.assign()​​拷贝。

  1. ​Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })​
  2. ​// { a: 'b', Symbol(c): 'd' }​

注意点

(1)浅拷贝

​Object.assign()​​方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。

  1. ​const obj1 = {a: {b: 1}};​
  2. ​const obj2 = Object.assign({}, obj1);​
  3. ​obj1.a.b = 2;​
  4. ​obj2.a.b // 2​

上面代码中,源对象​​obj1​​​的​​a​​​属性的值是一个对象,​​Object.assign()​​拷贝得到的是这个对象的引用。这个对象的任何变化,都会反映到目标对象上面。

(2)同名属性的替换

对于这种嵌套的对象,一旦遇到同名属性,​​Object.assign()​​的处理方法是替换,而不是添加。

  1. ​const target = { a: { b: 'c', d: 'e' } }​
  2. ​const source = { a: { b: 'hello' } }​
  3. ​Object.assign(target, source)​
  4. ​// { a: { b: 'hello' } }​

上面代码中,​​target​​​对象的​​a​​​属性被​​source​​​对象的​​a​​​属性整个替换掉了,而不会得到​​{ a: { b: 'hello', d: 'e' } }​​的结果。这通常不是开发者想要的,需要特别小心。

一些函数库提供​​Object.assign()​​​的定制版本(比如 Lodash 的​​_.defaultsDeep​​方法),可以得到深拷贝的合并。

(3)数组的处理

​Object.assign()​​可以用来处理数组,但是会把数组视为对象。

  1. ​Object.assign([1, 2, 3], [4, 5])​
  2. ​// [4, 5, 3]​

上面代码中,​​Object.assign()​​​把数组视为属性名为 0、1、2 的对象,因此源数组的 0 号属性​​4​​​覆盖了目标数组的 0 号属性​​1​​。

(4)取值函数的处理

​Object.assign()​​只能进行值的复制,如果要复制的值是一个取值函数,那么将求值后再复制。

  1. ​const source = {​
  2. ​get foo() { return 1 }​
  3. ​};​
  4. ​const target = {};​
  5. ​Object.assign(target, source)​
  6. ​// { foo: 1 }​

上面代码中,​​source​​​对象的​​foo​​​属性是一个取值函数,​​Object.assign()​​不会复制这个取值函数,只会拿到值以后,将这个值复制过去。

常见用途

​Object.assign()​​方法有很多用处。

(1)为对象添加属性

  1. ​class Point {​
  2. ​constructor(x, y) {​
  3. ​Object.assign(this, {x, y});​
  4. ​}​
  5. ​}​

上面方法通过​​Object.assign()​​​方法,将​​x​​​属性和​​y​​​属性添加到​​Point​​类的对象实例。

(2)为对象添加方法

  1. ​Object.assign(SomeClass.prototype, {​
  2. ​someMethod(arg1, arg2) {​
  3. ​···​
  4. ​},​
  5. ​anotherMethod() {​
  6. ​···​
  7. ​}​
  8. ​});​
  9. ​// 等同于下面的写法​
  10. ​SomeClass.prototype.someMethod = function (arg1, arg2) {​
  11. ​···​
  12. ​};​
  13. ​SomeClass.prototype.anotherMethod = function () {​
  14. ​···​
  15. ​};​

上面代码使用了对象属性的简洁表示法,直接将两个函数放在大括号中,再使用​​assign​​​方法添加到​​SomeClass.prototype​​之中。

(3)克隆对象

  1. ​function clone(origin) {​
  2. ​return Object.assign({}, origin);​
  3. ​}​

上面代码将原始对象拷贝到一个空对象,就得到了原始对象的克隆。

不过,采用这种方法克隆,只能克隆原始对象自身的值,不能克隆它继承的值。如果想要保持继承链,可以采用下面的代码。

  1. ​function clone(origin) {​
  2. ​let originProto = Object.getPrototypeOf(origin);​
  3. ​return Object.assign(Object.create(originProto), origin);​
  4. ​}​

(4)合并多个对象

将多个对象合并到某个对象。

  1. ​const merge =​
  2. ​(target, ...sources) => Object.assign(target, ...sources);​

如果希望合并后返回一个新对象,可以改写上面函数,对一个空对象合并。

  1. ​const merge =​
  2. ​(...sources) => Object.assign({}, ...sources);​

(5)为属性指定默认值

  1. ​const DEFAULTS = {​
  2. ​logLevel: 0,​
  3. ​outputFormat: 'html'​
  4. ​};​
  5. ​function processContent(options) {​
  6. ​options = Object.assign({}, DEFAULTS, options);​
  7. ​console.log(options);​
  8. ​// ...​
  9. ​}​

上面代码中,​​DEFAULTS​​​对象是默认值,​​options​​​对象是用户提供的参数。​​Object.assign()​​​方法将​​DEFAULTS​​​和​​options​​​合并成一个新对象,如果两者有同名属性,则​​option​​​的属性值会覆盖​​DEFAULTS​​的属性值。

注意,由于存在浅拷贝的问题,​​DEFAULTS​​​对象和​​options​​​对象的所有属性的值,最好都是简单类型,不要指向另一个对象。否则,​​DEFAULTS​​对象的该属性很可能不起作用。

  1. ​const DEFAULTS = {​
  2. ​url: {​
  3. ​host: 'example.com',​
  4. ​port: 7070​
  5. ​},​
  6. ​};​
  7. ​processContent({ url: {port: 8000} })​
  8. ​// {​
  9. ​// url: {port: 8000}​
  10. ​// }​

上面代码的原意是将​​url.port​​​改成 8000,​​url.host​​​不变。实际结果却是​​options.url​​​覆盖掉​​DEFAULTS.url​​​,所以​​url.host​​就不存在了。