js中浅拷贝与深拷贝的区别及实现方法

浅拷贝：

浅拷贝就是只拷贝一层，更深层次对象级别只拷贝引用（地址）

当拷贝的新对象发生改变时，原对象也会发生相同的改变，也就是说，浅拷贝会影响原来的元素

实现方法：

1、直接赋值法：

var arr = [1,2,3]
        var newarr = arr;
        newarr[1] = 5;
        console.log(arr,newarr);

输出：[1, 5, 3]，[1, 5, 3]

var obj = {
            name:'小明',
            age:18,
            car:{
                a:'三轮车'
            }
        }
        var newobj = obj;
        newobj.car = "电动车"
        console.log(obj,newobj);

输出：{name: '小明', age: 18, car: '电动车'}，{name: '小明', age: 18, car: '电动车'}

2、Object.assign(参数1，参数2)

此方法类似于将对象合并，如果参数1与参数2key值相同，参数2的值会覆盖参数1

let obj ={
            name:'小明',
            sex:'男',
            car:{
                a:"电动车"
            }
        }
        let obj1 ={
            name:'小红',
            sex:'女',
            age:20
        }
        let newobj = Object.assign(obj,obj1);
        newobj.a = "宝马"
        console.log(newobj);
        console.log(obj);

输出：

{age: 20 ，car: {a: '宝马'} ，name: "小红" ，sex: "女"}

{age: 20 ，car: {a: '宝马'} ，name: "小红" ，sex: "女"}

深拷贝：

深拷贝拷贝多层，每一级的数据都会拷贝 深拷贝只拷贝内容，两个对象拥有不同的地址

当拷贝出来的对象发生改变时，原对象内容不会改变，两者互不影响

实现方法：

1、使用JSON

 let obj ={
            name:'小明',
            sex:'男',
            car:{
                a:"电动车"
            }
        }

        let obj1 = JSON.stringify(obj);
        let newobj = JSON.parse(obj1);
        newobj.name="小李";
        newobj.sex="女";
        console.log(obj);
        console.log(newobj);

输出：

{name: '小明', sex: '男', car: {a: '电动车'}}

{name: '小李', sex: '女', car: {a: '电动车'}}

2、根据属性进行深拷贝：

var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            },
            color: ['pink', 'red']
        }
        var o = {};
        //封装函数
        function deepCopy(newobj,oldobj){
            for(var k in oldobj){
                //判断我们的属性值属于那种数据类型
                //1、获取属性值  oldobj[k]
                var item = oldobj[k];
                // console.log(item);
                if(item instanceof Array){
                    //判断数据类型是数组
                    newobj[k] = [];
                    deepCopy(newobj[k],item)
                }else if(item instanceof Object){
                    //判断数据类型是对象
                    newobj[k] = {};
                    deepCopy(newobj[k],item)
                }else{
                    //简单数据类型
                    newobj[k] = item;
                }
            }
        }
        deepCopy(o,obj);
console.log(o);

输出：{id: 1, name: 'andy', msg: { age: 18 }, color: ['pink', 'red']}

3、使用解构赋值和剩余值进行深拷贝

let obj ={
            name:'小明',
            age:18,
            color:['black','yellow'],
            msg:{
                a:'我想你'
            }
        }
        let {...o} = obj
        o.age=20
        console.log(o);
        console.log(obj);

输出：{name: '小明', age: 20, color: ['black','yellow'], msg: {a: '我想你'}}

{name: '小明', age: 18, color: ['black','yellow'], msg: {a: '我想你'}}