JS=>浅拷贝和深拷贝

·  阅读 52

原始数据类型:String,Number,Boolean

引用类型:Object、Array、Function。

他们内存空间的引用,就是地址,所指向的内存中保存着变量所表示的一个值或一组值。
复制代码
  • 对于字符串类型,浅复制是对值的复制

  • 对于对象来说,浅复制是对对象地址的复制,并没有开辟新的栈,也就是复制的结果是两个对象指向同一个地址,修改其中一个对象的属性,则另一个对象的属性也会改变,而深复制则是开辟新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。

    //我改变了b的值,但是a的值不会变
    let a = 1
    let b = a
    b=2
    
    //对象:
    let obj = {
        a:1,
        b:'b',
        c:2
    }
    let objcopy = obj
    objcopy.a = 2
    
复制代码

1 object.assign() Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

    var arr = [1, [7, [9]], {a:'1'}, function(){}, null, undefined, NaN];
    var result= Object.assign(arr);
    arr[2][a]='222';
    console.log(arr); 
    //output: [1, [7, [9]], {a:'222'} , function(){}, null, undefined, NaN];
    console.log(result); 
    //output: [1, [7, [9]], {a:'222'} , function(){}, null, undefined, NaN];
复制代码

2 扩展运算符…

    var arr = [1, [7, [9]], {a:'1'}, function(){}, null, undefined, NaN];
    var result= [...arr];
    arr[2][a]='222';
    console.log(arr); 
    //output: [1, [7, [9]], {a:'222'} , function(){}, null, undefined, NaN];
    console.log(result); 
    //output: [1, [7, [9]], {a:'222'} , function(){}, null, undefined, NaN];
复制代码

以上两种方法很简单,一句话就搞定了,但是这是浅拷贝,拷贝的变量是会影响原本的变量的

3 JSON

    var arr = [1, [7, [9]], {a:'1'}, function(){}, null, undefined, NaN];
    var result = JSON.parse(JSON.stringify(arr));
    arr[2][a]='222';

    console.log(arr); 
    //output: [1, [7, [9]], {a:'222'} , function(){}, null, undefined, NaN];

    console.log(result); 
    //output: [1, [7,[9]], {a:'111'}, null, null, null, null]
复制代码

所以可以看出,使用JSON不能实现对function、undefined、NaN的拷贝。

如果拷贝的数据不存在function、undefined、NaN这些数据类型的话,使用JSON是个很简便的方法呢。

4 递归遍历

想要对所有类型都能够实现深拷贝的话,那就只能自己封装个函数来实现啦。

    var arr = [1, [7, [9]], { a: '1'}, function () {}, null, undefined, NaN];
    function deepCopy(arr) {
                if (typeof obj !== 'object') return;
                var newObj = obj instanceof Array ? [] : {};
                for (var key in obj) {
                    if (obj.hasOwnProperty(key)) {
                        if(obj[key]===null){newObj[key]=null;continue;}
                        newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
                    }
                }
                return newObj;
    }

    var result = deepCopy(arr));
    arr[2][a]='222';

    console.log(arr); 
    //output: [1, [7, [9]], {a:'222'} , function(){}, null, undefined, NaN];
    console.log(result);
    //output: [1, [7, [9]], { a: '1'}, function () {}, null, undefined, NaN]

复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改