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 相关文章推荐
event.srcElement 用法笔记e.target
Dec 18 Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
javascript计时器编写过程与实现方法
Feb 29 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
javascript验证form表单数据的案例详解
Mar 25 Javascript
vue+element-ui+axios实现图片上传
Aug 20 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
一个用php3编写的简单计数器
2006/10/09 PHP
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
javascript instanceof,typeof的区别
2010/03/24 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
利用Python读取文件的四种不同方法比对
2017/05/18 Python
python中set()函数简介及实例解析
2018/01/09 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
应届大专毕业生个人自荐信
2013/09/22 职场文书
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
大学生个人推荐信范文
2013/11/25 职场文书
高中生家长会演讲稿
2014/01/14 职场文书
高级编程求职信模板
2014/02/16 职场文书
干部下基层实施方案
2014/03/14 职场文书
计生工作先进事迹
2014/08/15 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android