首页 > 其他分享> 文章详细

js中的浅拷贝和深拷贝

2021-10-22 16:31:24 阅读：150 来源： 互联网

标签：obj key objClone js arr2 arr1 拷贝

在讨论js的浅拷贝之前，我们先来看一下js的数据类型。

一、js的数据类型

基本数据类型：存放在栈里面，里面直接开辟一个空间，存放的是值。栈是有结构的，每个区块都是按照后进先出的方式次序存放，基本类型的数据相对是比较稳定的，占的内存也比较小，所有寻找速度比较快，如果基本类型复制的话，栈中重新开辟个新的内存空间来储存新复制的新值，所以两者是独立的，没有任何关联！
引用类型：存放在堆里面，首先在栈里面存放地址（十六进制表示），地址在指向堆里面的实例，真正的对象实例存放在堆空间中。堆是没有结构的，数据可以任意存放，我们常常实际操作的是引用而不是操作实际的对象！你可以这么理解，栈中保存着一个地址，这个地址指向堆中的对象，如果复制的是引用类型，那么复制的是栈内存中的引用地址，两个引用地址指向的还是同一个对象！

二、什么是深拷贝和浅拷贝？

　　深拷贝和浅拷贝只针对引用数据类型，根本区别在于是否是真正获取了一个对象的复制实体，而不是引用。

简单来说，假设我们有两个对象A和B,把A复制给B，当我们修改B里面的值时，如果A发生了改变，那么就是浅拷贝，A没有改变则是深拷贝。

三、实现浅拷贝

　　直接赋值

var arr1 = [1,2,3];
var arr2 ;
arr2 = arr1;
arr2[0] = 9;
console.log(arr1);//[9,2,3]
console.log(arr2);//[9,2,3]

　　可以看出我们只是对arr2的值进行了改变，但是输出发现arr1的值也发生了改变。实际上当我们把arr1复制给arr2时，只是把指向[1,2,3]这个数值的地址赋给了arr2，就相当于arr1和arr2都指向了这个数值，当我们通过arr2改变这个数值时，再通过arr1去拿也就是改变后的值。

四、实现深拷贝

　　1、采用递归去拷贝所有层级属性

function deepClone(obj){
    //Array.isArray() 用于确定传递的值是否是一个 Array。
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            //hasOwnProperty()方法来忽略继承属性。
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象，如果是，递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是，简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}
let a=[1,2,3,4],
        b=deepClone(a);
a[0]=2;
console.log(a,b);

　　2、JSON对象的parse和stringify

function deepClone(obj){
    let _obj = JSON.stringify(obj),
        objClone = JSON.parse(_obj);
    return objClone
}    
let a=[0,1,[2,3],4],
    b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a,b);

标签：obj,key,objClone,js,arr2,arr1,拷贝
来源： https://www.cnblogs.com/WuAnqi/p/15439332.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js中的浅拷贝和深拷贝