前端开发常用的JavaScript方法之Object.assign拷贝、合并对象(示例)

Object.assign()

Object.assign() 方法将所有可枚举（Object.propertyIsEnumerable() 返回 true）的自有（Object.hasOwnProperty() 返回 true）属性从一个或多个源对象复制到目标对象，返回修改后的对象。

语法

// target 目标对象，接收源对象属性的对象，也是修改后的返回值。

// sources 源对象，包含将被合并的属性。

// 返回值为target目标对象。

Object.assign(target: object, ...sources: any[])

拷贝示例

const source = { name: 'Etc.End' };

const returnedTarget = Object.assign({}, source);

source.age = 28

returnedTarget.sex = '男'

console.log(source);

console.log(returnedTarget);

​

        可以通过Object.assign()方法实现对象的拷贝功能，上面的示例中，Object.assign会输出一个新的对象。但是Object.assign() 只复制属性值。实现不了深拷贝。如果是复杂对象，得使用其他的方法。

合并示例

目标对象与源对象没有相同key的合并

const target = { name: 'Etc.End', age: 26 };
const source = { sex: '男' };

const returnedTarget = Object.assign(target, source);

console.log(target);

console.log(returnedTarget === target);

​ 

 目标对象与源对象有相同key的合并

const target = { name: 'Etc.End', age: 26 };
const source = { sex: '男', age: 28 };

const returnedTarget = Object.assign(target, source);

console.log(target);

console.log(returnedTarget === target);

​

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

这里只是给一个简单的示例，如果想要深入了解assign的话，可以到Mozilla设计的 MDN(mdn web docs) 查看详细的说明文档。