• 引用数据类型的深拷贝


    浅拷贝:只遍历一层,如果存在数组成员是对象,[{name:'jack'}],不会对对象里的值进行遍历拷贝。

    其实根据浅拷贝的方法不同,也有不同的效果。

    1. 其中最弱的浅拷贝为直接赋值

    let arr2 = arr1;

    是直接将整个arr1数组的地址赋给arr2,故arr2的任意值(为什么说任意值呢?因为后面会介绍到,有些浅拷贝,可以使部分值看上去有深拷贝的效果)改变,都会影响到arr1。

    2. 接下来介绍的四种浅拷贝方法就厉害一些了,它们在有些情况(原数组里的数据不包含引用类型)下也能达到深拷贝效果(没错只是披着狼皮的小绵羊啦,本质还是浅拷贝)。

    一个数组变化,另一个数组不受影响。

    原数组里的数据不包含引用类型

    let arr1 = [1 , 2 , 3];  //原数组

    1.使用拓展运算符

    let arr2 = [...arr1];
    //等价于
    let arr2=[1, 2, 3];
    //这也就是它不同于arr2=arr1的地方,

    2.使用assign()

    let arr2 = Object.assign([],arr1);

    3.使用concat()

    let arr2 = [].concat(arr1);

    因为 concat() 返回的是一个副本,所以这个时候改变 arr1 就不会导致 arr2 改变了。

    4.使用slice()

    let arr2 = arr1.slice(0);

    深拷贝:就是不管里面多少层,都遍历,克隆一个与旧不相关的,修改新的不影响旧的。

    原数组里的数据包含引用类型

    let arr1 = [1 , 2 , 3 , {"name" : "张小二"} , {"sex" : "male"}];  //原数组

    使用上述方法均不能实现全部深拷贝,非引用类型的值不会受影响,嵌套的一层引用类型的值会受影响。

    解决方法:

    方法一:递归

    let cloneObj = function(obj){
        let str, newobj = obj.constructor === Array ? [] : {};
        if(typeof obj !== 'object'){
            return;
        } else if(window.JSON){
            str = JSON.stringify(obj), //系列化对象
            newobj = JSON.parse(str); //还原
        } else {
            for(var i in obj){
                newobj[i] = typeof obj[i] === 'object' ? 
                cloneObj(obj[i]) : obj[i]; 
            }
        }
        return newobj;
    };
    
    let arr2 = cloneObj(arr1);

    方法二:通过JSON解析解决

    let arr2 = JSON.parse(JSON.stringify(arr1));

    注意:这种方法拷贝后的数组会丢失原数组中定义的方法和数组原型中定义的方法。

  • 相关阅读:
    语义化单单的限定在html么?
    转WEB前端开发经验总结(5)
    JavaScript中的null和undefined
    文字上右下环绕广告的写法
    转自森林:最新CSS兼容方案
    转自森林:注释书写规范 Ghost
    【探讨】栈和队列
    转自森林:你是一个职业的页面重构工作者吗?
    Web标准:IE8新特性及IE8安装使用
    转载:09年腾讯校园招聘页面重构的2道面试题
  • 原文地址:https://www.cnblogs.com/embrace-ly/p/10693035.html
Copyright © 2020-2023  润新知