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 相关文章推荐
js直接编辑当前cookie的脚本
Sep 14 Javascript
Javascript 兼容firefox的一些问题
May 21 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 Javascript
vue动态设置页面title的方法实例
Aug 23 Javascript
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
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
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
vue实现登录拦截
2020/06/29 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
python中有函数重载吗
2020/05/28 Python
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
护士试用期自我鉴定
2014/02/08 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
国王的演讲观后感
2015/06/03 职场文书
民主生活会意见
2015/06/05 职场文书
法人代表资格证明书
2015/06/18 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
Java实现多文件上传功能
2021/06/30 Java/Android
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang