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

const target = { a: 1, b: 2 ,c:3,e:6};
const source = { b: 4, c: 5 }; const returnedTarget = Object.assign(target, source); console.log(target);
// expected output: Object { a: 1, b: 4, c: 5, e: 6 } console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5, e: 6 }

语法

Object.assign(target, ...sources)

参数

target

  目标对象。

sources

  源对象。

返回值

  目标对象。

描述

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

Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]],所以它会调用相关 getter 和 setter。因此,它分配属性,而不仅仅是复制或定义新的属性。如果合并源包含getter,这可能使其不适合将新属性合并到原型中。为了将属性定义(包括其可枚举性)复制到原型,应使用Object.getOwnPropertyDescriptor()Object.defineProperty() 。

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

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

注意,Object.assign 不会在那些source对象值为 null 或 undefined 的时候抛出错误。

示例

针对深拷贝,需要使用其他办法,因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用,那么它也只指向那个引用。

let obj1 = { a: 0 , b: { c: 0}};
let obj2 = Object.assign({}, obj1);
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} obj1.a = 1;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} obj2.a = 2;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}} obj2.b.c = 3;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}} // Deep Clone
obj1 = { a: 0 , b: { c: 0}};
let obj3 = JSON.parse(JSON.stringify(obj1));
obj1.a = 4;
obj1.b.c = 4;
console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}

参考文章:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Object.assign() 方法浅析的更多相关文章

  1. Object.assign方法复制或合并对象

    Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象 var obj = { a: 1 }; var copy = Object.assign({ ...

  2. Object.assign()方法

    对象的扩展 1.ES6中,对象的属性和方法可简写:对象的属性值可不写,前提是属性名已经声明: var name = "zhangsan"; "; var obj = { ...

  3. ES6中Object.assign() 方法

    ES6中Object.assign() 方法 1. 对象合并Object.assign 方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象上.如下代码演示: var targ ...

  4. JavaScript 复制对象【Object.assign方法无法实现深复制】

    在JavaScript这门语言中,数据类型分为两大类:基本数据类型和复杂数据类型.基本数据类型包括Number.Boolean.String.Null.String.Symbol(ES6 新增),而复 ...

  5. javascript学习总结之Object.assign()方法详解

    最近再写ES6的文章时候发现自己对Object.assign()方法不太了解,之前也没有接触过所以就就查阅了相关的资料,为了自己以后肯能会用到以及对知识进行巩固,所以在这里记录下自己学习的点点滴滴,毕 ...

  6. 解决webpack和gulp打包js时ES6转译ES5时Object.assign()方法没转译成功的问题

    在webpack或gulp打包的配置文件中package.json 引入"@babel/plugin-transform-object-assign": "^7.2.0& ...

  7. object.assign()方法的使用

    地址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

  8. Object.assign方法的使用

    https://www.cnblogs.com/chenyablog/p/6930596.html

  9. es6 javascript对象方法Object.assign() 对象的合并复制等

    Object.assign方法用于对象的合并,将源对象( source )的所有可枚举属性,复制到目标对象( target ). 详细使用稳步到前辈: http://blog.csdn.net/qq_ ...

  10. es6 javascript对象方法Object.assign()

    es6 javascript对象方法Object.assign() 2016年12月01日 16:42:34 阅读数:38583 1  基本用法 Object.assign方法用于对象的合并,将源对象 ...

随机推荐

  1. springboot框架返回日期值少一天

    1 问题 一个请求,返回一个对象,对象里面有日期,返回的对象的日期却比实际的日期少了一天 如下图:在return返回的时候查看返回的对象的日期的值 postman返回的结果如下图,几个日期都少了一天 ...

  2. P13_协同工作_小程序权限管理的概念以及成员管理的两个方面

    协同工作和发布 - 协同工作 了解权限管理需求 在中大型的公司里,人员的分工非常仔细:同一个小程序项目,一般会有不同岗位.不同角色的员工同时参与设计与开发. 此时出于管理需要,我们迫切需要对不同岗位. ...

  3. STM32F0库函数初始化系列:进入STOP模式,外部中断唤醒

    SYSCFG_EXTILineConfig(EXTI_PortSourceGPIOA, EXTI_PinSource0); EXTI_InitStructure.EXTI_Line=EXTI_Line ...

  4. EPICS Archiver Appliance 单点极限储存速率测试

    https://blog.csdn.net/weixin_43767046/article/details/113748775 这个测试一直在进行,虽然因为摸数据库设置而重启过并清过库,但读示波器波形 ...

  5. [Ynoi2016] 掉进兔子洞

    \(\text{Solution}\) 莫队配合 \(\text{bitset}\) 发现答案困难的部分在于同一个数在三个区间出现次数的最小值 考虑强行拆开看,用莫队处理出每个区间每个数的出现次数,这 ...

  6. ENCOURAGE研究: 病情中度活动RA获得深度缓解后有望实现停药

    标签: 类风湿关节炎; TNF拮抗剂; 维持期减停 病情中度活动的RA患者在获得深度缓解后有望实现停用生物制剂 电邮发布日期: 2016年2月3日 病情中度活动的类风湿关节炎(RA)患者通过传统DMA ...

  7. Windows 干净启动

    1. 卸载设备中全部的第三方反病毒软件与系统优化软件 (例如 360.腾讯电脑管家.鲁大师等).2. 按 "Windows 徽标键+R",输入 "msconfig&quo ...

  8. 洛谷P3933 Chtholly Nota Seniorious

    题目 https://www.luogu.com.cn/problem/P3933 顺便:中国珂学院 思路 看到此题先大喊一声"我永远喜欢珂朵莉!" 好了然后我们思考一下如何做此题 ...

  9. java.sql.SQLException: Access denied for user ‘root‘@‘localhost‘ (using password: YES)问题

    此报错大多数存在的问题为mysql密码错误,需要去JDBC文件中寻找url查看是否密码错误.

  10. selenium用executeAsyncScript执行异步脚本调用callback使用方法

    executeAsyncScript的作用: 就是把异步的js过程变成java同步的形式,方便java程序及时的接收到同步数据 1.cmdriver.manage().timeouts().scrip ...