详解ES6 中的Object.assign()的用法实例代码


Posted in Javascript onJanuary 11, 2021

方法Object.assign()
作用:将sourse对象的 赋值给目标对象,两者都有的会覆盖,target独有会保留,sourse独有会添加
使用方法

Object.assign方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。

var object1 = { a: { b: 1 } };

ar object2 = Object.assign({}, object1);

object1.a.b = 2;

console.log(object2.a.b);

2.用途

2.1为对象添加属性

 2.2为对象添加方法

2.3克隆对象

function copyFnc(origin) {

return Object.assign({}, origin)}

var sur = { a: 1, b: 2 };

console.log(copyFnc(sur));

上面代码将原始对象拷贝到一个空对象,就得到了原始对象的克隆。

不过,采用这种方法克隆,只能克隆原始对象自身的值,不能克隆它继承的值。如果想要保持继承链,可以采用下面的代码。

function clone(origin) {

let originProto = Object.getPrototypeOf(origin);

return Object.assign(Object.create(originProto), origin);

}

在JS里子类利用Object.getPrototypeOf去调用父类方法,用来获取对象的原型。

2.4 合并多个对象

//多个对象合并到某个对象

const merge = (target, ...sources) => Object.assign(target, ...sources);

//多个对象合并到新对象

const merge = (...sources) => Object.assign({}, ...sources);

2.5为属性指定默认值

const DEFAULTS = {
logLevel: 0,
outputFormat: 'html'};
function processContent(options) {let options = Object.assign({}, DEFAULTS, options);
}

到此这篇关于详解ES6 Object.assign()的用法及用途的文章就介绍到这了,更多相关ES6 Object.assign()的用法内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
浅析javascript闭包 实例分析
Dec 25 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 Javascript
Node 代理访问的实现
Sep 19 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
vue实现防抖的实例代码
Jan 11 #Vue.js
详解uniapp的全局变量实现方式
Jan 11 #Javascript
微信小程序抽奖组件的使用步骤
Jan 11 #Javascript
JS数组索引检测中的数据类型问题详解
Jan 11 #Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 #Javascript
js删除对象中的某一个字段的方法实现
Jan 11 #Javascript
jQuery实现购物车全功能
Jan 11 #jQuery
You might like
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
django中的ajax组件教程详解
2018/10/18 PHP
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
Angular2中监听数据更新的方法
2018/08/31 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
django 在原有表格添加或删除字段的实例
2018/05/27 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
java关于string最常出现的面试题整理
2021/01/18 Python
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
技术经理的自我评价范文
2013/12/03 职场文书
银行批评与自我批评
2014/02/10 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
员工入职担保书范文
2014/04/01 职场文书
4s店市场专员岗位职责
2014/04/09 职场文书
职业生涯规划书前言
2014/04/15 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
资产运营委托书范本
2014/10/16 职场文书
行政主管岗位职责
2015/02/03 职场文书
Win10 Anaconda安装python-pcl
2022/04/29 Servers