简单认识浅拷贝和深拷贝

var obj = { 
name: 'jane',
age: 27
}
var obj2  = obj;
obj2.name = 'haha';
obj.name;//'haha'

如果对其中一个进行修改,就会影响到另外一个。通过拷贝切断新旧两者的联系。

浅拷贝

就是简单的引用复制

对象复制只是复制对象的引用,而不复制对象本身,共享内存。

浅拷贝实现

若只遍历一层叫浅拷贝

function shallowCopy(oldObj){
var newObj = {};
for(var i in oldObj){
if(oldObj.hasOwnProperty(i)){
newObj[i] = oldObj[i];
}
}
return newObj;
}
var obj1 = { 
name: 'jane',
age: [27,33],
c: [[1,2,3],[4,5,6]]//注意这是两层
}
var obj2 = shallowCopy(obj1);
obj2.name = 'haha';
obj2.age = [24,77];
obj2.c[0] = [7,8,9];

输出:obj1.c[0]和obj2.c[0]都发生了变化,说明它们共享内存
浅拷贝只拷贝了第一层,第二层未拷贝,所以obj2的指向obj1的第二层数据,obj2中第二层数据改变obj1的也会改变。


拷贝.jpg

深拷贝

复制的是对象本身,不共享内存,修改新对象旧对象不会有变化。两者互不影响。

var obj = { 
name: 'jane',
age: 27
}
var obj2 = {name:obj.name,age:obj.name}
obj2 .name = 'haha';
obj2 .name;//jane

深拷贝实现

 function deepCopy(oldObj) {
        var newObj = {};
        for(var key in oldObj) {//遍历
            if(typeof oldObj[key] === 'object') {
                newObj[key] = deepCopy(oldObj[key]);
            }else{ //递归
                newObj[key] = oldObj[key];
            }
        }
        return newObj;
    }
var oldObj = {
        name: 'jane',
        age: 18,
        friend: {
            name: 'haha',
            age: 27,
        }
    }
 var newObj = deepCopy(oldObj);
newObj.age = 20;
newObj.friend.name = 'lala';
console.log(newObj);
console.log(oldObj);

改变newObj的name值和friend属性中的name值,oldObj的name值。


深拷贝.jpg

用JSON.stringify把对象转成字符串,再用JSON.parse把字符串转成新的对象。

var obj = { 
name: 'jane',
handle: function(){
}
}
var obj2 = JSON.parse(JSON.stringify(obj));
obj2;

这种拷贝方式无法拷贝方法


深拷贝2.jpg
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容