对象的深拷贝与浅拷贝

最新推荐文章于 2023-05-12 22:01:58 发布

qq_40198520

最新推荐文章于 2023-05-12 22:01:58 发布

阅读量213

点赞数

本文链接：https://blog.csdn.net/qq_40198520/article/details/114533814

版权

本文详细介绍了JavaScript中的浅拷贝和深拷贝概念，包括它们的区别和实现方式。浅拷贝仅复制对象的一层属性，而深拷贝则递归复制所有层级。文中列举了简单的浅拷贝实现，如`Object.assign()`和扩展运算符，并讨论了深拷贝的递归实现以及使用`JSON.stringify()`的限制。总结指出，浅拷贝适用于简单对象，深拷贝适用于处理包含复杂引用的对象。

摘要由CSDN通过智能技术生成

1. 浅拷贝

（1）什么是浅拷贝
浅拷贝是将对象复制了一份，如果原对象中的引用类型改变，则浅拷贝出来的引用类型也改变。因为浅拷贝只是拷贝了引用类型的指针（保存在栈内存），而没有拷贝其实质值。
（2）实现

简单实现

var obj={
    name:'lxt',
    family:{
        father:'lzj',
        mother:'wyl'
    },
    colorlike:['red','black']
}
function shallowCopy(temp){
    var newobj={};
    for(let i in temp){
        if(temp.hasOwnProperty(i)){
            newobj[i]=temp[i];
        }
    }
    return newobj;
}
console.log(shallowCopy(obj));

Object.assign(target,obj)

不能拷贝不可枚举的属性，不会拷贝对象继承的属性

var obj={
    name:'lxt',
    family:{
        father:'lzj',
        mother:'wyl'
    },
    colorlike:['red','black']
}
var newobj={};
Object.assign(newobj,obj);
console.log(newobj);

扩展运算符

var obj={
    name:'lxt',
    family:{
        father:'lzj',
        mother:'wyl'
    },
    colorlike:['red','black']
}
var newobj={...obj};
console.log(newobj);

2.深拷贝

（2）什么是深拷贝？
相比于浅拷贝，深拷贝拷贝了对象中引用类型的实质性值（存在堆内存中）

递归

var obj={
    name:'lxt',
    family:{
        father:'lzj',
        mother:'wyl'
    },
    colorlike:['red','black']
}
var newobj={sex:'nv'};
function deepCopy(temp,newobj){
    var newobj=newobj||{};
    for(let i in temp){
        if(typeof temp[i]=='object'){
            //深复制
            if(temp[i].constructor===Array){
                newobj[i]=[];
            }else{
                newobj[i]={};
            }
            deepCopy(temp[i],newobj[i]);
        }else{//一般数据拷贝
            newobj[i]=temp[i];
        }
    }
    return newobj;
}
console.log(deepCopy(obj,newobj));

JSON.stringify()
JSON.stringify()是目前前端开发过程中最常用的深拷贝方式，原理是把一个对象序列化成为一个JSON字符串，将对象的内容转换成字符串的形式再保存在磁盘上，再用JSON.parse()反序列化将JSON字符串变成一个新的对象

var obj={
    name:'lxt',
    family:{
        father:'lzj',
        mother:'wyl'
    },
    colorlike:['red','black']
}
var newobj=JSON.parse(JSON.stringify(obj));
obj.name='lxy';
console.log(newobj);//不变

只有可以转成JSON格式的对象才可以这样用，例如Number, String, Boolean, Array, 扁平对象。而且它会抛弃对象的constructor。也就是深拷贝之后，不管这个对象原来的构造函数是什么，在深拷贝之后都会变成Object。
总结：浅复制只复制一层对象的属性，而深复制则递归复制了所有层级

参考：https://www.jianshu.com/p/c651aeabf582
https://blog.csdn.net/chenjuan1993/article/details/81913452