美文网首页
js深拷贝

js深拷贝

作者: bounsail | 来源:发表于2021-08-11 15:31 被阅读0次

    基本数据类型的特点:直接存储在栈(stack)中的数据
    引用数据类型的特点:存储的是该对象在栈中引用,真实的数据存放在堆内存里
    引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体。

    1.JSON转换

    JSON.parse(JSON.stringify(copyObj))
    

    缺陷:它会抛弃对象的constructor,深拷贝之后,不管这个对象原来的构造函数是什么,在深拷贝之后都会变成Object;这种方法能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象,也就是说,只有可以转成JSON格式的对象才可以这样用,像function没办法转成JSON;

    2.递归函数

    function deepCopy( source ) {
        if (!isObject(source)) return source; //如果不是对象的话直接返回
        let target = Array.isArray( source ) ? [] : {} //数组兼容
        for ( var k in source ) {
            if (source.hasOwnProperty(k)) {
                if ( typeof source[ k ] === 'object' ) {
                    target[ k ] = deepCopy( source[ k ] )
                } else {
                    target[ k ] = source[ k ]
                }
            }
        }
        return target
    }
    function isObject(obj) {
        return typeof obj === 'object' && obj !== null
    }
    

    3.Object.assign()(实现一层深拷贝)

     var obj1 = {
        a: 1,
        b: 2,
        c: 3
    }
    var obj2 = Object.assign({}, obj1);
    obj2.b = 5;
    console.log(obj1.b); // 2
    console.log(obj2.b); // 5
    
    var obj1 = {
        a: 1,
        b: 2,
        c: ['a','b','c']
    }
    var obj2 = Object.assign({}, obj1);
    obj2.c[1] = 5;
    console.log(obj1.c); // ["a", 5, "c"]
    console.log(obj2.c); // ["a", 5, "c"]
    

    4、slice实现(实现一层深拷贝)

    // 对只有一级属性值的数组对象使用slice
    var a = [1,2,3,4];
    var b = a.slice();
    b[0] = 2;
    alert(a); // 1,2,3,4
    alert(b); // 2,2,3,4
    
    // 对有多层属性的数组对象使用slice
    var a = [1,[1,2],3,4];
    var b = a.slice();
    b[1][0] = 2;
    alert(a); // 1,2,2,3,4
    alert(b); // 1,2,2,3,4
    

    5、concat()方法

     var a=[1,2,[3,4]]
     var c=[];
     var b=c.concat(a);
     b[0]=5;
     b[2][0]=6;
     console.log(b[0]);//5
     console.log(a[0])//1
     console.log(b[2][0]);//6
     console.log(a[2][0])//6
    

    6、es6的扩展运算符"..."

     var a=[1,2,[3,4]]
     var b=[...a];
     b[0]=5;
     b[2][0]=6
     console.log(b[0]);//5
     console.log(a[0])//1
     console.log(b[2][0]);//6
     console.log(a[2][0])//6
    

    参考:https://www.cnblogs.com/eternityz/p/13645606.html
    https://segmentfault.com/a/1190000017489663

    相关文章

      网友评论

          本文标题:js深拷贝

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