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

语法

  1. Object.assign(target, ...sources)

参数

target
目标对象。
sources
源对象。

返回值

目标对象。

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

结果

  1. Object { a: 1, b: 4, c: 5 } 源对象也被改变
  2. > Object { a: 1, b: 4, c: 5 } 目标对象也被改变

用来给对象属性赋值  copy对象

实例:

复制一个对象

  1. const obj = { a: 1 };
  2. const copy = Object.assign({}, obj);
  3. console.log(copy); // { a: 1 }

注意:深拷贝问题 链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

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

  1. let obj1 = { a: 0 , b: { c: 0}};
  2. let obj2 = Object.assign({}, obj1);
  3. console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  4. obj1.a = 1;
  5. console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  6. console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  7. obj2.a = 2;
  8. console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  9. console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
  10. obj2.b.c = 3;
  11. console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
  12. console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}
  13. // Deep Clone
  14. obj1 = { a: 0 , b: { c: 0}};
  15. let obj3 = JSON.parse(JSON.stringify(obj1));
  16. obj1.a = 4;
  17. obj1.b.c = 4;
  18. console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}

合并对象

  1. const o1 = { a: 1 };
  2. const o2 = { b: 2 };
  3. const o3 = { c: 3 };
  4. const obj = Object.assign(o1, o2, o3);
  5. console.log(obj); // { a: 1, b: 2, c: 3 }
  6. console.log(o1); // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。

合并具有相同属性的对象

  1. const o1 = { a: 1, b: 1, c: 1 };
  2. const o2 = { b: 2, c: 2 };
  3. const o3 = { c: 3 };
  4. const obj = Object.assign({}, o1, o2, o3);
  5. console.log(obj); // { a: 1, b: 2, c: 3 }

属性被后续参数中具有相同属性的其他对象覆盖。

拷贝 symbol 类型的属性

  1. const o1 = { a: 1 };
  2. const o2 = { [Symbol('foo')]: 2 };
  3. const obj = Object.assign({}, o1, o2);
  4. console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox)
  5. Object.getOwnPropertySymbols(obj); // [Symbol(foo)]

继承属性和不可枚举属性是不能拷贝的

  1. const obj = Object.create({foo: 1}, { // foo 是个继承属性。
  2. bar: {
  3. value: 2 // bar 是个不可枚举属性。
  4. },
  5. baz: {
  6. value: 3,
  7. enumerable: true // baz 是个自身可枚举属性。
  8. }
  9. });
  10. const copy = Object.assign({}, obj);
  11. console.log(copy); // { baz: 3 }

原始类型会被包装为对象

  1. const v1 = "abc";
  2. const v2 = true;
  3. const v3 = 10;
  4. const v4 = Symbol("foo")
  5. const obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
  6. // 原始类型会被包装,null 和 undefined 会被忽略。
  7. // 注意,只有字符串的包装对象才可能有自身可枚举属性。
  8. console.log(obj); // { "0": "a", "1": "b", "2": "c" }

异常会打断后续拷贝任务

  1. const target = Object.defineProperty({}, "foo", {
  2. value: 1,
  3. writable: false
  4. }); // target 的 foo 属性是个只读属性。
  5. Object.assign(target, {bar: 2}, {foo2: 3, foo: 3, foo3: 3}, {baz: 4});
  6. // TypeError: "foo" is read-only
  7. // 注意这个异常是在拷贝第二个源对象的第二个属性时发生的。
  8. console.log(target.bar); // 2,说明第一个源对象拷贝成功了。
  9. console.log(target.foo2); // 3,说明第二个源对象的第一个属性也拷贝成功了。
  10. console.log(target.foo); // 1,只读属性不能被覆盖,所以第二个源对象的第二个属性拷贝失败了。
  11. console.log(target.foo3); // undefined,异常之后 assign 方法就退出了,第三个属性是不会被拷贝到的。
  12. console.log(target.baz); // undefined,第三个源对象更是不会被拷贝到的。

拷贝访问器

  1. const obj = {
  2. foo: 1,
  3. get bar() {
  4. return 2;
  5. }
  6. };
  7. let copy = Object.assign({}, obj);
  8. console.log(copy); // { foo: 1, bar: 2 } copy.bar的值来自obj.bar的getter函数的返回值
  9. // 下面这个函数会拷贝所有自有属性的属性描述符
  10. function completeAssign(target, ...sources) {
  11. sources.forEach(source => {
  12. let descriptors = Object.keys(source).reduce((descriptors, key) => {
  13. descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
  14. return descriptors;
  15. }, {});
  16. // Object.assign 默认也会拷贝可枚举的Symbols
  17. Object.getOwnPropertySymbols(source).forEach(sym => {
  18. let descriptor = Object.getOwnPropertyDescriptor(source, sym);
  19. if (descriptor.enumerable) {
  20. descriptors[sym] = descriptor;
  21. }
  22. });
  23. Object.defineProperties(target, descriptors);
  24. });
  25. return target;
  26. }
  27. copy = completeAssign({}, obj);
  28. console.log(copy);
  29. // { foo:1, get bar() { return 2 } }

Polyfill

polyfill不支持 symbol 属性,因为ES5 中根本没有 symbol :

  1. if (typeof Object.assign != 'function') {
  2. // Must be writable: true, enumerable: false, configurable: true
  3. Object.defineProperty(Object, "assign", {
  4. value: function assign(target, varArgs) { // .length of function is 2
  5. 'use strict';
  6. if (target == null) { // TypeError if undefined or null
  7. throw new TypeError('Cannot convert undefined or null to object');
  8. }
  9. let to = Object(target);
  10. for (var index = 1; index < arguments.length; index++) {
  11. var nextSource = arguments[index];
  12. if (nextSource != null) { // Skip over if undefined or null
  13. for (let nextKey in nextSource) {
  14. // Avoid bugs when hasOwnProperty is shadowed
  15. if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
  16. to[nextKey] = nextSource[nextKey];
  17. }
  18. }
  19. }
  20. }
  21. return to;
  22. },
  23. writable: true,
  24. configurable: true
  25. });
  26. }

规范

规范名称 规范状态 备注
ECMAScript 2015 (6th Edition, ECMA-262)
Object.assign
Standard Initial definition.
ECMAScript Latest Draft (ECMA-262)
Object.assign
Draft  

浏览器兼容

Update compatibility data on GitHub

  Desktop Mobile Server
  Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android Safari on iOS Samsung Internet Node.js
assign Full support45 Full support12 Full support34 No supportNo Full support32 Full support9 No supportNo Full support45 Full supportYes Full support34 Full support32 Full supportYes Full support5.0 Full support4.0.0

Legend

Full support 
Full support
No support 
No support

相关链接

文档标签和贡献者

 最后编辑者: mdnwebdocs-bot, Mar 18, 2019, 4:32:16 PM
  1. Web 开发技术
  2. JavaScript
  3. JavaScript 参考文档
  4. JavaScript 标准库
  5. Object
  6. Object.assign()
相关主题
  1. JavaScript 标准库
  2. Object
  3. 属性
    1. Object.prototype
    2. Object.prototype.__count__
    3. Object.prototype.__noSuchMethod__
    4. Object.prototype.__parent__
    5. Object.prototype.__proto__
    6. Object.prototype.constructor
  4. 方法
    1. Object.assign()
    2. Object.create()
    3. Object.defineProperties()
    4. Object.defineProperty()
    5. Object.entries()
    6. Object.freeze()
    7. Object.fromEntries()
    8. Object.getNotifier()
    9. Object.getOwnPropertyDescriptor()
    10. Object.getOwnPropertyDescriptors()
    11. Object.getOwnPropertyNames()
    12. Object.getOwnPropertySymbols()
    13. Object.getPrototypeOf()
    14. Object.is()
    15. Object.isExtensible()
    16. Object.isFrozen()
    17. Object.isSealed()
    18. Object.keys()
    19. Object.observe()
    20. Object.preventExtensions()
    21. Object.prototype.__defineGetter__()
    22. Object.prototype.__defineSetter__()
    23. Object.prototype.__lookupGetter__()
    24. Object.prototype.__lookupSetter__()
    25. Object.prototype.eval()
    26. Object.prototype.hasOwnProperty()
    27. Object.prototype.isPrototypeOf()
    28. Object.prototype.propertyIsEnumerable()
    29. Object.prototype.toLocaleString()
    30. Object.prototype.toSource()
    31. Object.prototype.toString()
    32. Object.prototype.unwatch()
    33. Object.prototype.valueOf()
    34. Object.prototype.watch()
    35. Object.seal()
    36. Object.setPrototypeOf()
    37. Object.unobserve()
    38. Object.values()
  5. 继承
  6. Function
  7. 属性
    1. Function.arguments
    2. Function.arity
    3. Function.caller
    4. Function.displayName
    5. Function.length
    6. Function.prototype

es6 Object.assign(target, ...sources)的更多相关文章

  1. es6 Object.assign

    ES6 Object.assign 一.基本用法 Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target).它至少需要两个对象作为参数,第一个参数是目 ...

  2. es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  3. ES6 的Object.assign(target, source_1, ···)方法与对象的扩展运算符

    一.基本概念 Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target).它至少需要两个对象作为参数,第一个参数是目标对象,后面的参数都是源对象. Ob ...

  4. [ES6] Object.assign (with defaults value object)

    function spinner(target, options = {}){ let defaults = { message: "Please wait", spinningS ...

  5. (转)es6中object.create()和object.assign()

    今天学习javascript面向对象,在学习Obejct方法时了解到create方法,偶像想起之前使用的assign方法,顺带查找一番,感觉这篇博客讲解详细,遂转载. 先简单提一下装饰器函数,许多面向 ...

  6. ES6学习--Object.assign()

    ES6提供了Object.assign(),用于合并/复制对象的属性. Object.assign(target, source_1, ..., source_n) 1. 初始化对象属性 构造器正是为 ...

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

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

  8. 【ES6学习笔记之】Object.assign()

    基本用法 Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target). const target = { a: 1 }; const sou ...

  9. [转]理解Object.assign

    本节内容我们继续探讨关于ES2015的一些新的内容,Object.assign函数的使用,使用该函数我们可以快速的复制一个或者多个对象到目标对象中,本文内容涉及es6,es7相关的对象复制的内容,以及 ...

随机推荐

  1. C++编译错误提示 [Error] name lookup of 'i' changed for ISO '

    在VC 6 中,i的作用域范围是函数作用域,在for循环外仍能使用变量i 即: for (int i = 0; i < n; ++i) {         //…… } cout<< ...

  2. heartbeat双主高可用

    一.基础配置 1.hostnamectl set-hostname node1 (node2) 2.[root@node1 ~]# cat /etc/hosts     192.168.40.128 ...

  3. 修改了Mysql密码后连接不到服务且无报错信息解决方法以及修改密码方法

    安装MYSQL后更改了root的密码后用 net start mysql 启动时出现:无法启动,无报错信息 使用以下命令:1.管理员方式cmd进入mysql安装目录的bin目录下2.执行命令:mysq ...

  4. Windows C++ 判断文件是否是图片格式的方法。

    一.通过后缀名去判断. bool IsImageByTail(const std::wstring &path) { std::wstring file_exten; size_t pos = ...

  5. BUUOJ reverse 刮开有奖

    刮开有奖 这是一个赌博程序,快去赚钱吧!!!!!!!!!!!!!!!!!!!!!!!!!!!(在编辑框中的输入值,即为flag,提交即可) 注意:得到的 flag 请包上 flag{} 提交 拖到id ...

  6. 关于Mybatis的Batch模式性能测试及结论(转)

    近日在公司项目中,使用到spring+mybatis的架构,特对mybatis的batch模式做了相关研究,得出以下结论: 1.Mybatis内置的ExecutorType有3种,默认的是simple ...

  7. 树型DP入门

    题意: 某公司要举办一次晚会,但是为了使得晚会的气氛更加活跃,每个参加晚会的人都不希望在晚会中见到他的直接上司,现在已知每个人的活跃指数和上司关系(当然不可能存在环),求邀请哪些人(多少人)来能使得晚 ...

  8. C++中函数模板的概念和意义

    1,对泛型编程进行学习,泛型编程是实际工程开发中必用的技术,大型公司的通用 库都是采用泛型编程的技术完成的,C++ 中支持泛型编程技术,C++ 中的函数  模板和类模板就是 C++ 中泛型编程技术,本 ...

  9. Linux学习大纲(高人整理)

    1.Linux初级 1.1 OS操作系统的原理 1.2 了解常用命令 开机关机 时间管理:date cal clock 1.3 目的结构.目的管理 树形结构 tree cd 1.4 文件管理.文件查找 ...

  10. win7系统下MongoDB 4.0.1的安装

    环境: win7 - 64位系统 MongoDB下载地址: https://www.mongodb.com/download-center#community 版本: 4.0.1 安装步骤: 选择cu ...