ES6中Object.assign() 方法
ES6中Object.assign() 方法
1. 对象合并
Object.assign 方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象上。
如下代码演示:
var target = {a: 0};
var source1 = {b: 1};
var source2 = {c: 2}; Object.assign(target, source1, source2);
console.log(target); // 输出 {a: 0, b: 1, c: 2}
1-1 如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。
如下代码:
var target = {a: 0, b: 1};
var source1 = {a:1, b: 2, c:3};
var source2 = {c:5}; Object.assign(target, source1, source2); console.log(target); // 输出 {a: 1, b: 2, c: 5}
1-2 如果只有一个target(目标对象),Object.assign会直接返回该对象,如下代码:
var o = {a: 0};
Object.assign(o);
console.log(o); // {a: 0}
1-3 如果该参数不是对象,则会先转成对象,然后返回。
先是这样的,正常的返回是number类型。
var a = 1;
Object.assign(a);
console.log(a); //
console.log(typeof a); // number
然后直接判断类型,返回的是object类型
console.log(typeof Object.assign(2)) // object
1-4 对于null, undefined 来说 无法转换成Object,就会在控制台下报错,如下代码:
Object.assign(null); // 报错
Object.assign(undefined); // 报错
1-5 对象合并,如果源对象是null的话或者是undefined的话,那么对象合并的时候不会报错,直接会跳过该对象的合并,直接返回目标对象。
如下代码:
var obj = {a: 1};
console.log(Object.assign(obj, null) === obj); // true
console.log(obj); // {a: 1} var obj = {a: 1};
console.log(Object.assign(obj, undefined) === obj); // true
console.log(obj); // {a: 1}
1-6 如果是数值,布尔型,和字符串合并对象的话,都不会报错,但是字符串会以数组的形式表现。
先看数值合并对象如下代码:
var obj = {a: 1};
console.log(Object.assign(obj, 12) === obj); // true
console.log(obj); // {a: 1}
布尔型合并对象如下代码:
var obj = {a: 1};
console.log(Object.assign(obj, true) === obj); // true
console.log(obj); // {a: 1}
字符串合并对象如下代码:
var obj = {a: 1};
console.log(Object.assign(obj, "bcd") === obj); // true
console.log(obj); // {0: 'b', 1: 'c', 2: 'd', a: 1}
如上代码,只有字符串和对象合并,这是因为只有字符串有包装对象,会产生可枚举类型属性。比如如下代码:
console.log(Object('bcd')); // {0: "b", 1: "c", 2: "d", length: 3, [[PrimitiveValue]]: "bcd"}
console.log(Object(1111)); // {[[PrimitiveValue]]: 1111}
console.log(Object(true)); // {[[PrimitiveValue]]: true}
上面代码可以看到原始值都在包装对象的内部属性[[PrimitiveValue]]上,这个属性没有被Object.assign合并,只有字符串的包装对象会产生可枚举的属性,属性则会被合并。
但是Object.assign合并的属性是有限的,只合并对象的自身的属性(不合并继承属性),也不合并不可枚举的属性。
2. Object.assign方法是浅拷贝
因此Object.assign方法是浅复制,不是深复制,也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝的是这个对象的引用。
比如如下代码:
var o1 = {a: {b: 1} };
var o2 = Object.assign({}, o1);
o1.a.b = 2;
console.log(o2.a.b); //
如上代码,o1是一个对象,该对象的属性也是一个对象,使用Object.assign拷贝o1对象到o2上来,然后手动改变o1对象的属性值,那么o2对象的属性值也会被改变。
但是如果对象的属性值不是一个对象的话,那么就不会影响该值,如下代码:
var o1 = {a: 1};
var o2 = Object.assign({}, o1);
o1.a = 2;
console.log(o1); // {a: 2}
console.log(o2.a); //
但是如果源对象和目标对象有同名属性的话,那么Object.assign会直接替换该属性。比如如下代码:
var target = {a: {b: 1}};
var source1 = {a: {b: 'hello'}};
Object.assign(target, source1);
console.log(target); // {a: {b: 'hello'}}
注意:Object.assign可以用来处理数组,但是会把数组视为对象。
也就是说对象里面有键值对索引,如果把两个数组合并的话,那么得到不是合并后新增的数组,而是会把对应相同的键替换掉,如下使用数组的demo代码如下:
var targetArrs = [1, 2, 3];
var sourceArrs = [4, 5];
Object.assign(targetArrs, sourceArrs);
console.log(targetArrs); // [4, 5, 3]
如上代码,目标对象有1,2,3属性,源对象有4,5值,如果使用Object.assign的话,那么源对象的键4,5 和目标对象的1,2键是相同的,因此值直接替换掉。
3. Object.assign 常见使用在哪些地方?
3-1 为对象添加属性。比如如下代码:
class A {
constructor(x, y) {
Object.assign(this, {x, y});
}
}
如上方法通过Object.assign方法,将x属性和y属性添加到A类的对象实列中。
3-2 为对象添加方法
Object.assign(A.prototype, {
xMethod(x, y) {
...
},
yMethod() { }
});
// 相当于如下代码:
A.prototype.xMethod = function(x, y) {};
A.prototype.yMethod = function() {}
3-3 克隆对象
function clone(obj) {
return Object.assign({}, obj);
}
3-4 合并多个对象
如下一开始的代码:
var target = {a: 0};
var source1 = {b: 1};
var source2 = {c: 2};
Object.assign(target, source1, source2);
console.log(target); // 输出 {a: 0, b: 1, c: 2}
4. 对象深度克隆
浅度克隆和深度克隆的含义如下:
浅度克隆: 原始类型为值传递,对象类型为引用传递。
深度克隆: 所有元素或属性都是完全复制的,与原对象完全脱离,也就是说所有对于源对象的修改都不会反映到新对象中。反之,所有对于新对象的修改也不会反映到源对象中。
注意:Object.assign 是浅度克隆的。
4-1 ES5中我们可以通过递归的方式去调用函数来实现深度克隆。
代码如下:
function deepClone(obj) {
var newObj = obj instanceof Array ? [] : {};
for (var i in obj) {
newObj[i] = Object.prototype.toString.call(obj[i]) === "[object Object]" ? deepClone(obj[i]) : obj[i];
}
return newObj;
}
var obj = {a: {b: 1} };
var newObj = deepClone(obj);
console.log(newObj); // 打印输出 {a: {b: 1}} // 修改对象 obj
obj.a.b = 2;
console.log(obj); // 打印输出 {a: {b: 2}}
console.log(newObj); // 打印输出 {a: {b: 1}} 原对象的修改不会影响到新对象中
如上面的代码,在JS中,我们使用递归的方式,循环遍历对象的所有属性和方法,实现深度克隆,因此当我们深度克隆到新对象中的时候,再去更改源对象的属性值的时候,不会影响到新对象。
对象和数组一起的深度克隆
function typeOf(obj) {
const toString = Object.prototype.toString;
const map = {
'[object Boolean]': 'boolean',
'[object Number]': 'number',
'[object String]': 'string',
'[object Function]': 'function',
'[object Array]': 'array',
'[object Date]': 'date',
'[object RegExp]': 'regExp',
'[object Undefined]': 'undefined',
'[object Null]': 'null',
'[object Object]': 'object'
};
return map[toString.call(obj)];
}
function deepCopy(data) {
const t = this.typeOf(data);
let o,
i;
if (t === 'array') {
o = [];
} else if (t === 'object') {
o = {};
} else {
return data;
}
if (t === 'array') {
for (let i = 0; i < data.length; i++) {
o.push(this.deepCopy(data[i]));
}
} else if (t === 'object') {
for (i in data) {
o[i] = this.deepCopy(data[i]);
}
}
return o;
}
ES6中Object.assign() 方法的更多相关文章
- ES6中Object.is方法比较两个值是否相等
Object.is: let obj={a:1,b:2}; Object.is(obj,obj);//true Object.is(obj,{obj});//false Object.is({},{} ...
- 解决webpack和gulp打包js时ES6转译ES5时Object.assign()方法没转译成功的问题
在webpack或gulp打包的配置文件中package.json 引入"@babel/plugin-transform-object-assign": "^7.2.0& ...
- ES6 的Object.assign(target, source_1, ···)方法与对象的扩展运算符
一.基本概念 Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target).它至少需要两个对象作为参数,第一个参数是目标对象,后面的参数都是源对象. Ob ...
- Object.assign()方法
对象的扩展 1.ES6中,对象的属性和方法可简写:对象的属性值可不写,前提是属性名已经声明: var name = "zhangsan"; "; var obj = { ...
- ES6之Object.assign()详解
译者按: 这篇博客将介绍ES6新增的Object.assign()方法. 原文: ECMAScript 6: merging objects via Object.assign() 译者: Funde ...
- ES6学习--Object.assign()
ES6提供了Object.assign(),用于合并/复制对象的属性. Object.assign(target, source_1, ..., source_n) 1. 初始化对象属性 构造器正是为 ...
- JavaScript 复制对象【Object.assign方法无法实现深复制】
在JavaScript这门语言中,数据类型分为两大类:基本数据类型和复杂数据类型.基本数据类型包括Number.Boolean.String.Null.String.Symbol(ES6 新增),而复 ...
- javascript学习总结之Object.assign()方法详解
最近再写ES6的文章时候发现自己对Object.assign()方法不太了解,之前也没有接触过所以就就查阅了相关的资料,为了自己以后肯能会用到以及对知识进行巩固,所以在这里记录下自己学习的点点滴滴,毕 ...
- ES6的Object.assign()基本用法
Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target). 例如: const target = {a:1}, const source1 ...
随机推荐
- 【Spring】26、利用Spring的AbstractRoutingDataSource解决多数据源,读写分离问题
多数据源问题很常见,例如读写分离数据库配置. 1.首先配置多个datasource <bean id="dataSource" class="org.apache. ...
- 阿里CentOS 7 卸载mysql5.6
查看当前安装mysql情况 rpm -qa|grep -i mysql 执行 yum remove mysql rpm -e mysql-community-release-el7-5.noarch ...
- eclipse使用struts2找不到action方法或找不到action的错误记录
在确认web.xml已经配置, 配置好struts.xml , 代码没有报错, jar包没有问题, 服务器也没有问题, 代码逻辑没有问题, 关键字方法名action都没有写错, 可以运行旧的相同的代码 ...
- 【实践练习一】Git以及Github的使用
以前经常在同学大神那听说过Github这神器,虽敬佩久已,奈何却无缘使用.好吧,我承认,主要还是不会用,一看网站全是英文的,想想还是不要为难自己了.然而现在还是要为难自己了,趁着早上刚学 ...
- GitHub使用SSHkey进行连接
SSH key的配置基本是我们使用git必备的配置,配置好可以避免频繁的在git push或者git pull的时候输入账号和密码 本来我的SSH key早就配置好了,结果他不起作用了,那就在配置一次 ...
- MySQL 性能优化--优化数据库结构之优化数据大小
MySQL性能优化--优化数据库结构之优化数据大小 By:授客 QQ:1033553122 尽量减少表占用的磁盘空间.通常,执行查询期间处理表数据时,小表占用更少的内存. 表列 l 尽可能使 ...
- recovery 升级过程执行自定义shell命令
有时候我们需要,在升级的过程中,执行一些shell命令,来完成我们的一些需求,利用升级过程,进行一些特殊化的操作,思路如下: 第一: 把我们需要执行的命令,写成一个test.sh脚本,然后在recov ...
- 《R数据挖掘入门》彩色插图(第9章)
图9.5 图9.9
- 如何用vmware workstation来做虚拟化实验
前言 以前做用vmare只是简单的实验,但是随着现在虚拟化的兴起,我们的开始要开始虚拟化的实验了. 我们看到有些windows 2012的书上面说用hyper-v来实验,但是hyper-v只能做一些列 ...
- pb数据窗口之间的传参
问题描述: 通过一个窗口打开一个子窗口并传递指定参数查询详细信息 解决方法: 在前者窗体的user object下的itemchanged事件中,相应位置加入openwithparm函数 : op ...