object-assign合并对象
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中的对象属性
[3]. ECMAScript 6中可调用的实体
https://github.com/sindresorhus/object-assign/blob/master/index.js
object-assign合并对象的更多相关文章
- Object 对象方法学习之(1)—— 使用 Object.assign 复制对象、合并对象
作用 Object.assign() 方法用于把一个或多个源对象的可枚举属性值复制到目标对象中,返回值为目标对象. 语法 Object.assign(target, ...sources) 参数 ta ...
- ES6-对象赋值,key值得构建,is()方法对比对象,assign()合并对象
ES6对象赋值: // es5 let name = "ananiah"; let skill ='web'; let obj = {name:name,skill:skill}; ...
- ngx-bootstrap使用03 Alerts组件、利用Object.assign复制对象
1 Alerts 该组件用于给用户操作提供反馈信息或者提供一些警告信息 2 用法 2.1 下载ngx-bootstrap依赖 参考博文:点击前往 2.2 在模块级别导入AlertModule模块 技巧 ...
- Object.assign(o1, o2, o3) 对象 复制 合拼
Object 对象方法学习之(1)—— 使用 Object.assign 复制对象.合并对象 合并对象 var o1 = {a: 1}; var o2 = {b: 2}; var o3 = {c: 3 ...
- ES6之Object.assign()详解
译者按: 这篇博客将介绍ES6新增的Object.assign()方法. 原文: ECMAScript 6: merging objects via Object.assign() 译者: Funde ...
- ES6中Object.assign() 方法
ES6中Object.assign() 方法 1. 对象合并Object.assign 方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象上.如下代码演示: var targ ...
- ES6学习--Object.assign()
ES6提供了Object.assign(),用于合并/复制对象的属性. Object.assign(target, source_1, ..., source_n) 1. 初始化对象属性 构造器正是为 ...
- es6新语法Object.assign()
1.介绍 Object.assign用于对象的合并,将源对象的所有可枚举属性复制到目标对象,只拷贝源对象自身的属性继承属性补考呗 Object.assign(target,source1,...)第一 ...
- 组件 computed 与 vuex 中 getters 的使用,及 mapGetters 的使用,对象上追加属性,合并对象
vue 是响应式的数据,这一点相当的方便我们的操作,但有些错误的操作方法会 vue 的响应无效 除此之外我们还要了解 vue.set() 和 Object.assgin() 的使用 vue.set() ...
- Object.assign方法复制或合并对象
Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象 var obj = { a: 1 }; var copy = Object.assign({ ...
随机推荐
- 如何加载JS
外部JS的阻塞下载 所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等.至到JS下载.解析.执行完毕后才开始继续并行下载其他资源并呈现内容. 有人会问:为什么JS不能像 ...
- Qt学习1
Action 的用法 首先在头文件的 private 中加: 1 2 3 QMenu *fileMenu; QMenu *editMenu; QMenu *helpMenu; 1 2 3 4 5 6 ...
- Apache配置代理服务器的方法(2)
Proxy指令后面的*号表示客户端使用代理服务器访问的目的地址.在上面两个例子中,*号表示所有地址,即禁止使用代理服务器访问所有地址.而如果想仅禁止某一些地址时,可以参考下面的例子: Order de ...
- MVC 记录操作日志与过滤特殊字符
最近进行的MVC系统需要用到记录操作日志和过滤特殊字符的功能,如果每个action中都调用记录日志的方法就太麻烦了,所以根据需要结合mvc的过滤机制 写了个特殊字符验证与记录操作日志的公用类: pub ...
- CentOS 7 时间同步
在做这个之前需要先搭建yum http://www.cnblogs.com/jw31/p/5955852.html 在做之前我们需要先安装ntp服务 yum install ntp -y vi /et ...
- SpringMVC学习系列(5) 之 数据绑定-2
在系列(4)中我们介绍了如何用@RequestParam来绑定数据,下面我们来看一下其它几个数据绑定注解的使用方法. 1.@PathVariable 用来绑定URL模板变量值,这个我们已经在系列(3) ...
- 《MySQL 存储过程编程》-读书笔记
本书结构: 第一部分:存储编程基础 第1章:存储过程程序基础 第2章:MySQL存储编程指南 第3章:语言基础 第4章:语句块 第5章:在存储程序中使用SQL 第一章:MySQL存储程序介绍 存储程序 ...
- Web Api 上传图片,解决上传图片无格式
制作这个功能时,找了很多资料,不过忘记了地址,所以就不一一放连接了, 直接上代码吧! 1. 首先新建一个上传的控制器 /// <summary> /// 上传 /// </summa ...
- loadView、viewDidLoad、initWithCoder、initWithNibName、awakeFromNib的用法
转载,原地址为:http://jianyu996.blog.163.com/blog/static/11211455520131226840879/ 请尊重原创: 1,无论XIB还是代码创建都会调用l ...
- libpcap和WinPcap
能从物理上访问网络上的流量后,你需要用软件把它记录下来.这里,我们探究记录.解析和分析被捕获的数据包中最常用的软件库:libpcap和WinPcap.也将介绍包括tcpdump.Wireshark等基 ...