美文网首页
js 深拷贝,浅拷贝

js 深拷贝,浅拷贝

作者: aaagu1234 | 来源:发表于2020-04-30 18:21 被阅读0次

    深拷贝
    第一种方式:
    需要注意的是:这种拷贝方法不可以拷贝一些特殊的属性(例如正则表达式,undefine,function)

    function deepCopy(o) {
        return JSON.parse(JSON.stringify(o))
    }
    

    第二种方式:
    用递归去复制所有层级属性

     function deepCopyTwo(obj){
        let objClone = Array.isArray(obj) ? [] :{};
        if(obj && typeof obj == 'object') {
           for(const key in obj){
             if(obj[key] && typeof obj[key] === 'object'){
                objClone[key] = deepCopyTwo(obj[key]);
              } else {
                 objClone[key]  = obj[key];
              }
           }
        }
        return objClone;
     }
    

    浅拷贝
    Object.assign 方法只复制源对象中可枚举的属性和对象自身的属性。

    const target = { a: 1, b: 2 };
    const source = { b: 4, c: 5 };
    const returnedTarget = Object.assign(target, source);
    // 输出 { a: 1, b: 4, c: 5 }    源覆盖target的属性值。
    

    合并对象:

    const o1 = { a: 1 };
    const o2 = { b: 2 };
    const o3 = { c: 3 };
    
    const obj = Object.assign(o1, o2, o3);
    console.log(obj); // { a: 1, b: 2, c: 3 }
    console.log(o1);  // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。
    

    合并具有相同属性的对象

    const o1 = { a: 1, b: 1, c: 1 };
    const o2 = { b: 2, c: 2 };
    const o3 = { c: 3 };
    
    const obj = Object.assign({}, o1, o2, o3);
    console.log(obj); // { a: 1, b: 2, c: 3 }
    

    拷贝 symbol 类型的属性

    const o1 = { a: 1 };
    const o2 = { [Symbol('foo')]: 2 };
    
    const obj = Object.assign({}, o1, o2);
    console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox)
    Object.getOwnPropertySymbols(obj); // [Symbol(foo)]
    

    继承属性和不可枚举属性是不能拷贝的

    const obj = Object.create({foo: 1}, { // foo 是个继承属性。
        bar: {
            value: 2  // bar 是个不可枚举属性。
        },
        baz: {
            value: 3,
            enumerable: true  // baz 是个自身可枚举属性。
        }
    });
    
    const copy = Object.assign({}, obj);
    console.log(copy); // { baz: 3 }
    

    原始类型会被包装为对象

    const v1 = "abc";
    const v2 = true;
    const v3 = 10;
    const v4 = Symbol("foo")
    
    const obj = Object.assign({}, v1, null, v2, undefined, v3, v4); 
    // 原始类型会被包装,null 和 undefined 会被忽略。
    // 注意,只有字符串的包装对象才可能有自身可枚举属性。
    console.log(obj); // { "0": "a", "1": "b", "2": "c" }
    

    参考: https://www.jianshu.com/p/fa97a0f08c37
    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

    相关文章

      网友评论

          本文标题:js 深拷贝,浅拷贝

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