JS中的浅拷贝和深拷贝

前言

在js中涉及到深浅拷贝的时候，就会牵扯到堆和栈。

栈和堆

在编译期间，除了声明变量和函数，查找函数中的标识符这两项工作之外，还有内存分配，不同类型的数据会分配到不同的内存空间。

栈内存
举个栗子，就比如有一个书架，每本书对应一个书格，只有先拿出来才能再放进去，是一个先出后进的顺序。这个书架就可以比作栈内存。

• 栈内存中主要保存基本数据类型值和引用数据类型值的地址。
• 栈内存是存在大小限制和储存上限的，就是一简单存储。
• 栈内存是自动分配内存大小的，读取数据快，写入速度快，但是储存内容少，变量一旦不使用系统会自动清除掉释放内存。

堆内存
堆内存就好比一个百宝箱，这个时候我们不需要先出后进的操作，只需要知道我们想要什么东西，根据这个东西的名称直接去拿就行了。

• 主要保存一组无序且唯一的引用数据类型值，可以使用栈内存中的键名来获取。
• 堆内存的存储数据多，读写速度慢，一般对象会储存在堆中，对内存的大小和限制都是未知的。
• 堆内存是动态分配内存的，也不一定会自动释放内存。
  

赋值和赋址

先来简单说一下
赋值指的就是把堆内存中的对象数据获取到存放到栈内存中，就相当于在栈内存中新创建了一个值然后把该值赋给新创建的变量；

赋址指的就是把堆内存的数据值存放到栈内存中，并且地址也是指向堆内存的，就相当于在栈内存中创建一个指针，这个指针指向堆内存中的值。

看段代码：

function a(){
    var a=[1,2,3,4,5];	//在堆内存中存储一个arry
    var s=a;			//赋址操作，在栈中创建一个叫s的指针指向堆内存中的a值
    var d=a[2];			//赋值操作，在栈中创建一个新值，并把堆中a数组的某个值赋值给栈中的新值
    console.log(s);		//[1,2,3,4,5]
    console.log(d);		//3

    s[0]=6;				//改变的是堆中a的值，因为s是指向a的
    d=7;				//无法改变a中对应的值，因为d是在栈中新建的一个变量，这是它已经和堆没有关联了
    console.log(s);		//[6,2,3,4,5]
    console.log(d);		//7
    console.log(a);		//[6,2,3,4,5]
}

从上面的代码我们可以知道，改变了s的数据，同时会改变堆中a的对应值；改变d的值，堆中a的对应值是不会做出改变的。

这就是赋值和赋址的区别。

浅拷贝和深拷贝

所谓拷贝，就是赋值的意思；把一个值赋值给另一个值。

基本数据类型赋值的时候，赋值的是数据，所以并不存在浅拷贝和深拷贝的问题。

浅拷贝

创建一个新的对象值，给这个对象赋原始对象的属性值，指向不同的地址。也就是说，浅拷贝是拷贝的原始对象的属性值，如果拷贝的这个值是引用类型，拷贝的就是原始对象的地址，拷贝的不深所以叫浅拷贝。

• 拷贝原对象中的基本数据类型值，是不会改变原对象的。
• 如果拷贝的是原对象中子对象的引用数据类型值，是会改变原对象的值；因为在堆中，对象里面的子对象会和主对象共享地址，这个时候原对象也会跟着改变。

栗子：

1，使用for…in…实现浅拷贝

// 使用for...in..实现浅拷贝
function s(){
    // 原对象，【堆中】
    var _data={
        id:1,
        num:10,
        list:{
            id:1,
            num:1
        }
    };

    var _newData={};    //新创建一个对象，【栈中】

    // 使用for...in...进行拷贝操作
    for(var i in _data){
        _newData[i]=_data[i];
    }

    // 对浅拷贝的新对象做操作
    _newData.id=2;
    _newData.list.id=2;

    console.log('_data值：',_data)
    console.log('_newData值：',_newData)

    // 输出
    // _data值：,{"id":1,"num":10,"list":{"id":2,"num":1}}
    // _newData值：,{"id":2,"num":10,"list":{"id":2,"num":1}}
}

从面的栗子可以很清楚的看到，浅拷贝确实是满足我们上面说的两个小点。

2，使用Object.assign()实现浅拷贝

// 使用Object.assign()实现浅拷贝
function d(){
    // 原对象，【堆中】
    var _data={
        id:1,
        num:10,
        list:{
            id:1,
            num:1
        }
    };

    var _newData={};    //新创建一个对象，【栈中】

    // 使用Object.assign(新对象，需要拷贝的对象)进行拷贝操作
    Object.assign(_newData,_data)

    // 对浅拷贝的新对象做操作
    _newData.id=2;
    _newData.list.id=2;

    console.log('_data值：',_data)
    console.log('_newData值：',_newData)

    // 输出
    // _data值：,{"id":1,"num":10,"list":{"id":2,"num":1}}
    // _newData值：,{"id":2,"num":10,"list":{"id":2,"num":1}}
}

这个方法相对于for…in…简单很多。

深拷贝

深拷贝不仅仅只是把原对象赋值给新对象，并且还会把原对象中子对象都原模原样赋值给新对象，这样修改新对象后就不会改变原对象的值。

栗子：

1，使用JSON.stringify()实现深拷贝

需要注意的是这种方法无法拷贝，正则表达式，undefined，function

// 使用JSON.stringify()进行深拷贝
function f(){
    // 原对象，【堆中】
    var _data={
        id:1,
        num:10,
        list:{
            id:1,
            num:1
        }
    };

    var _newDataStr=JSON.stringify(_data),
        _newData=JSON.parse(_newDataStr);

     // 对浅拷贝的新对象做操作
    _newData.id=2;
    _newData.list.id=2;

    console.log('_data值：',_data)
    console.log('_newData值：',_newData)  

    // 输出
    // _data值：,{"id":1,"num":10,"list":{"id":1,"num":1}}
    // _newData值：,{"id":2,"num":10,"list":{"id":2,"num":1}} 
}

2，使用递归的方式实现深拷贝

// 使用递归的方式进行深拷贝
function g(data) {
    // 首先判断data是基本数据类型还是引用数据类型,如果是基本直接返回
    if (typeof data != "object") {
        return data
    }

    // 根据是数组还是对象进行新建变量
    var _newData = Array.isArray(data) ? [] : {};

    // 判断是数组还是对象
    if (data instanceof Array) {
        console.log("是数组")
        // 数组
        for (var i = 0; i < data.length; i++) {
            _newData[i] = data[i]
            if (typeof _newData[i] == 'object') {
                g(_newData[i]);
            }
        }
    } else {
        console.log("是对象")
        // 对象
        for (var i in data) {
            // 判断对象里面是否有数组或者对象
            if (typeof data[i] == 'object') {
                _newData[i] = g(data[i])
            } else {
                _newData[i] = data[i]
            }
        }
    }
    return _newData
}
console.log(g({ a: 1, s: 2, d: [1, 2, 3] }));		//{"a":1,"s":2,"d":[1,2,3]}