js的深拷贝和浅拷贝

一、浅拷贝

        只复制引用，而未复制真正的值，一个改变则互相影响，因为共同的引用。

       方式一：Object.assign()

<script>
    var obj1 = {a:1,b:2};
    var obj2 = Object.assign(obj1);
    obj1.a = '100';
    obj2.b = '可以了';
    console.log(obj1,obj2);//{a:'100',b:'可以了'} {a:'100',b:'可以了'}
</script>

        方式二：数组

<script>
    var arr1 = ['a','b','c','d','e'];
    var arr2 = arr1;
    arr1[0] = '你好吗';
    arr2[1] = '还行';
    console.log(arr1,arr2);//['你好吗','还行','c','d','e'] ['你好吗','还行','c','d','e'];
</script>

二、深拷贝

        是复制真正的值，一个改变，互相不影响。

        方式一：JSON.parse(JSON.stringify())

        原理：用JSON.stringify将对象转成JSON字符串，再用JSON.parse()把字符串解析成对象，一去一来，新的对象产生了，而且对象会开辟新的栈。

        缺点：当对象里面有函数的话，深拷贝后，函数会消失

<script>
    var obj3 = {a:1,b:2};
    var obj4 =JSON.parse(JSON.stringify(JSON.stringify(obj3))) ;
    obj3.a = '100';
    obj4.b = 'nice';
    console.log(obj3,obj4);//{a:'100',b:'2'} {a:'1',b:'nice'}
</script>

        方式二：递归函数

        原理：遍历对象、数组直到里边都是基本数据类型，然后再去复制，就是深度拷贝。

<script>
    var obj5 = {
        a:1,
        b:2,
        arr:['a','b','c''d']
    };
    function copyObj(obj){
        if(Array.isArray(obj)){
            var newObj = [];
        }else{
            var newObj = {};
        }
        for(var key in obj){
            if(typeof obj[key] == 'object'){
                newObj[key] = copyObj(obj[key]);
            }else{
                newObj[key] = obj[key];
            }
        }
        return newObj;
    }
    console.log(copyObj(obj5));
</script>

        方式三：借助第三方库lodash

// 安装lodash
npm i --save lodash
// 引入lodash 
var _ = require('lodash');
var obj1 ={
    name:'LiHua',
    age:20,
}
let obj2 =_.cloneDeep(obj1)
obj2.name = 'ZhaoSi'
console.log('obj1',obj1.name)
console.log('obj2',obj2.name)