js 深拷贝,浅拷贝

2020-04-30  本文已影响0人  aaagu1234

深拷贝
第一种方式:
需要注意的是:这种拷贝方法不可以拷贝一些特殊的属性(例如正则表达式,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

上一篇 下一篇

猜你喜欢

热点阅读