简单认识浅拷贝和深拷贝

151 阅读1分钟

浅拷贝和深拷贝

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];
console.log(obj1);
console.log(obj2);

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

深拷贝

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

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

深拷贝实现

 function deepCopy(oldObj) {
        var newObj = {};
        for(var key in oldObj) {//遍历
        if(typeof oldObj[key] === 'string' || typeof oldObj[key] === 'number' || typeof oldObj[key] === 'boolean' || oldObj[key] === null || oldObj[key] === undefined) {
                newObj[key] = oldObj[key];
            }else{ //递归
                newObj[key] = deepCopy(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