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获取事件对象代码
Aug 05 Javascript
javascript表单验证大全
Aug 12 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
vue npm install 安装某个指定的版本操作
Aug 11 Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 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
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
javaScript实现游戏倒计时功能
2018/11/17 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
Python 除法小技巧
2008/09/06 Python
python 图片验证码代码
2008/12/07 Python
python Django模板的使用方法(图文)
2013/11/04 Python
对pandas中Series的map函数详解
2018/07/25 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
Python Pandas 箱线图的实现
2019/07/23 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
Ejb技术面试题
2015/04/29 面试题
家长评语和期望
2014/02/10 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
房屋过户委托书范本
2014/10/07 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
三好学生事迹材料
2014/12/24 职场文书
主持人开幕词
2015/01/29 职场文书
大学生十八大感想
2015/08/11 职场文书
Python编写冷笑话生成器
2022/04/20 Python