JavaScript深拷贝和浅拷贝

• 什么是深拷贝和浅拷贝？

  ​ JavaScript中变量大体上可分为基本类型（string、Boolean、undefined、number、null）和引用类型（Array、Object、function）两类。

  ​ 在写代码的时候我们可能需要在保留原数据的基础上得到经过某些处理或修改之后的值，通常我们的做法是拷贝一个新的数据，经过处理后，得到一个处理后的值且不影响原数据。但是如果被拷贝的数据是引用类型，可能会出现改变拷贝数据后，原数据也会被改变的情况，原因为使用的拷贝方法为浅拷贝，只是拷贝了指向真正存储引用类型数据的地址，修改拷贝数据的时候，实际修改的还是原数据，所以如果想要不影响原数据的效果应该使用深拷贝。

• 深拷贝和浅拷贝的区别？

  ​ 深拷贝和浅拷贝的最大的区别就是，深拷贝除了拷贝指向存储引用类型数据的地址之外，还会申请一个新的内存地址，将对应数据存入这个新的内存地址，并修改指向引用类型数据的地址为新的内存地址。

  ​ 当我们需要使用某个对象的值，在修改时不想修改原对象；es6数组新增的map、filter等方法；暂存从服务器请求到的数据，页面设计到保存和取消请求到的数据等使用的都是深拷贝。

• 深拷贝实现方式

  • 递归

    function deepClone(obj){
        let newobj = null;
        //typeof判断是不是应用类型，入参是否为null
        if(typeof(obj) == 'Object' && obj !== null){
            //instanceof判断是否为数组，正确初始化初始值
            newobj = obj instanceof Array ? [] : {};
            for(let i in obj){
                //递归调用
                newobj[i] = deepClone(obj[i]);
            }
        }else{
            newobj = obj;
        }
        return newobj;
    }
    

  • JSON对象

    function deepClone(obj){
        if(obj == null){
            return null;
        }
        let temp = JSON.stringfy(obj);
        let cloneobj = JSON.parse(temp);
        return cloneobj;
    }
    

    缺点：无法实现对象中方法的深拷贝

  • extend

    function deepClone(obj){
        if(obj == null){
            return null;
        }
        if(obj instanceof Array){
            return $.extend(true,[],obj);
        }else{
            return $.extend(true,{},obj);
        }
    }
    

    tips：当extend第一个参数为false时，则为浅拷贝

  • assign

    function deepClone(obj){
        if(obj == null){
            return null;
        }
        return Object.assign(obj);
    }
    

    缺点：该方法仅拷贝一级属性，如存在二级属性，该方法则无法正确实现深拷贝

  • lodash

    lodash.cloneDeep();
    

• 浅拷贝实现方式

  • 直接赋值

  • 遍历拷贝

    function shallowCopy(obj){
        if(obj == null){
            return null;
        }
        let cloneobj = obj instanceof Array ? [] : {};
        for(let i in obj){
            if(obj.hasOwnProperty(i) || obj[i]){
                cloneobj[i] = obj[i]
            }
        } 
        return cloneobj;
    }
    

  • extend

    function shallowCopy(obj){
        if(obj == null){
            return null;
        }
        if(obj instanceof Array){
            return $.extend(false,[],obj);
        }else{
            return $.extend(false,{},obj);
        }
    }
    

  • assign

    使用方法同上面深拷贝中用法，如果对象包含二级属性即为浅拷贝方法