详解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 相关文章推荐
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
微信小程序 slider 详解及实例代码
Jan 10 Javascript
es6基础学习之解构赋值
Dec 10 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 Javascript
Javascript表单序列化原理及实现代码详解
Oct 30 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
海贼王:最美的悬赏令!
2020/03/02 日漫
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
php阳历转农历优化版
2016/08/08 PHP
namespace.js Javascript的命名空间库
2011/10/11 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
2015/05/12 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
Python的randrange()方法使用教程
2015/05/15 Python
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
附答案的Java面试题
2012/11/19 面试题
采购部岗位职责
2013/11/24 职场文书
企业办公室岗位职责
2014/03/12 职场文书
大学生村官考核材料
2014/05/23 职场文书
计算机毕业生求职信
2014/06/10 职场文书
PHP获取学生成绩的方法
2021/11/17 PHP
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server