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 ...
随机推荐
- Jmeter应用-接口测试
1.BS架构应用性能 2.HTTP协议接口功能与性能 3.FTP协议接口功能与性能 4.Mysql数据库性能 5.MongoDB数据库性能 6.支持自定义Java组件开发 测试计划-右键-添加线程组 ...
- vscode + electron 提示:无法连接到legacy请采用inspector解决办法
首先,你的程序是可以直接运行的,在命令行中可以运行,只是在vsCode中,运行一段时间就被这个提示弹出. 解决方法: 先在launch.json 中加上"protocol":&qu ...
- java字符串实现正序和倒序输出
##一共4种方式 /* * string倒序输出 * 利用String类的toCharArray(),再倒序输出数组的方法 * 2018-5-18 1 ...
- oracle 表 库实例 空间
地址 http://blog.csdn.net/g15738290530/article/details/51859048 1:个人理解 数据库可以有多个实例,其中 orcl 为默认 一般情况下,一个 ...
- mysql添加字段
使用事务给表添加字段 #添加字段说明 USE test;/*库名*/ DROP PROCEDURE IF EXISTS schema_change; DELIMITER // CREATE PROCE ...
- centos7安装nodejs运行环境及卸载
一.安装1.进入官网下载最新版本https://nodejs.org/en/ 选择下载后上传或直接使用wget下载 wget https://nodejs.org/dist/v8.11.2/node- ...
- php中数组直接用加号相加array+array
php中数组功能非常强大,甚至也可以直接通过+相加来合并数组. A数组 $a = ['a', 'b']; B数组 $b = ['c', 'd', 'e']; A+B结果 Array ( [0] =&g ...
- centos 7 防火墙操作
1.查看防火墙状态 firewall-cmd --state 2.开启防火墙 systemctl start firewalld.service 3.关闭防火墙 systemctl stop fire ...
- JMeter-生成性能测试结果报告
1.将jmeter添加至环境变量,验证环境是否配置完毕: 终端输入jmeter,如果返回如下信息并启动jmeter说明环境已配置好了 2.修改配置文件 查找“Results file configur ...
- django js引入失效问题
今天将项目中html文件下的自定义scrept代码单独独立,结果js引入无效,没有任何时间效果,在浏览器查看引入文件也正常. 后来发现自己引入的位置不对,js的引入文件应该放在body体内,而我把他们 ...