笔试之写个深复制【浅拷贝和深拷贝】

前言

从层次上来看&＃xff0c;对象的复制可以简单地分为浅复制和深复制&＃xff0c;顾名思义&＃xff0c;浅复制是指只复制一层对象的属性&＃xff0c;不会复制对象中的对象的属性&＃xff0c;对象的深复制会复制对象中层层嵌套的对象的属性。
在复制对象时&＃xff0c;除了要复制对象的属性外&＃xff0c;还要兼顾到是否保留了对象的constructor属性&＃xff0c;是否对每一种数据类型&＃xff08;Javascript常见的数据类型有String&＃xff0c;Number&＃xff0c;Boolean,Data,RegExp,Array,Funtion,Object&＃xff09;都实现正确的复制。项目中&＃xff0c;我们可以根据实际情况&＃xff0c;决定需要实现什么样程度的复制。
本文是我在复制对象方面的一些心得总结&＃xff0c;由浅复制到深复制&＃xff0c;由只复制简单属性到复制Function&＃xff0c;RegExp等复杂属性&＃xff0c;层层递进。如有陈述不当之处&＃xff0c;烦请指出&＃xff0c;不胜感激。

正文

浅复制

浅复制只会依次复制对象的每一个属性&＃xff0c;不会对这些属性进行递归复制。下面是一个简单的浅复制实现。

//对象浅复制 function shadowCopy(obj){if(typeof obj !&＃61;&＃61; &＃39;object&＃39;) return obj;for(var prop in obj){if(obj.hasOwnProperty(prop)){newObj[prop] &＃61; obj[prop];}}return newObj;}

仔细观察&＃xff0c;不难发现上述方法的缺陷&＃xff1a;
1.不能正确实现数组的浅复制
2.复制操作丢失了对象的constructor属性

好&＃xff0c;我们现在已经发现了问题所在&＃xff0c;只需针对性地解决&＃xff0c;一个还算完美的浅复制对象的方法就诞生了&＃xff01;

//对象浅复制function shadowCopy(obj){if(typeof obj !&＃61;&＃61; &＃39;object&＃39;) return ;var newObj;//保留对象的constructor属性if(obj.constructor &＃61;&＃61;&＃61; Array){newObj &＃61; [];} else {newObj &＃61; {};newObj.constructor &＃61; obj.constructor;}for(var prop in obj){if(obj.hasOwnProperty(prop)){newObj[prop] &＃61; obj[prop];}}return newObj;}

浏览器中测试一下&＃xff1a;

var arr1 &＃61; [0,1,2];console.log(arr1);console.log(shadowCopy(arr1));var arr2 &＃61; [0,1,2,[3,4,5]],arr2Copy &＃61; shadowCopy(arr2);console.log(arr2);console.log(arr2Copy);arr2Copy[3][0] &＃61; 6;console.log(arr2[3][0]); //6

Good! 可以正确实现数组复制和并且保留constructor了&＃xff0c;但细心的你一定发现了&＃xff0c;浅复制后的对象的 arr2Copy[3] 和 arr2[3] 指向的是一个对象&＃xff0c;改变其中一个&＃xff0c;同时也会改变另一个。我们想要实现的是复制&＃xff0c;但这并不是复制呀&＃xff01;
这是浅复制的一个弊端所在&＃xff0c;接下让我们看看深复制是怎样解决这个问题的。

深复制

深复制需要层层递归&＃xff0c;复制对象的所有属性&＃xff0c;包括对象属性的属性的属性....(晕~)
如果只是需要简单地复制对象的属性&＃xff0c;而不用考虑它的constructor&＃xff0c;也不用考虑函数&＃xff0c;正则&＃xff0c;Data等特殊数据类型&＃xff0c;那这里有一个深复制的小trick&＃xff0c;两行代码即可&＃xff1a;

function deepCopy(obj){if(typeof obj !&＃61;&＃61; "object"){ return ;}var str &＃61; JSON.stringify(obj);return JSON.parse(str); }

大多数情况下&＃xff0c;上面的就可以满足要求了&＃xff0c;但一些时候&＃xff0c;我们需要把函数&＃xff0c;正则等特殊数据类型也考虑在内&＃xff0c;或者当前环境不支持JSON时&＃xff0c;上面的方法也就不适用了。这时&＃xff0c;我们可以通过递归来实现对象的深层复制&＃xff0c;如下&＃xff1a;

function deepCopy(p, c) {var c &＃61; c || {};for(var i in p) {if(typeof p[i] &＃61;&＃61;&＃61; &＃39;object&＃39;) {c[i] &＃61; (p[i].constructor &＃61;&＃61;&＃61; Array) ? [] : {};deepCopy(p[i], c[i]);} else {c[i] &＃61; p[i];}}return c;}console.log(deepCopy({a: [1, 2],b: 3}));console.log(deepCopy([{a: &＃39;a&＃39;}, 2]));

先用上面的例子测试&＃xff1a;

棒&＃xff01;可以正确实现多维数组的复制&＃xff0c;再看是否能实现函数和正则的复制&＃xff1a;

function Person(name){this.name &＃61; name;this.age &＃61; age;this.search &＃61; new RegExp(name);this.say &＃61; function(){console.log(this.name &＃43; "今年" &＃43; this.age &＃43; "岁了");} } var p1 &＃61; new Person("Claiyre",20),p2 &＃61; deepCopy(p1);console.log(p1); console.log(p2);p2.age &＃61; 22; p1.say(); p2.say();

圆满完成&＃xff01;&＃xff01;

稍加整理&＃xff0c;我们就可以得到一个较为通用的js对象复制函数&＃xff1a;

前言

拷贝也是面试经典呐&＃xff01;

数组的浅拷贝

如果是数组&＃xff0c;我们可以利用数组的一些方法比如&＃xff1a;slice、concat 返回一个新数组的特性来实现拷贝。

比如&＃xff1a;

var arr &＃61; [&＃39;old&＃39;, 1, true, null, undefined];var new_arr &＃61; arr.concat();new_arr[0] &＃61; &＃39;new&＃39;;console.log(arr) // ["old", 1, true, null, undefined] console.log(new_arr) // ["new", 1, true, null, undefined]

用 slice 可以这样做&＃xff1a;

var new_arr &＃61; arr.slice();

但是如果数组嵌套了对象或者数组的话&＃xff0c;比如&＃xff1a;

var arr &＃61; [{old: &＃39;old&＃39;}, [&＃39;old&＃39;]];var new_arr &＃61; arr.concat();arr[0].old &＃61; &＃39;new&＃39;; arr[1][0] &＃61; &＃39;new&＃39;;console.log(arr) // [{old: &＃39;new&＃39;}, [&＃39;new&＃39;]] console.log(new_arr) // [{old: &＃39;new&＃39;}, [&＃39;new&＃39;]]

我们会发现&＃xff0c;无论是新数组还是旧数组都发生了变化&＃xff0c;也就是说使用 concat 方法&＃xff0c;克隆的并不彻底。

如果数组元素是基本类型&＃xff0c;就会拷贝一份&＃xff0c;互不影响&＃xff0c;而如果是对象或者数组&＃xff0c;就会只拷贝对象和数组的引用&＃xff0c;这样我们无论在新旧数组进行了修改&＃xff0c;两者都会发生变化。

我们把这种复制引用的拷贝方法称之为浅拷贝&＃xff0c;与之对应的就是深拷贝&＃xff0c;深拷贝就是指完全的拷贝一个对象&＃xff0c;即使嵌套了对象&＃xff0c;两者也相互分离&＃xff0c;修改一个对象的属性&＃xff0c;也不会影响另一个。

所以我们可以看出使用 concat 和 slice 是一种浅拷贝。

数组的深拷贝

那如何深拷贝一个数组呢&＃xff1f;这里介绍一个技巧&＃xff0c;不仅适用于数组还适用于对象&＃xff01;那就是&＃xff1a;

var arr &＃61; [&＃39;old&＃39;, 1, true, [&＃39;old1&＃39;, &＃39;old2&＃39;], {old: 1}]var new_arr &＃61; JSON.parse( JSON.stringify(arr) );console.log(new_arr);

是一个简单粗暴的好方法&＃xff0c;就是有一个问题&＃xff0c;不能拷贝函数&＃xff0c;我们做个试验&＃xff1a;

var arr &＃61; [function(){console.log(a) }, {b: function(){console.log(b)} }]var new_arr &＃61; JSON.parse(JSON.stringify(arr));console.log(new_arr);

我们会发现 new_arr 变成了&＃xff1a;

不能拷贝函数

浅拷贝的实现

以上三个方法 concat、slice、JSON.stringify 都算是技巧类&＃xff0c;可以根据实际项目情况选择使用&＃xff0c;接下来我们思考下如何实现一个对象或者数组的浅拷贝。

想一想&＃xff0c;好像很简单&＃xff0c;遍历对象&＃xff0c;然后把属性和属性值都放在一个新的对象不就好了~

嗯&＃xff0c;就是这么简单&＃xff0c;注意几个小点就可以了&＃xff1a;

var shallowCopy &＃61; function(obj) {// 只拷贝对象if (typeof obj !&＃61;&＃61; &＃39;object&＃39;) return;// 根据obj的类型判断是新建一个数组还是对象var newObj &＃61; obj instanceof Array ? [] : {};// 遍历obj&＃xff0c;并且判断是obj的属性才拷贝for (var key in obj) {if (obj.hasOwnProperty(key)) {newObj[key] &＃61; obj[key];}}return newObj; }

深拷贝的实现

那如何实现一个深拷贝呢&＃xff1f;说起来也好简单&＃xff0c;我们在拷贝的时候判断一下属性值的类型&＃xff0c;如果是对象&＃xff0c;我们递归调用深拷贝函数不就好了~

var deepCopy &＃61; function(obj) {if (typeof obj !&＃61;&＃61; &＃39;object&＃39;) return;var newObj &＃61; obj instanceof Array ? [] : {};for (var key in obj) {if (obj.hasOwnProperty(key)) {newObj[key] &＃61; typeof obj[key] &＃61;&＃61;&＃61; &＃39;object&＃39; ? deepCopy(obj[key]) : obj[key];}}return newObj; }