链接:https://blog.csdn.net/wang252949/article/details/79106160

语法

Object.assign(target, ...sources)

参数

target
目标对象。
sources
源对象。

返回值

目标对象。

描述

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

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

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

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

注意,Object.assign 会跳过那些值为 null 或 undefined 的源对象。

示例

复制一个对象

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

深拷贝问题

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

  1.  
    functiontest(){
  2.  
    'use strict';
  3.  
     
  4.  
    let obj1 = { a: 0 , b: { c: 0}};
  5.  
    let obj2 = Object.assign({}, obj1);
  6.  
    console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  7.  
     
  8.  
    obj1.a = 1;
  9.  
    console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  10.  
    console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  11.  
     
  12.  
    obj2.a = 2;
  13.  
    console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  14.  
    console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
  15.  
     
  16.  
    obj2.b.c = 3;
  17.  
    console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
  18.  
    console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}
  19.  
     
  20.  
    // Deep Clone
  21.  
    obj1 = { a: 0 , b: { c: 0}};
  22.  
    let obj3 = JSON.parse(JSON.stringify(obj1));
  23.  
    obj1.a = 4;
  24.  
    obj1.b.c = 4;
  25.  
    console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
  26.  
    }
  27.  
     
  28.  
    test();

合并对象

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

合并具有相同属性的对象

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

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

拷贝 symbol 类型的属性

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

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

  1.  
    var 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.  
     
  11.  
    var copy = Object.assign({}, obj);
  12.  
    console.log(copy); // { baz: 3 }

原始类型会被包装为对象

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

异常会打断后续拷贝任务

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

拷贝访问器

  1.  
    var obj = {
  2.  
    foo: 1,
  3.  
    get bar() {
  4.  
    return 2;
  5.  
    }
  6.  
    };
  7.  
     
  8.  
    var copy = Object.assign({}, obj);
  9.  
    // { foo: 1, bar: 2 }
  10.  
    // copy.bar的值来自obj.bar的getter函数的返回值
  11.  
    console.log(copy);
  12.  
     
  13.  
    // 下面这个函数会拷贝所有自有属性的属性描述符
  14.  
    functioncompleteAssign(target,...sources){
  15.  
    sources.forEach(source => {
  16.  
    let descriptors = Object.keys(source).reduce((descriptors, key)=> {
  17.  
    descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
  18.  
    return descriptors;
  19.  
    }, {});
  20.  
     
  21.  
    // Object.assign 默认也会拷贝可枚举的Symbols
  22.  
    Object.getOwnPropertySymbols(source).forEach(sym => {
  23.  
    let descriptor = Object.getOwnPropertyDescriptor(source, sym);
  24.  
    if (descriptor.enumerable) {
  25.  
    descriptors[sym] = descriptor;
  26.  
    }
  27.  
    });
  28.  
    Object.defineProperties(target, descriptors);
  29.  
    });
  30.  
    return target;
  31.  
    }
  32.  
     
  33.  
    var copy = completeAssign({}, obj);
  34.  
    console.log(copy);
  35.  
    // { 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: functionassign(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.  
     
  10.  
    var to = Object(target);
  11.  
     
  12.  
    for (var index = 1; index < arguments.length; index++) {
  13.  
    var nextSource = arguments[index];
  14.  
     
  15.  
    if (nextSource != null) { // Skip over if undefined or null
  16.  
    for (var nextKey in nextSource) {
  17.  
    // Avoid bugs when hasOwnProperty is shadowed
  18.  
    if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
  19.  
    to[nextKey] = nextSource[nextKey];
  20.  
    }
  21.  
    }
  22.  
    }
  23.  
    }
  24.  
    return to;
  25.  
    },
  26.  
    writable: true,
  27.  
    configurable: true
  28.  
    });
  29.  
    }
个人分类: 前端开发JavaScript

Object.assign()解释整理的更多相关文章

  1. ngx-bootstrap使用03 Alerts组件、利用Object.assign复制对象

    1 Alerts 该组件用于给用户操作提供反馈信息或者提供一些警告信息 2 用法 2.1 下载ngx-bootstrap依赖 参考博文:点击前往 2.2 在模块级别导入AlertModule模块 技巧 ...

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

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

  3. js中的Object.assign接受两个函数为参数的时候会发生什么?

    缘由 今天看到一段代码 return Object.assign(func1, func2); 心生疑惑,为什么 Object.assign 的参数可以是函数? 于是有了下面这一堆东西,其实都是老生常 ...

  4. 一个 Object.assign 的误解

    mozilla中对 Object.assign 的解释如下地址: mozilla 其中有说到 注意, Object.assign 会跳过那些值为 null 或 undefined 的源对象. 一直以为 ...

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

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

  6. Object.assign()方法

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

  7. 微信不支持Object.assign

    微信不支持Object.assign,让我Vue怎么用QAQ... 解决方法: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Refe ...

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

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

  9. [Javascript] Object.assign()

    Best Pratices for Object.assign: http://www.cnblogs.com/Answer1215/p/5096746.html Object.assign() ca ...

随机推荐

  1. windows server 2012启动进入cmd解决方法

    感谢网友http://sns.yhjy.cn/u/XperiaZ/Blog/t-4748 由于删除了framework 4.5引起的. windows server 2012默认安装framework ...

  2. 通用base.css —— 《编写高质量代码 web前端开发修炼之道》

    @charset "utf-8"; /*CSS reset*/ html{color:#000;background:#FFF;} body,div,dl,dt,dd,ul,ol, ...

  3. Linux搭建bugfree

    1.xampp安装包地址: 链接:https://pan.baidu.com/s/1Th2QvF77jvIGzMROoF2rbg 密码:yoar 2.因为我用的是xshell5连接Linux服务器,直 ...

  4. idea的maven项目下spring与mybatis整合

    两周前学习mybatis框架,参考了网上多位大神的博客,但因为各种原因(不解释)总是没法成功搭建环境并运行项目.周末花了点时间阅读了文档并整理之前琐碎的内容,解决掉之前遇到的问题.现将整合环境的关键步 ...

  5. 学习笔记TF046:TensoFlow开发环境,Mac、Ubuntu/Linux、Windows,CPU版本、GPU版本

    下载TensorFlow https://github.com/tensorflow/tensorflow/tree/v1.1.0 .Tags选择版本,下载解压. pip安装.pip,Python包管 ...

  6. 备忘:EBS参考链接

    帮助手册查阅网址http://docs.oracle.com/cd/V46499_01/current/html/docset.html  官方 http://www.oracleappshub.co ...

  7. DevExpress GridView 整理(转)

    DevExpress GridView 那些事儿 1:去除 GridView 头上的 "Drag a column header here to group by that column&q ...

  8. Linux系统目录权限chmod误操作权限修复方法

    Linux中,如果意外误操作将/目录权限批量设置,比如chmod -R 777 / ,系统中的大部分服务以及命令将无法使用,这时候可以通过系统自带的getfacl命令来拷贝和还原系统权限,若是其他系统 ...

  9. 前端-JavaScript1-3——JavaScript之字面量

    字面量?????? 字面量:英语叫做literals,有些书上叫做直接量.看见什么,它就是什么. 我们先来学习数字的字面量,和字符串的字面量.剩余的字面量类型,我们日后遇见再介绍. 3.1 数字的字面 ...

  10. 常用JVM命令

    查看当前所有jvm进程 ./jps -l -m ./jps -l -m -v 查看jvm进程内存堆使用情况 ./jstat -gc $pid 生成java虚拟机当前时刻的线程快照 jstack -l ...