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 相关文章推荐
Javascript 中的 && 和 || 使用小结
Apr 25 Javascript
javascript学习小结之prototype
Dec 03 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
JavaScript实现旋转轮播图
Aug 18 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
微信小程序HTTP请求从0到1封装
Sep 09 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
JAVA/JSP学习系列之七
2006/10/09 PHP
用PHP实现的生成静态HTML速度快类库
2007/03/31 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
php恢复数组的key为数字序列的方法
2015/04/28 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
numpy基础教程之np.linalg
2019/02/12 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
CSS3盒子模型详解
2013/04/24 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
法学研究生自我鉴定范文
2013/12/04 职场文书
管理学专业个人求职信范文
2013/12/13 职场文书
电视购物广告词
2014/03/19 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
关于环保的宣传稿
2015/07/23 职场文书
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL