想必刚接触javascript的同学应该遇到过一个问题,将一个对象复制一份用一个新的变量来存起来,然后再来操作这个新变量的时候,奇怪的事情发生了,我只修改了副本,为什么原对象却跟着改变了????
这就涉及到了对象拷贝相关的知识点了。
对象拷贝分为深拷贝和浅拷贝,而浅拷贝和深拷贝都是对于JS中的引用类型而言的,浅拷贝就只是复制对象的引用(堆和栈的关系,简单类型Undefined,Null,Boolean,Number和String是存入堆,直接引用,object array 则是存入桟中,只用一个指针来引用值),如果拷贝后的对象发生变化,原对象也会发生变化。只有深拷贝才是真正地对对象的拷贝。
浅拷贝:
浅拷贝的意思就是只复制引用(指针),而未复制真正的值。
比如我们在日常开发中用得最多的就是 通过 = 来进行赋值,这就实现了一个浅拷贝。
深拷贝:
深拷贝就是对目标的完全拷贝,不像浅拷贝那样只是复制了一层引用,就连值也都复制了。
只要进行了深拷贝,它们老死不相往来,谁也不会影响谁。
目前实现深拷贝的方法不多,主要是两种:
1.利用 JSON
对象中的 parse
和 stringify
JSON.parse
是将一个 JSON
字符串转成一个 JavaScript
值或对象。
很好理解吧,就是 JavaScript
值和 JSON
字符串的相互转换。
它能实现深拷贝呢?我们来试试。
const originArray = [1,2,3,4,5];
const cloneArray = JSON.parse(JSON.stringify(originArray));
console.log(cloneArray === originArray); // false
确实是深拷贝,也很方便。但是,这个方法只能适用于一些简单的情况。 比如下面这样的一个对象就不适用:
const originObj = {
name:'axuebin',
sayHello:function(){
console.log('Hello World');
}
}
console.log(originObj); // {name: "axuebin", sayHello: ƒ}
const cloneObj = JSON.parse(JSON.stringify(originObj));
console.log(cloneObj); // {name: "axuebin"}
发现在 cloneObj
中,有属性丢失了。。。那是为什么呢?
undefined
、function
、symbol
会在转换过程中被忽略。。。
总结:如果对象中含有一个函数时(很常见),就不能用这个方法进行深拷贝。
2.利用递归来实现每一层都重新创建对象并赋值
递归的思想就很简单了,就是对每一层的数据都实现一次 创建对象->对象赋值
的操作,简单粗暴上代码:
function deepClone(source){
const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象
for(let keys in source){ // 遍历目标
if(source.hasOwnProperty(keys)){
if(source[keys] && typeof source[keys] === 'object'){ // 如果值是对象,就递归一下
targetObj[keys] = source[keys].constructor === Array ? [] : {};
targetObj[keys] = deepClone(source[keys]);
}else{ // 如果不是,就直接赋值
targetObj[keys] = source[keys];
}
}
}
return targetObj;
}
我们来试试:
const originObj = {a:'a',b:'b',c:[1,2,3],d:{dd:'dd'}};
const cloneObj = deepClone(originObj);
console.log(cloneObj === originObj); // false
结果是完全没有问题的,下面再来试试带有函数的:
const originObj = {
name:'axuebin',
sayHello:function(){
console.log('Hello World');
}
}
console.log(originObj); // {name: "axuebin", sayHello: ƒ}
const cloneObj = deepClone(originObj);
console.log(originObj===cloneObj); // false