详解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 相关文章推荐
优化javascript的执行速度
Jan 23 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
JS扩展方法实例分析
Apr 15 Javascript
Javascript中For In语句用法实例
May 14 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 Javascript
Javascript执行流程细节原理解析
May 14 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
图书管理程序(一)
2006/10/09 PHP
php目录操作函数之获取目录与文件的类型
2010/12/29 PHP
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
什么情况下可以不写PHP的闭合标签“?>”
2014/08/28 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
vue实现打印功能的两种方法
2018/09/07 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
[51:06]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS Liquid
2018/03/30 DOTA
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
python远程连接MySQL数据库
2019/04/19 Python
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
Pycharm小白级简单使用教程
2020/01/08 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
技校生自我鉴定范文
2013/09/26 职场文书
总结表彰大会主持词
2014/03/26 职场文书
纪检监察建议书
2014/05/19 职场文书
培训通知书模板
2015/04/17 职场文书
SQL SERVER中的流程控制语句
2022/05/25 SQL Server