JS 浅拷贝&深拷贝

MD!为什么会出现浅拷贝和深拷贝！
源头在这儿：
1.js的基本数据类型和引用数据类型
基本类型（简单的数据段）：number、string、boolean、null、undefined、symbol
引用类型值：指那些可能由多个值构成的对象：object

LOOK!!!

在将一个值赋给变量时，解析器必须确定这个值是基本类型值还是引用类型值。
基本数据类型是按值访问的，因为可以操作保存在变量中的实际的值。基本数据类型的值不可变，比如字符串

引用类型的值是保存在内存中的对象。与其他语言不同，JavaScript 不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间。 在操作对象时，实际上是在操作对象的引用而不是实际的对象。

tmd!! 怎么理解内存空间：javascript的变量的存储方式--栈（stack）和堆（heap）
栈：自动分配内存空间，系统自动释放，里面存放的是基本类型的值和引用类型的地址

堆：动态分配的内存，大小不定，也不会自动释放。里面存放引用类型的值。

基本类型与引用类型最大的区别实际就是传值与传址的区别
值传递：基本类型采用的是值传递。

var ccx = 0;
var ccx1 = ccx;  ccx&&ccx1都是基本类型
ccx1++;//不能改变ccx的值
console.log(ccx1 + 'md!' + ccx);//1md!0
复制代码

址传递：引用类型则是地址传递，将存放在栈内存中的地址赋值给接收的变量。

var oop1 = [1,2]; 数组是引用类型
var oop2 = oop1;oop1将存在栈中的地址赋值给oop2,oop1和oop2同时指向栈内存地址；
oop2.push(3);
console.log(oop1) //[1,2,3];
console.log(oop2)//[1,2,3];

oop1和oop2的值都一样；tmd!那怎么解决他两个值要不一样呢？
就出现了浅拷贝和深拷贝；

1.浅拷贝解决方法：
数组：
var oop1 = [1,2,4];
var oop2 = [];
for (i in oop1) {
    oop2[i] = oop1[i];//进行浅拷贝,解决oop1和oop2值不一样
}
oop.push(3);
console.log(oop2)//[1,2,4,3]
console.log(oop)//[1,2,4];

对象：   新var一个对象 将现有的对象的值赋值给新对象
var oop1 = {
    "name1":1,
    "name2":2
}

var oop2 = {};
for (x in oop1) {
    oop2[x] = oop1[x]//将现有的对象的值赋值给新对象
}
oop2.name1 = 11;  //验证oop2的name1改变是否导致oop1的name1改变
console.log(oop2)//{name1: 1, name2: 2}
console.log(oop1)//{name1: 11, name2: 2}
结果：oop2的改变没有导致oop1的改变



2.深拷贝解决方法
所谓深拷贝，就是能够实现真正意义上的数组和对象的拷贝，我们通过递归调用  浅拷贝的方式实现。

look!
        var obj1 = {
            fruits: ['apple', 'banner'],
            num: 100
        }
        function deepCopy(obj) {
            var objArray = Array.isArray(obj) ? [] : {};
            if (obj && typeof obj === 'object') {
                for (key in obj) {
                    if (obj.hasOwnProperty(key)) {
                        if (obj[key] && typeof obj[key] === 'object') {
                            objArray[key] = deepCopy(obj[key]);
                        } else {
                            objArray[key] = obj[key];
                        }
                    }
                }
            }
            return objArray; 
        }

        var obj2 = deepCopy(obj1);
        obj2.fruits[0] = 'orange';
        console.log(obj2.fruits[0]); //orange
        console.log(obj1.fruits[0]); //apple


        // jQuery实现方法：
        jQuery.extend([deep], target, object1, [objectN]);

         var obj1 = {
                fruits: ['apple', 'banner'],
                num: 100
            }
            // 第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。
            var obj2  = $.extend(true,{},obj1);
            obj2.fruits[0] = 'orange';
             console.log(obj2.fruits[0]); //orange
            console.log(obj1.fruits[0]); //apple

最简单的深拷贝：b = JSON.parse( JSON.stringify(a) )
复制代码