ES6中新增的Object.assign()方法详解


Posted in Javascript onSeptember 22, 2017

前言

将A对象的属性复制给B对象,这是JavaScript编程中很常见的操作。下面这篇文章将介绍ES6的Object.assign()属性,可以用于对象复制。

在JavaScript生态系统中,对象复制有另外一个术语: extend。下面是两个JS库提供的extend接口:

Prototype: Object.extend(destination, source)

Underscore.js: _.extend(destination, *sources)

Object.assign()介绍

ES6提供了Object.assign() ,用于合并/复制对象的属性。

Object.assign(target, source_1, ..., source_n)

它会修改target对象,然后将它返回:先将source_1对象的所有可枚举属性复制给target,然后依次复制source_1等的属性。

1. 属性名可以为字符串或者Symbol

在ES6中,对象的属性名可以是字符串或者Symbol。因为Symbol值具有唯一性,这就意味着Symbol作为对象的属性名时,可以保证不会出现同名的属性。对象属性名为字符串或者Symbol时,Object.assign()都支持。

2. 属性复制通过赋值实现

target对象的属性是通过复制来创建的,这就意味着,如果target有setters方法时,它们将会被调用。

另一种方案是通过定义来实现,这样将会创建新的自有属性,不会调用setters方法。其实,另一个版本的Object.assign()的提案正是采用这种方法。不过,这个提议在ES6中被拒绝了,也许之后的版本会再考虑。

Object.assign()使用示例

1. 初始化对象属性

构造器正是为了初始化对象的属性,通常,我们不得不多次重复属性的名字。示例代码的constructor中,x与y均重复了两次:

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 });
 }
}

在ES6中, { x, y }{ x: x, y: y }的缩写。

2. 为对象添加方法

ECMAScript 5, you use a function expression to add a method to an object:

在ES5中,需要使用function关键字定义对象的新增方法:

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

在ES6中,对象方法的定义更加简洁,不需要使用function关键字。这时,可以使用Object.assign()为对象新增方法:

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

3. 复制对象

使用Object.assign()深度复制对象,包括其prototype

var Point = function(x)
{
 this.x = x;
}

Point.prototype.y = 2;

var obj = new Point(1);

var copy = Object.assign({ __proto__: obj.__proto__ }, obj); // 输出{x:1,y:2}

console.log(copy) // 输出{x:1,y:2}

仅复制自身属性:

var Point = function(x)
{
 this.x = x;
}

Point.prototype.y = 2;

var obj = new Point(1);

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

console.log(copy) // 输出{x:1}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

参考

  • Object properties in JavaScript
  • Properties in JavaScript: definition versus assignment
  • Callable entities in ECMAScript 6

原文: ECMAScript 6: merging objects via Object.assign()

译者: Fundebug

Javascript 相关文章推荐
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
JS前端笔试题分析
Dec 19 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
Feb 08 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
Vee-Validate的使用方法详解
Sep 22 #Javascript
Js中async/await的执行顺序详解
Sep 22 #Javascript
Node.js自定义实现文件路由功能
Sep 22 #Javascript
详解bootstrap用dropdown-menu实现上下文菜单
Sep 22 #Javascript
javascript计算渐变颜色的实例
Sep 22 #Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 #Javascript
原生JS实现日历组件的示例代码
Sep 22 #Javascript
You might like
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
JavaScript 中的六种循环方法
2021/01/06 Javascript
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
教你学会使用Python正则表达式
2017/09/07 Python
Pytorch之finetune使用详解
2020/01/18 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
塔吉特百货公司官网:Target
2017/04/27 全球购物
英国探险旅游专家:Explore
2018/12/20 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
ORACLE十问
2015/04/20 面试题
入职担保书怎么写
2014/05/12 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
企业年检委托书范本
2014/10/14 职场文书
Python实现照片卡通化
2021/12/06 Python
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android