Object.assign用法

231 阅读2分钟

今天用到了这个方法,查阅资料,记录一下

一、Object.assign是什么

ES6官方文档介绍:Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象 简单来说,就是Object.assign()是对象的静态方法,可以用来复制对象的可枚举属性到目标对象,利用这个特征可以实现对象属性的合并

二、用法

Object.assign(target, ...sources)

参数:
  • target ---> 目标对象
  • source ---> 源对象
返回值:
  • target ---> 目标对象
三、使用示例:

1. 目标对象和源对象无重名属性

   const target = {name: '小明', age:18};
   const source = {height: 188};
   const result = Object.assign(target, source);
   console.log(result);
   console.log(target);
   console.log(target === result);

image.png
我们可以看到source对象中height属性合并到target对象上。
返回的对象和目标对象指向的是同一个地址,完全相等
如果只是想将两个或多个对象的属性合并到一起,不改变原有对象的属性,可以个一个空的对象作为target对象。

   const source1 = {name: '小明', age:18};
   const source2 = {height: 188};
   const result = Object.assign({}, source1, source2);
   console.log(result)

1661423081450.png

2. 目标对象和源对象有重名属性
上面的示例目标对象和源对象是没有重名属性的,那么如果他们有重名属性又会怎么样?
如果有同名属性,后面的属性值会覆盖前面的属性值,多个源对象和一个源对象一样,没有同名的属性会直接复制到目标对象上,同名的属性后面的属性值会覆盖前面的同名属性值

    const target = {name: '小明', age: 18, height: 188}
    const source = {age: 20, height: 170, number: 55}
    const source2 = {height: 190, sex: '男'}
    console.log(Object.assign(target, source, source2))

image.png

四、注意事项
  1. Object.assign方法只会拷贝源对象自身的并且可枚举的属性到目标对象,继承属性和不可枚举属性是不能拷贝的。
  2. 针对深拷贝,需要使用其他办法,因为Object.assign()拷贝的是属性值(浅拷贝)。假如源对象的属性值是一个对象的引用,那么它也指向这个引用
    const target = {name: '小明', age: 18, height: 188}
    const source = {age: 20, height: 170, interest:['reading', 'basketball']}
    const result = Object.assign(target, source)
    console.log(result)
    source.interest[0] = 'study'
    source.age = 25
    console.log(result)
  1. 异常会打断后续拷贝任务

image.png

五、兼容性

目前IE浏览器不兼容Object.assign(),如果需要兼容IE的话最好不要直接使用这个方法。

image.png