javaScript浅拷贝和深拷贝

javaScript浅拷贝和深拷贝

一、浅拷贝和深拷贝的理解

浅拷贝和深拷贝是针对引用数据类型而言的。对于基本数据类型是没有深浅拷贝的概念。

 

从存储的角度理解：

      js的基本数据类型(String,Number,Boolean,null,Undefined)是存在栈内存的，当发生赋值b=a时会直接在栈内存中开辟一个新空间。a和b是两块独立的空间。修改b不会影响a的值。

而js对于引用数据类型object。存储时会在栈内存存储引用（堆内存中存值的地址），堆内存存储真正的值，栈内存中的引用指向堆内存的值。

当发生=的赋值操作b=a时，实际上只是把a的引用复制给了b,也就是说a和b指向的堆内存中同一片地址空间。像这种只拷贝引用的就是浅拷贝

而深拷贝就是在堆内存中开辟一块新的空间，把原来对象拷贝对象的值复制到新的存储空间，引用指向新的存储空间。这样a和b就是两个完全不同

的对象。修改b的时候不会同步修改a的值。

 

 

 

二、深拷贝的实现

2.1深拷贝的简单实现

对于可以直接转成json的object类型。可以通过先将object转成json字符串（JSON.stringify）然后解析（JSON.parse）实现深拷贝。这个是我比较常用的方法

下面是一段小程序一段通过这种方式实现深拷贝的代码

    var app = getApp();
    let listStr=JSON.stringify(app.globalData.carNumList);//全局变量直接赋值给subCarNumList是浅拷贝，修改会同步修改全局变量
    let subCarNumList =JSON.parse(listStr);
    console.log(subCarNumList);
    subCarNumList.push('添加车牌号');
    console.log("全局:",app.globalData.carNumList);
    this.setData({
      subCarNumList:subCarNumList
    });

 

2.2递归实现深拷贝

function test4(){
    var arr=['a','b','c'];
    var arrNew=deepCopy(arr);
    arrNew.push("d");
    console.log("arr",arr);
    console.log("arrNew",arrNew);
}
function deepCopy(obj){
    var copyObj=Array.isArray(obj)?[]:{};
    for(var key in obj){
        if(obj[key]&&typeof obj[key]==='object'){
            copyObj=deepCopy(obj[key]);
        }
        else{
            copyObj[key]=obj[key];
        }
    }
    return copyObj;
}

打印结果：

 

 

 2.3直接复制浅拷贝展示

代码：

function test4(){
    var arr=['a','b','c'];
    //var arrNew=deepCopy(arr);
    var arrNew=arr;
    arrNew.push("d");
    console.log("arr",arr);
    console.log("arrNew",arrNew);
}

 

打印结果：