ES6 Object.assign()的用法及其使用


Posted in Javascript onJanuary 18, 2020

1.Object.assign()基本用法:

Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target)。它至少需要两个对象作为参数,第一个参数是目标对象,后面的参数都是源对象。

let targetObj1 = { a: 1 };
    let sourceObj1 = { b: 1 };
    let sourceObj11 = { c: 3 };
    Object.assign(targetObj1, sourceObj1, sourceObj11);
    console.log(targetObj1);

注:如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。

let targetObj1 = { a: 1, b: 2 };
    let sourceObj1 = { b: 1 };
    let sourceObj11 = { c: 3 };
    Object.assign(targetObj1, sourceObj1, sourceObj11);
    console.log(targetObj1);

如果只有一个参数,Object.assign会直接返回该参数。

let targetObj1 = { a: 4 }
    Object.assign(targetObj1);
    console.log(targetObj1)

如果该参数不是对象,则会先转成对象,然后返回。

console.log(typeof (Object.assign(2)));

由于undefined和null无法转成对象,所以如果它们作为参数,就会报错。

console.log(typeof(Object.assign(null)));
 
 console.log(typeof(Object.assign(underfind)));

注意:如果非对象参数出现在源对象的位置(即非首参数),那么处理规则有所不同。首先,这些参数都会转成对象,如果无法转成对象,就会跳过。这意味着, 如果undefined和null不在首参数,就不会报错。其他类型的值(即数值、字符串和布尔值)不在首参数,也不会报错。但是,除了字符串会以数组形式,拷贝入目标对象,其他值都不会产生效果。

Object.assign只拷贝自身属性,不可枚举的属性(enumerable为false)和继承的属性不会被拷贝。

let obj1 = Object.assign({ dwb: 'zjl' },
 
Object.defineProperty({}, 'zmf', {
 
enumerable: false,
 
value: 'zmf'
 
})
 
)
 
console.log(obj1);
 
let obj2 = Object.assign({ dwb: 'zjl' },
 
Object.defineProperty({}, 'zmf', {
 
enumerable: true,
 
value: 'zmf'
 
})
 
)
 
console.log(obj2);

对于嵌套的对象,Object.assign的处理方法是替换,而不是添加。

var target = { a: { b: 'c', d: 'e' } }
 
var source = { a: { b: 'hello' } }
 
Object.assign(target, source);

上面代码中,target对象的a属性被source对象的a属性整个替换掉了,而不会得到{ a: { b: 'hello', d: 'e' } }的结果。这通常不是开发者想要的,需要特别小心。有一些函数库提供Object.assign的定制版本(比如Lodash的_.defaultsDeep方法),可以解决深拷贝的问题。

注意,Object.assign可以用来处理数组,但是会把数组视为对象。

console.log(Object.assign([1, 2, 3], [4, 5]));

其中,4覆盖1,5覆盖2,因为它们在数组的同一位置,所以就对应位置覆盖了。

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

var object1 = { a: { b: 1 } };
 
var 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);
 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
js前台分页显示后端JAVA数据响应
Mar 18 Javascript
JavaScript splice()方法详解
Sep 22 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 #Javascript
vue组件内部引入外部js文件的方法
Jan 18 #Javascript
Node.js实现批量下载图片简单操作示例
Jan 18 #Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 #Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 #Javascript
JS数组方法slice()用法实例分析
Jan 18 #Javascript
JS实现横向轮播图(中级版)
Jan 18 #Javascript
You might like
php下MYSQL limit的优化
2008/01/10 PHP
php include和require的区别深入解析
2013/06/17 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
async/await优雅的错误处理方法总结
2019/01/30 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Python+MongoDB自增键值的简单实现
2016/11/04 Python
Python pass详细介绍及实例代码
2016/11/24 Python
python实现抖音点赞功能
2019/04/07 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
Python for i in range ()用法详解
2020/09/18 Python
Python序列化pickle模块使用详解
2020/03/05 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
一道SQL面试题
2012/12/31 面试题
大学社团计划书
2014/05/01 职场文书
经营理念标语
2014/06/21 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫