详解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 相关文章推荐
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
javascript实现原生ajax的几种方法介绍
Sep 21 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
浅谈JS中json数据的处理
Jun 30 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
JavaScript中的this引用(推荐)
Aug 05 Javascript
学习vue.js计算属性
Dec 03 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
vue中组件通信的八种方式(值得收藏!)
Aug 09 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 Javascript
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
PHP insert语法详解
2008/06/07 PHP
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
nginx下安装php7+php5
2016/07/31 PHP
js动态为代码着色显示行号
2013/05/29 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
jquery移动节点实例
2015/01/14 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
python字符串编码识别模块chardet简单应用
2015/06/15 Python
python&MongoDB爬取图书馆借阅记录
2016/02/05 Python
Django web框架使用url path name详解
2019/04/29 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
pytorch中的inference使用实例
2020/02/20 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
Python Selenium库的基本使用教程
2021/01/04 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
Servlet如何得到服务器的信息
2015/12/22 面试题
大学活动总结范文
2014/04/29 职场文书
体育节口号
2014/06/19 职场文书
春游踏青活动方案
2014/08/14 职场文书
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android