1. Object.assign()

对于合并对象操作, ECMAScript 6 中提供了一个函数:

Object.assign(target, source);

这个方法会将所有可枚举 [1] 的自由属性从 source 复制到 target 。并且它返回(修改后的) target 。关于这个函数最终签名至今还在争论,最终还有可能支持多个来源(被复制的对象)。即便是使用简单的签名(signature),也可以处理多个来源,使用Array.prototype.reduce :

[source1, source2 source3].reduce(Object.assign, target);

1.1 属性名:字符串或者符号

在 ECMAScript 6中,属性名称可以是字符串或者 符号 (symbols)。后者是一种新的唯一标识符;基本上使用符号作为属性名是不可能有命名冲突的。Object.assign() 支持字符串或者符号作为属性名。

原文中叫做: property keys, 表示对象的键,属性就干脆译作属性名。如有误,请指正。

1.2 复制与赋值

目标对象中的属性是通过赋值操作创建的(内置的[[Put]]操作)。这就意味着如果target 拥有(自身或者继承的) setters [1] ,这回在复制的过程中调用。一种可替代的方式就是定义新的属性 [2] ,总是创建新的自由属性而从不调用 setters。原本对于Object.assign() 的一个变体的提议就是使用定义替代赋值的方式。但是该提议被 ECMAScript 6 拒绝了(在后续新版中可能会重新考虑)。

2. Object.assign() 用例

2.1 设置实例属性

构造器的任务就是设置实例属性。对于这个任务来说变量名总是被认为是冗余的:

class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}

我比较喜欢下面的语法,它完全删除了冗余的代码(CoffeeScript 和 TypeScript都可以做到,但是我更喜欢下面这种语法):

class Point {
constructor(this.x, this.y) {
}
}

Object.assign() 至少也能够让你避免一些冗余:

class Point {
constructor(x, y) {
Object.assign(this, {x, y});
}
}

在 ECMAScript 6 中, {x, y} 是 {x: x, y: y} 的一种缩写形式。

2.2 给对象添加方法

在 ECMAScript 5 中,可以使用函数表达式来给对象添加方法:

MyClass.prototype.foo = function(arg1, arg2) {
// ...
};

在 ECMAScript 6 中对于方法 [3] 有一个更简洁的语法。这就要感谢Object.assign() 了,但是你也不必抛弃原来的语法:

Object.assign(MyClass.prototype, {
foo(arg1, arg2) {
...
}
});

2.3 克隆对象

也可以使用 Object.assign() 来克隆一个对象(浅克隆):

var copy = Object.assign({__proto__: obj.__proto__}, obj);

如果只对对象的自由属性感兴趣,那更简单:

var copy = Object.assign({}, obj);

参考

[1]. JavaScript中的对象属性

[2]. JavaScript中的属性: 定义与赋值

[3]. ECMAScript 6中可调用的实体

https://github.com/sindresorhus/object-assign/blob/master/index.js

object-assign合并对象的更多相关文章

  1. Object 对象方法学习之(1)—— 使用 Object.assign 复制对象、合并对象

    作用 Object.assign() 方法用于把一个或多个源对象的可枚举属性值复制到目标对象中,返回值为目标对象. 语法 Object.assign(target, ...sources) 参数 ta ...

  2. ES6-对象赋值,key值得构建,is()方法对比对象,assign()合并对象

    ES6对象赋值: // es5 let name = "ananiah"; let skill ='web'; let obj = {name:name,skill:skill}; ...

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

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

  4. Object.assign(o1, o2, o3) 对象 复制 合拼

    Object 对象方法学习之(1)—— 使用 Object.assign 复制对象.合并对象 合并对象 var o1 = {a: 1}; var o2 = {b: 2}; var o3 = {c: 3 ...

  5. ES6之Object.assign()详解

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

  6. ES6中Object.assign() 方法

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

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

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

  8. es6新语法Object.assign()

    1.介绍 Object.assign用于对象的合并,将源对象的所有可枚举属性复制到目标对象,只拷贝源对象自身的属性继承属性补考呗 Object.assign(target,source1,...)第一 ...

  9. 组件 computed 与 vuex 中 getters 的使用,及 mapGetters 的使用,对象上追加属性,合并对象

    vue 是响应式的数据,这一点相当的方便我们的操作,但有些错误的操作方法会 vue 的响应无效 除此之外我们还要了解 vue.set() 和 Object.assgin() 的使用 vue.set() ...

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

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

随机推荐

  1. JSP 动作元素

    JSP动作元素 1.  动作元素分类 用来动态的包含文件.网页跳转及使用JavaBean组件等. 语法:<jsp:XXX />或者<jsp:XXX></jsp:XXX&g ...

  2. java取整和java四舍五入方法 转自董俊杰

    import java.math.BigDecimal; import java.text.DecimalFormat; public class TestGetInt{ public static ...

  3. C#中的GDI+图形绘制方法

    GDI+图形绘制方法 1.首先对于绘制图形,必须的先将命名空间导入:using System.Drawing.Drawing2D; 2.然后在一个事件中写入程序 首先先将Graphics这个对象实例化 ...

  4. Oracle、MySql、SQLServer 数据分页查询

    最近简单的对oracle,mysql,sqlserver2005的数据分页查询作了研究,把各自的查询的语句贴出来供大家学习..... (一). mysql的分页查询 mysql的分页查询是最简单的,借 ...

  5. kuangbin_MST C (POJ 2031)

    全程double精度就能过了 间接0距离不用管 prim自动连起来的 G++交的话只能用%f输出 C++的话加不加l都可以 (这么说以后用%f肯定不会错咯) 不过我不懂为什么他们的空间时间差了好多倍. ...

  6. C语言中 *.c和*.h文件的区别!

    C语言中 *.c和*.h文件的区别!  http://blog.163.com/jiaoruijun07@126/blog/static/68943278201042064246409/        ...

  7. ping不通 www.baidu.com 163.com

    可以试试这个命令:netsh winsock reset ping不通,但是可以上网,原因有以下几个: 1.远程主机禁止ping 2.firewall禁止ping,icmp 3.dns解析有问题 fr ...

  8. Nginx日志常用分析命令汇总 (转)

    三.常用日志分析命令 1.总请求数 1 wc -l access.log |awk '{print $1}' 2.独立IP数 1 awk '{print $1}' access.log|sort |u ...

  9. [转载]强烈推荐学习的blog

    膜拜大牛 原文出处:http://hedengcheng.com/?p=676 ACM Queue (Architecting Tomorrow’s Computing) 网址:http://queu ...

  10. ant 构建时遇到 “非法字符: \65279”的解决办法

    今天使用CI做版本构建时候碰到了这样一个问题,有个activity对应的java源码始终编译报错,错误发生在文件第一行. 出错内容是: *.java:1: 非法字符: \65279    [javac ...