美文网首页Web前端之路
javaScript中深浅拷贝学习笔记

javaScript中深浅拷贝学习笔记

作者: 龙卷风风风风 | 来源:发表于2017-02-20 00:26 被阅读42次

深浅拷贝的概念:

由于引用类型在栈中只是存储了数据存储的地址,当直接把一个对象赋值给另一个对象时,其实只是把地址复制而已,当其中一个的值改变,另一个也对应改变。这样不是我们想要的结果,故而有了深浅拷贝;
浅复制:只复制一层(即当对象中属性值也为对象时不会进行深层次的复制,只复制一层)。
深复制:会递归复制(即当对象中属性值也为对象时会进行深层次复制,无论多少层)。

js的数据类型:

基本数据类型类型(即直接存储在栈内存中):Undefined、Null、Boolean、Number、String
引用类型(即存储在堆内存中):Object

浅拷贝:

数组的浅拷贝(在js中数组也是一种对象):

1、通过js自带的方法来实现

    var x = [0,1,2,[3,4,[5,6]]];
    var shadow1 = x.slice(0);
    var shadow2 = x.concat();

    console.log(shadow1 === x);  //false  表示内存中存储位置不同(以下相同)
    console.log(shadow2 === x);  //false
    console.log(shadow1[3][2] === x[3][2]);  //true  表示内存中存储位置相同(以下相同)
    console.log(shadow2[3][2] === x[3][2]);  //true

从上面代码可以看出它只实现了一层拷贝,故为浅拷贝
2、自己通过循环来实现浅拷贝

    function shadowCopy(arr) {
        if(typeof arr !== 'object'){
            console.log('your arg is not object');
            return;
        }else{
            var arr0 = [];
                for (var i = 0; i < obj.length; i++) {
                    arr0[i] = arr[i];
                }
        }
        return arr0;
    }
    var shadow = shadowCopy(x);  
    console.log(shadow === x);  //false
    console.log(shadow[3][2] === x[3][2]);  //true

对象的浅拷贝

    var x = {
        a: 1,
        b: 2,
        c: {
            d: 3,
            e: {
                f: 4
            }
        }
    }
    function shadowCopy(obj) {
        if(typeof obj !== 'object'){
            console.log('your arg is not object');
            return;
        }else{
             var obj0 = {};
             for (var i in obj) {
             obj0[i] = obj[i];
             }
        }
        return obj0;
    }
    var shadow = shadowCopy(x);  
    console.log(shadow === x);  //false
    console.log(shadow.c === x.c);  //true

深拷贝

1、通过JSON对象来实现(数组和标准对象都适用)

    var x = [0,1,2,[3,4,[5,6]]];
    var y = {
        a: 1,
        b: 2,
        c: {
            d: 3,
            e: {
                f: 4
            }
        }
    }
    var shadow1 = deepCopyJSON(x);
    var shadow2 = deepCopyJSON(y);

    console.log(shadow1 === x);  //false
    console.log(shadow1[3][2] === x[3][2]);  /false
    console.log(shadow2 === y);  //false
    console.log(shadow2.c.e === y.c.e);  //false

    function deepCopyJSON(obj) {
        if(typeof obj !== 'object'){
            console.log('your arg is not object');
        }else{
            return JSON.parse(JSON.stringify(obj));
        }
    }

2、通过第三方库来实现(详情参阅http://jerryzou.com/posts/dive-into-deep-clone-in-javascript/
3、自己实现(此方法数组和标准对象都适用)

    var x = [0,1,2,[3,4,[5,6]]];
    var y = {
        a: 1,
        b: 2,
        c: {
            d: 3,
            e: {
                f: 4
            }
        }
    }
    var shadow1 = deepCopyMyself(x);
    var shadow2 = deepCopyMyself(y);

    console.log(shadow1 === x);  //false
    console.log(shadow1[3][2] === x[3][2]);  //false
    console.log(shadow2 === y);  //false
    console.log(shadow2.c.e === y.c.e);  //false

    function deepCopyMyself(obj) {
        if(typeof obj !== 'object'){
            console.log('your arg is not object');
            return;
        }else{
            var obj0 = obj.constructor === Array ? [] : {};
            if(obj0.constructor === Object){
                for (var i in obj) {
                    obj0[i] = typeof obj[i] === 'object' ? deepCopyMyself(obj[i]) : obj[i];
                }
            }else{
                for (var i = 0; i < obj.length; i++) {
                    obj0[i] = typeof obj[i] === 'object' ? deepCopyMyself(obj[i]) : obj[i];
                }
            }
        }
        return obj0;
    }

相关文章

  • javaScript中深浅拷贝学习笔记

    深浅拷贝的概念: 由于引用类型在栈中只是存储了数据存储的地址,当直接把一个对象赋值给另一个对象时,其实只是把地址复...

  • JavaScript中的深浅拷贝

    深浅拷贝 从上面的例子可以发现,如果给一个变量赋值一个对象,那么两者的值会是同一个引用,其中一方改变,另一方也会相...

  • JavaScript 中的深浅拷贝

    从上面的例子可以发现,如果给一个变量赋值一个对象,那么两者的值会是同一个引用,其中一方改变,另一方也会相应改变。 ...

  • javascript深浅拷贝

    Javascript有六种基本数据类型(也就是简单数据类型),它们分别是:Undefined,Null,Boole...

  • javascript深浅拷贝

    underscore 的源码中,有很多地方用到了 Array.prototype.slice() 方法,但是并没有...

  • JavaScript深浅拷贝

    简单讲呢,深浅拷贝,都是进行复制,那么区别主要在于复制出来的新对象和原来的对象是否会互相影响,改一个,另一个也会变...

  • Javascript深浅拷贝

    浅拷贝 1.基本数据类型 是存在栈中的,所以=赋值,都会创建一个新的空间,例如 变量b有自己独立的空间 2.对象数...

  • JavaScript深浅拷贝

    原文链接 http://blog.poetries.top/2018/12/21/js-deep-copy/ 关注...

  • Javascript深浅拷贝

    拷贝 复制与拷贝 复制:将一个对象a赋值给另一个变量b,这个只是存储了对象a的引用地址,是属于同一个对象 克隆:创...

  • JavaScript深浅拷贝

    一般来说,我们拷贝数据的时候:如果是基本数据类型,则会生成新的数据,修改拷贝后的数据不会影响原有数据。如果是对象/...

网友评论

    本文标题:javaScript中深浅拷贝学习笔记

    本文链接:https://www.haomeiwen.com/subject/nohswttx.html