js对象进行浅复制,深拷贝的方法
js对象浅拷贝和深拷贝详解
本文为大家分享了JavaScript对象的浅拷贝和深拷贝代码,供大家参考,具体内容如下
1.浅拷贝
拷贝就是把父对像的属性,全部拷贝给子对象。
下面这个函数,就是在做拷贝:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var Chinese = { nation: '中国' } var Doctor = { career: '医生' } function extendCopy(p) { var c = {}; for ( var i in p) { c[i] = p[i]; } c.uber = p; return c; } |
使用的时候,这样写:
1
2
3
|
var Doctor = extendCopy(Chinese); Doctor.career = '医生' ; alert(Doctor.nation); // 中国 |
但是,这样的拷贝有一个问题。那就是,如果父对象的属性等于数组或另一个对象,那么实际上,子对象获得的只是一个内存地址,而不是真正拷贝,因此存在父对象被篡改的可能。
请看,现在给Chinese添加一个”出生地”属性,它的值是一个数组。
Chinese.birthPlaces = ['北京','上海','香港'];
通过extendCopy()函数,Doctor继承了Chinese。
var Doctor = extendCopy(Chinese);
然后,我们为Doctor的”出生地”添加一个城市:
Doctor.birthPlaces.push('厦门');
看一下输入结果
alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门
alert(Chinese.birthPlaces); //北京, 上海, 香港, 厦门
结果是两个的出生地都被改了。
所以,extendCopy() 只是拷贝了基本类型的数据,我们把这种拷贝叫做“浅拷贝”。
2.深拷贝
var option1 = JSON.parse(JSON.stringify(option));
//利用json.parse 以及json.stringify 将对象进行json转换一次达到复制对象的目的,但不支持对象里面含有方法 function的对象,
3.深拷贝
因为浅深拷有如此弊端所以我们接下来看一下深拷贝
所谓”深拷贝”,就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难,只要递归调用”浅拷贝”就行了。
1
2
3
4
5
6
7
8
9
10
11
12
|
function deepCopy(p, c) { var c = c || {}; for ( var i in p) { if ( typeof p[i] === 'object' ) { c[i] = (p[i].constructor === Array) ? [] : {}; deepCopy(p[i], c[i]); } else { c[i] = p[i]; } } return c; } |
看一下使用方法:
var Doctor = deepCopy(Chinese);
现在,给父对象加一个属性,值为数组。然后,在子对象上修改这个属性:
1
2
3
4
5
|
Chinese.birthPlaces = [ '北京' , '上海' , '香港' ]; Doctor.birthPlaces.push( '厦门' ); alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门 alert(Chinese.birthPlaces); //北京, 上海, 香港 |
这样就完成了拷贝;
$.extend()
jquery 中$.extend()如同。
$.extend( [deep ], target, object1 [, objectN ] )
•deep
类型: Boolean
如果是true,合并成为递归(又叫做深拷贝)。
•target
类型: Object
对象扩展。这将接收新的属性。
•object1
类型: Object
一个对象,它包含额外的属性合并到第一个参数.
•objectN
类型: Object
包含额外的属性合并到第一个参数
当我们提供两个或多个对象给$.extend(),对象的所有属性都添加到目标对象(target参数)。
如果只有一个参数提供给$.extend(),这意味着目标参数被省略。在这种情况下,jQuery对象本身被默认为目标对象。这样,我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。
请记住,目标对象(第一个参数)将被修改,并且将通过$.extend()返回。然而,如果我们想保留原对象,我们可以通过传递一个空对象作为目标对象:
var object = $.extend({}, object1, object2);
在默认情况下,通过$.extend()合并操作不是递归的;如果第一个对象的属性本身是一个对象或数组,那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。可以通过检查下面例子中 banana 的值,就可以了解这一点。然而,如果将 true 作为该函数的第一个参数,那么会在对象上进行递归的合并。
警告:不支持第一个参数传递 false 。
1. 合并两个对象,并修改第一个对象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
var object1 = { apple: 0, banana: { weight: 52, price: 100 }, cherry: 97 }; var object2 = { banana: { price: 200 }, durian: 100 }; // Merge object2 into object1 $.extend( object1, object2 ); // Assuming JSON.stringify - not available in IE<8 console.log( JSON.stringify( object1 ) ); //{"apple":0,"banana":{"price":200},"cherry":97,"durian":100} |
2. 采用递归方式合并两个对象,并修改第一个对象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
var object1 = { apple: 0, banana: { weight: 52, price: 100 }, cherry: 97 }; var object2 = { banana: { price: 200 }, durian: 100 }; // Merge object2 into object1, recursively $.extend( true , object1, object2 ); // Assuming JSON.stringify - not available in IE<8 console.log( JSON.stringify( object1 ) ); //{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100} |
3. 合并 defaults 和 options 对象,并且不修改 defaults 对象。这是常用的插件开发模式。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var defaults = { validate: false , limit: 5, name: "foo" }; var options = { validate: true , name: "bar" }; // Merge defaults and options, without modifying defaults var settings = $.extend( {}, defaults, options ); console.log(JSON.stringify( defaults )); console.log(JSON.stringify( options )); console.log(JSON.stringify( settings )); //defaults -- {"validate":false,"limit":5,"name":"foo"} //options -- {"validate":true,"name":"bar"} //settings -- {"validate":true,"limit":5,"name":"bar"} |
Javascript 判断对象是否相等
在Javascript中相等运算包括”==”,”===”全等,两者不同之处,不必多数,本篇文章我们将来讲述如何判断两个对象是否相等? 你可能会认为,如果两个对象有相同的属性,以及它们的属性有相同的值,那么这两个对象就相等。那么下面我们通过一个实例来论证下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
var obj1 = { name: "Benjamin" , sex : "male" } var obj2 = { name: "Benjamin" , sex : "male" } //Outputs: false console.log(obj1 == obj2); //Outputs: false console.log(obj1 === obj2); |
通过上面的例子可以看到,无论使用”==”还是”===”,都返回false。主要原因是基本类型string,number通过值来比较,而对象(Date,Array)及普通对象通过指针指向的内存中的地址来做比较。看下面一个例子:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
var obj1 = { name: "Benjamin" , sex : "male" }; var obj2 = { name: "Benjamin" , sex : "male" }; var obj3 = obj1; //Outputs: true console.log(obj1 == obj3); //Outputs: true console.log(obj1 === obj3); //Outputs: false console.log(obj2 == obj3); //Outputs: false console.log(obj2 === obj3); |
上例返回true,是因为obj1和ob3的指针指向了内存中的同一个地址。和面向对象的语言(Java/C++)中值传递和引用传递的概念相似。 因为,如果你想判断两个对象是否相等,你必须清晰,你是想判断两个对象的属性是否相同,还是属性对应的值是否相同,还是怎样?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
function person(name) { this .name=name; } var p1 = new person( "p1" ); var p2 = new person( "p2" ); console.log(p1 == p2); //false person.prototype.sayHi = function () { // do sayHi here } console.log(p1.sayHi() == p2.sayHi()); //true console.log(p1.sayHi() === p2.sayHi()); //true |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
2.对多维数据进行深拷贝的方法
function deepCopy1(arry1, arry2){
var tempArry =[];
for(var i = 0,l= arry1.length;i<l;i++) {
//判断每一项是不是一个数组
if (arry1[i] instanceof Array ) {
deepCopy1(arry1[i], tempArry)
arry2[i] = tempArry;
} else {
arry2[i] = arry1[i];
}
} }
var c = [[1,[2,3]],4,5];
var deepArray = [];
deepArry.length=0;
deepCopy1(c,deepArry);
console.log(c);
console.log(deepArry);
deepArry[0][1][0] = 99;
console.log(c);
console.log(deepArry);
js对象进行浅复制,深拷贝的方法的更多相关文章
- C#在WinForm中使用WebKit传递js对象实现与网页交互的方法
这篇文章主要介绍了C#在WinForm中使用WebKit传递js对象实现与网页交互的方法,涉及针对WebBroswer控件及WebKit控件的相关使用技巧,需要的朋友可以参考下 本文实例讲述了C#在W ...
- javascript 数组和对象的浅复制和深度复制 assign/slice/concat/JSON.parse(JSON.stringify())
javascript 数组和对象的浅度复制和深度复制在平常我们用 ‘=’来用一个变量引用一个数组或对象,这里是‘引用’而不是复制下面我们看一个例子引用和复制是什么概念 var arr=[1,2,3,' ...
- 深复制VS浅复制(MemberwiseClone方法介绍)
MemberwiseClone方法,属于命名空间System,存在于程序集 mscorlib.dll中.返回值是System.Object.其含义是:创建一个当前object对象的浅表副本. MSDN ...
- js对象/数组深度复制
今天碰到个问题,js对象.数组深度复制:之前有见过类似的,不过没有实现函数复制,今晚想了一下,实现代码如下: function clone(obj) { var a; if(obj instanceo ...
- 判断JS对象是否拥有某属性的方法举例
判断JS对象是否拥有某属性 JS是否拥有某属性的判断方法,这里提供两种方式,供大家参考. 1.in 运算符 var obj = {name:'jack'}; alert('name' in obj); ...
- js中的浅复制和深复制
浅复制:浅复制是复制引用,复制后的引用都是指向同一个对象的实例,彼此之间的操作会互相影响 深复制:深复制不是简单的复制引用,而是在堆中重新分配内存,并且把源对象实例的所有属性都进行新建复制,以保证深复 ...
- js 对象的深复制 解决不能复制undefined (递归)
用普通的拷贝 JSON.parse和 JSON.stringify 进行对象拷贝是不会拷贝undefined //普通的拷贝 const obj = { a: { ...
- js对象的浅拷贝与深拷贝
浅拷贝和深拷贝都是对于JS中的引用类型而言的,浅拷贝就只是复制对象的引用(堆和栈的关系,原始(基本)类型Undefined,Null,Boolean,Number和String是存入堆,直接引用,ob ...
- js 对象的合并(3种方法)转载
对象的合并 需求:设有对象 o1 ,o2,需要得到对象 o3 var o1 = { a:'a' }, o2 = { b:'b' }; // 则 var o3 = { a:'a', b:'b' } 方法 ...
随机推荐
- novaclient开发中遇到的问题小结
1. 使用官网实例代码,并不能新建client; from novaclient import client nova = client.Client(VERSION, USERNAME, PASSW ...
- 「PKUSC2018」最大前缀和
题面 题解 可以想到枚举成为最大前缀和的一部分的数 设\(sum_i=\sum\limits_{j\in i}a[j]\) 设\(f_i\)表示满足\(i\)的最大前缀和等于\(sum_i\)的方案数 ...
- 【HNOI2007】紧急疏散
题面 题解 \(\text{HNOI2007}\)真的恐怖 这是集合了所罗门的咒语,胜负一子等神仙题和码农题的一年 所以这道题非常码 二分答案,将门拆点,于是就变成了一个二分图匹配的题目 反正很恶心 ...
- 【BZOJ1044】[HAOI2008]木棍分割
[BZOJ1044][HAOI2008]木棍分割 题面 bzoj 洛谷 题解 第一问显然可以二分出来的. 第二问: 设\(dp[i][j]\)表示前\(i\)个,切了\(j\)组的方案数 发现每次转移 ...
- 4710: [Jsoi2011]分特产
4710: [Jsoi2011]分特产 链接 分析: 容斥原理+隔板法. 代码: #include<cstdio> #include<algorithm> #include&l ...
- mysql查询操作之单表查询、多表查询、子查询
一.单表查询 单表查询的完整语法: .完整语法(语法级别关键字的排列顺序如下) select distinct 字段1,字段2,字段3,... from 库名.表名 where 约束条件 group ...
- 微信小程序如何检测接收iBeacon信号
前话 微信小程序开发带着许多坑,最近就遇到了个需求,检测iBeacon来进行地点签到. (╯▔皿▔)╯ 微信小程序对于iBeacon的文档也写的十分精简,只简单介绍了每个接口的作用,这就导致我以为简单 ...
- Famous框架系列一:famous/core/Surface
famous/core/Surface 既然是Famous的第一篇文章,就先给Famous打个广告:http://periodic.famo.us Famous12年的作品,点击右下角Fun thi ...
- 多栏布局与JS实现瀑布流
css3属性之多栏布局与JS实现瀑布流 背景:之前打算自己总结一下flex布局的知识点,发现自己无从下手,原因在何处:我反思了一下,其实原因很简单,使用的次数少,更多的时间使用了百分比,浮动和定位解决 ...
- 深入浅出js中的this
Q:this是什么? A:this是Javascript语言的一个关键字,它代表函数运行时,自动生成的一个内部对象,在每个 function 中自动根据作用域(scope) 确定, 指向的是此次调用者 ...