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 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
npm国内镜像 安装失败的几种解决方案
Jun 04 Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 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
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
PHP中的串行化变量和序列化对象
2006/09/05 PHP
php中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
ie与ff下的event事件使用介绍
2013/11/25 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
介绍Python中的__future__模块
2015/04/27 Python
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
Python爬取三国演义的实现方法
2016/09/12 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
关于python多重赋值的小问题
2019/04/17 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
Python3实现二叉树的最大深度
2019/09/30 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
教师个人剖析材料
2014/02/05 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书
2016寒假假期总结
2015/10/10 职场文书
在Docker容器中部署SQL Server
2022/04/11 Servers