JS----对象的合并与克隆
一. 合并与克隆的差别
1. 克隆是特殊的合并(以空对象作为目标对象,非空对象作为源对象进行合并),克隆要求目标对象与源对象的 constructor相同。
2. 克隆的源对象只有一个,合并的源对象可以是多个。
二. 合并的方法
1.Object.assign():
例:var obj1 ={
m : 1,
n : 2,
j : {
r : {
h : 2
},
p : 4 } ,
p : 1
}
var obj2 ={ m : 2 , n : undefined, j : { h : 2 ,o: 3}}
var obj3 = Object.assign(obj1,obj2);
结果:obj1 = { m : 2,n : undefined, j : { h : 2, o : 3 }, p : 1 };
obj2 ={ m : 2 , n : undefined, j : { h : 2, o : 3 } };
obj3 ={ m : 2 , n : undefined, j : { h : 2, o : 3 }, p : 1 };
注意:1). 目标对象自身也会变 obj1===obj3
2). 此方法为浅合并
3). undefined参与合并
4). 原型不属性参与合并
2. $.extend:
情况一:
例:var obj1 ={ m : 1, n : 2, j : { r : { h : 2 }, p : 4 }, p : 1 }
var obj2 ={ m : 2, n : undefined, j : { h : 2, o : 3 } }
var obj3 = $.extend(obj1,obj2);
结果:obj1 = { m : 2, n : 2, j : { h : 2, o : 3 }, p : 1 };
obj2 ={ m : 2, n : undefined, j : { h : 2, o : 3 } };
obj3 ={ m : 2, n : 2, j : { h : 2, o : 3 }, p : 1 };
注意:1). 目标对象自身也会变 obj1===obj3
2). 此方法为浅合并
3). undefined不参与合并
4). 原型不属性参与合并
情况二:
例:var obj1 ={ m : 1, n : 2, j : { r : { h : 2 }, p : 4 }, p : 1 }
var obj2 ={ m : 2, n : undefined, j : { h : 2, o : 3 } }
var obj4 = $.extend({},obj1,obj2);
结果:obj1 = { m : 1, n : 2, j : { r : { h : 2 }, p : 4 }, p : 1 };
obj2 ={ m : 2, n : undefined, j : { h : 2, o : 3 } };
obj3 ={ m : 2, n : 2, j : { h : 2, o : 3 }, p : 1 };
注意:1). 此方法为浅合并
2). undefined不参与合并
3). 原型不属性参与合并
情况三:
例:var obj1 ={ m:1,n:2,j:{r:{h:2},p:4},p:1}
var obj2 ={m:2,n:undefined,j:{h:2,o:3}}
var obj3 = $.extend(true,obj1,obj2);
结果:obj1 = {m:2,n:2,j:{h:2,o:3,r:{h:2},p:4},p:1};
obj2 ={m:2,n:undefined,j:{h:2,o:3}};
obj3 ={m:2,n:2,j:{h:2,o:3,r:{h:2},p:4},p:1};
注意:1). 目标对象自身也会变 obj1===obj3
2). 此方法为深合并
3). undefined不参与合并
4). 原型不属性参与合并
3. 遍历赋值法
思路:将obj2中存在的属性但obj1不存在的属性赋值给obj1。
步骤:1). 遍历obj2中属性。
2). 判断obj1不存在此属性
3). 将次值赋给obj1
var extentObj = function(obj1,obj2){
for(let key in obj2){
if(obj2.hasOwnProperty(key) && (!obj1.hasOwnProperty(key))){
obj1[key] = obj2[key]
}
}
}
三. 克隆的方法
1. JSON.parse(JSON.stringify()):
1). 先将对象变为字符串,然后再变为json对象,防止对象的指针指向问题,为深拷贝
2). undefined 和 function 类型的属性会被忽略,而 Date 类型的属性则会被转换为字符串
2. $.extend:
传true为深拷贝,不传为浅拷贝
注意:深拷贝与浅拷贝的区别
浅拷贝直接把引用地址原样拿来,此时,不管源对象还是目标对象,修改引用属性后另一个对象的同名属性都会受到影响。
深拷贝则会递归地在目标对象上创建值,目标对象和源对象之间将完全独立
JS----对象的合并与克隆的更多相关文章
- js 对象的合并(3种方法)转载
对象的合并 需求:设有对象 o1 ,o2,需要得到对象 o3 var o1 = { a:'a' }, o2 = { b:'b' }; // 则 var o3 = { a:'a', b:'b' } 方法 ...
- js对象简单、深度克隆(复制)
javascript的一切实例都是对象,只是对象之间稍有不同,分为原始类型和合成类型.原始类型对象指的是字符串(String).数值(Number).布尔值(Boolean),合成类型对象指的是数组( ...
- js对象的合并
问题情况:将2个或2个以上对象(object{....})中的属性进行合并,即最后合并为一个object{.....}传递给后端. 问题场景:多页表单数据的一同提交 解决办法:Object.assig ...
- js 对象(object)合并
var obj1 = { name:'lisi', checked:'true' }; var obj2 = { name:'zhangsan', age:18 }; Object.assign(ob ...
- js对象合并
实现js对象大合并,ES6之前就只有循环遍历咯.可以用ES6的话可以用Object.assign(). 以下是Object.assign()示例: var o1 = { a: 1 }; var o2 ...
- js对象的深度克隆
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS 两个对象数组合并并去重
JS两个对象数组合并并去重 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- js对象详解(JavaScript对象深度剖析,深度理解js对象)
js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...
- JS对象复制
在JavaScript很多人复制一个对象的时候都是直接用"=",因为大家都觉得脚本语言是没有指针.引用.地址之类的,所以直接用"="就可以把一个对象复制给另外一 ...
- 超实用的JavaScript代码段 Item8 -- js对象的(深)拷贝
js 对象 浅拷贝 和 深拷贝 1.浅拷贝 拷贝就是把父对像的属性,全部拷贝给子对象. 下面这个函数,就是在做拷贝: var Chinese = { nation:'中国' } var Doctor ...
随机推荐
- 2018-2019-1 20189210 《Linux内核原理与分析》第三周作业
一.学习笔记 计算机的"三大法宝" 1.程序存储计算机. 2.函数调用对栈.堆栈的作用是:记录函数调用框架.传递函数参数.保存返回值地址.提供函数内部局部变量的存储空间.函数调用堆 ...
- Python基础之语句1
一.行定义(两类): 1.物理行:程序员编写代码的行. 2.逻辑行:python解释器需要执行的指令. 建议:一个逻辑行在一个物理行上,若一个物理行使用多个逻辑行,需要使用分号隔开:如果逻辑行过长,可 ...
- php发送短信验证码
业务: 手机端点击发送验证码,请求发送到php端,由php调用榛子云短信http://smsow.zhenzikj.com的短信接口,生成验证码并发送. SDK下载: http://smsow.zhe ...
- uperTextView-从未如此惊艳!一个超级的TextView
简介 下载:http://www.see-source.com/androidwidget/detail.html?wid=1273 欢迎使用SuperTextView,这篇文档将会向你展示如何使用这 ...
- ASP.NET Core 2.2 迁移至 3.0 备忘录
将 ASP.NET Core 2.2 迁移至 ASP.NET Core 3.0 需要注意的地方记录在这篇随笔中. TargetFramework 改为 netcoreapp3.0 <Target ...
- 工作中对git使用的总结
git与svn的区别,简单的说, svn在checkout后,如果不提交,那么版本库没有记录,如果修改的文件比较多,中间想回退几个文件,非常麻烦.git 是clone下来代码和记录,不提交 ...
- VUE-004-禁止修改页面显示项,设置el-input,textarea只读方法
在实际业务需求中,有些内容当初次创建后,即不可再次进行修改变更,因而需要显示的文本内容不允许变更.此时,可通过页面限制防止用户修改. 方法:添加 readonly="true" 或 ...
- Module 3 - Azure - Web Apps
Module 3 - 微软云 Azure - Web Apps 1. Create new Web application in the Azure Portal Azure Portal -> ...
- go 语言图片像素点处理
将一张图片色彩反转,就是将 rgb 值,分别被 255 减 package main import ( "bytes" "fmt" "image&q ...
- java 对象的一点小问题
List<A> list = new ArrayList(); A a = new A(); for(int i=0;i<3;i++) { a.setI(i); list.add(A ...