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"

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

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

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

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" }

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

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. H3C ACL包过滤显示与调试

  2. hadoop的6个进程启动不全,请试 比如datanode没有启动

      赋给hadoop用户hadoop-1.2.1读写权限 [root@master usr]# chown -R hadoop121:hadoop121 hadoop-1.2.1/   折腾了两个小时 ...

  3. H3C使用ping命令

  4. vue-learning:41 - Vuex - 第二篇:const store = new Vue.Store(option)中option选项、store实例对象的属性和方法

    vuex 第二篇:const store = new Vue.Store(option)中option选项.store实例对象的属性和方法 import Vuex from 'vuex' const ...

  5. UVA - 11475 Extend to Palindrome (后缀数组)

    Your task is, given an integer N, to make a palidrome (word that reads the same when you reverse it) ...

  6. 【53.57%】【codeforces 610C】Harmony Analysis

    time limit per test3 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  7. 找不到 javax.servlet.http.HttpServletResponse 和 javax.servlet.http.HttpServletRequest 问题解决

    时隔3个月,我又回来了!在做完毕设之后,由于对此过程中学到的一些东西疏于整理,所以当再次打开我的project时有些手足无措,以至于出现一些问题也要解决好半天,我知错! 今天的问题是: 开始搜到的解决 ...

  8. 如何抢占云栖大会C位?史上最强强强攻略来了

    本文作者:阿里云头条 原文链接 本文为云栖社区原创内容,未经允许不得转载.

  9. mysql5.7密码修改与报错分析

    1.修改密码 修改密码: vim /etc/my.cnf 的mysqld字段加入skip-grant-tables 重启MySQL,service mysqld restart 终端输入 mysql ...

  10. LDO

    1.出现原因:便携式设备的发展,使得人们对电源的要求越来越高,而以前一直使用的三段稳压电源无法满足需求. 2.特点:内部的PNP管导通压降很小,自耗很低. 3.应用场合: (1)不同电压输出级别的应用 ...