浅谈深克隆和浅克隆

分享一些JavaScript中的深浅克隆的心得，有不对的地方，欢迎大家一起讨论

JavaScript中的值分为两种，一种基本类型值，一种引用类型值，引用类型值才会涉及到深浅克隆（数据类型下一次写写）

浅克隆（shadow clone）

浅克隆顾名思义就是比较表面的一种克隆方式，个人感觉就是映射关系。

举几个浅克隆的例子

// 浅克隆for循环
var a = [3, 4, 5, 6]
var b = []
for(var i = 0; i < a.length; i++){
    b.push(a[i]);
}
console.log(b);
//b = [3, 4, 5, 6]

// 浅克隆map语法
var a = [22, 33, 44, 55];
var b = a.map(item => item);

// 浅克隆...语法
var a = [22, 33, 44, 55];
var b = [...a];

这三个都是浅克隆比较常见的方法这些数据结构比较简单，所以用浅克隆就可完全克隆一份

但是数据结构变得一复杂，浅克隆就不够用了，例如

var a = [ 1, 2, 3, { a : 1, b : 3, cc : [9,8,7] } ];

现在就需要使用深克隆

深克隆（deep clone）

 深克隆需要的就是回调函数这种思想

var deepClone = function(arr){
    var result;
    if (Array.isArray(arr)) {
        result = [];
        for (let i = 0; i < arr.length; i++) {
            result.push(deepClone(arr[i]));

        }

    }else if ( typeof arr == 'object'){
        result = {};
        for (const key in arr) {
            result[key] = deepClone(arr[key])
        }
    }else{
        result = arr
    }
    return result;
}

var a = [1,2,3,{a:1,b:3,cc:[9,8,7]}];
var b = deepClone(a)
var c = JSON.parse(JSON.stringify(a))
a[3].cc[0] = 100;
console.log(a);
console.log(b);
console.log(c);
//a [ 1, 2, 3, { a: 1, b: 3, cc: [ 100, 8, 7 ] } ]
//b [ 1, 2, 3, { a: 1, b: 3, cc: [ 9, 8, 7 ] } ]
//c [ 1, 2, 3, { a: 1, b: 3, cc: [ 9, 8, 7 ] } ]

其中的变量c是用的JSON.parse(),还有JSON.stringify()联合使用的也能取得相同的效果