Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。

例如:

  const target = {a:1},

  const source1 = {b:2}

  const source2 = {c:3};

Object.assign(target, source1,source2);

  target   // {a:1,b:2,c:3}

Object.assign  方法的第一个参数是目标对象,后面的参数都是源对象。

注意:如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性覆盖前面的属性。

例如:

  const target = {a:1, b:1};

  const source1 = {b:2,c:2}

  const source2 = {c:3}

Object.assign(target, source1, source2);

 target   // {a:1,b:2,c:3}

如果只有一个参数,Object.assign会直接返回该参数。

  const obj = {a: 1};
  Object.assign(obj) === obj // true

如果该参数不是对象,则会先转成对象,然后返回。

typeof Object.assign(2) // "object"

由于undefined和null无法转成对象,所以如果它们作为参数,就会报错。

Object.assign(undefined) // 报错
Object.assign(null) // 报错

如果非对象参数出现在源对象的位置(即非首参数),那么处理规则有所不同。首先,这些参数都会转成对象,如果无法转成对象,就会跳过。这意味着,如果undefined和null不在首参数,就不会报错。

let obj = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true

其他类型的值(即数值、字符串和布尔值)不在首参数,也不会报错。但是,除了字符串会以数组形式,拷贝入目标对象,其他值都不会产生效果。

const v1 = 'abc';
const v2 = true;
const v3 = 10; const obj = Object.assign({}, v1, v2, v3);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

上面代码中,v1、v2、v3分别是字符串、布尔值和数值,结果只有字符串合入目标对象(以字符数组的形式),数值和布尔值都会被忽略。这是因为只有字符串的包装对象,会产生可枚举属性。

Object(true) // {[[PrimitiveValue]]: true}
Object(10) // {[[PrimitiveValue]]: 10}
Object('abc') // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}

上面代码中,布尔值、数值、字符串分别转成对应的包装对象,可以看到它们的原始值都在包装对象的内部属性[[PrimitiveValue]]上面,这个属性是不会被Object.assign拷贝的。只有字符串的包装对象,会产生可枚举的实义属性,那些属性则会被拷贝。

Object.assign拷贝的属性是有限制的,只拷贝源对象的自身属性(不拷贝继承属性),也不拷贝不可枚举的属性(enumerable: false)。

Object.assign({b: 'c'},
Object.defineProperty({}, 'invisible', {
enumerable: false,
value: 'hello'
})
)
// { b: 'c' }

上面代码中,Object.assign要拷贝的对象只有一个不可枚举属性invisible,这个属性并没有被拷贝进去。

属性名为 Symbol 值的属性,也会被Object.assign拷贝。

Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })
// { a: 'b', Symbol(c): 'd' }

  其中关于使用Object.assign()的浅拷贝以及常见用途,见详情:

https://github.com/ruanyf/es6tutorial/blob/14a4724b859ed0f119b58e91f939ffe6dc040c0d/docs/object-methods.md

 

ES6的Object.assign()基本用法的更多相关文章

  1. ES6之Object.assign()详解

    译者按: 这篇博客将介绍ES6新增的Object.assign()方法. 原文: ECMAScript 6: merging objects via Object.assign() 译者: Funde ...

  2. ES6中Object.assign() 方法

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

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

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

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

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

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

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

  6. Object.assign的用法

    工作中使用的Object.assign 类的赋值 var initData = { a:'', b:'' } var oldData = { a:'ww', b:'ee' } var newData ...

  7. 纯原生仿ES6的Object.assign,实现深度合并对象

    源码: function isObj(x){ var type = typeof x; return x !== null && (type === 'object' || type ...

  8. [转]javascript之Object.assign()痛点

    本文转自:http://blog.csdn.net/waiterwaiter/article/details/50267787 最近也一直会用javascript,然后中间使用的一些组件,如Echar ...

  9. es6 Object.assign

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

随机推荐

  1. siblings() 获得匹配集合中每个元素的同胞

    定义和用法 siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的. 如果给定一个表示 DOM 元素集合的 jQuery 对象,.siblings() 方法允许我们在 DOM ...

  2. 【React】 npm 常用的插件

    npm install –save-dev    package.json   安装环境 https://segmentfault.com/a/1190000008489881  全局 https:/ ...

  3. 为什么我们要使用DTO

    基础结构解释 UI-表现层-与控制器打交道(UI向Controller 传递数据时使用DTO(数据传输对象)) Service-应用服务层 Domain 领域对象 DTO 数据传输对象,一般只包含基础 ...

  4. mybatis 整合redis作为二级缓存

    核心关键在于定义一个RedisCache实现mytis实现的Cache接口 ** * @author tele * @Description RedisCache由于需要传入id, 由mybatis进 ...

  5. 用ubuntu里的vim搭建一个apache2+php+mysql环境一路踩的坑

    先是安装apache2,这个很顺利,一个apt install apache就搞定了. (PS:查看linux是否已经安装了apache服务,可以通过执行apachectl -v,如果安装了的话会显示 ...

  6. 缓存, 队列(Redis,RabbitMQ)

    Redis Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorte ...

  7. python 批量生成xml标记文件(连通域坐标分割)

    #!/usr/bin/python # -*- coding=utf-8 -*- # author : Manuel # date: 2019-05-15 from xml.etree import ...

  8. Caffe源码-几种优化算法

    SGD简介 caffe中的SGDSolver类中实现了带动量的梯度下降法,其原理如下,\(lr\)为学习率,\(m\)为动量参数. 计算新的动量:history_data = local_rate * ...

  9. 关于js如果控制标签的字符长度

    js名字长度限定(如限制为50个字符,超过的显示...) var new_playerName = ""; jQuery(".translate").each( ...

  10. 聊聊多线程那一些事儿(task)之 三 异步取消和异步方法

    hello,咋们又见面啦,通过前面两篇文章的介绍,对task的创建.运行.阻塞.同步.延续操作等都有了很好的认识和使用,结合实际的场景介绍,这样一来在实际的工作中也能够解决很大一部分的关于多线程的业务 ...