Object.assign() 方法的使用详解

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

注意：会改变源对象

语法：

Object.assign(target, ...sources)

target 目标对象。

sources 源对象。

1. 目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。

2. Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对。

3. String类型和 Symbol 类型的属性都会被拷贝。

举例：

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target); // 源对象
//  { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
//  { a: 1, b: 4, c: 5 }

Object.assign()拷贝的是属性值

假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。

let obj1 = { a: 0 , b: { c: 0}}; 
let obj2 = Object.assign({}, obj1); 
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} 

obj1.a = 1; 
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} 
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} 

obj2.a = 2; 
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} 
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
 
obj2.b.c = 3;  // 此时两个对象下b指向的是一个位置。
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}} 
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}} 

// 可以实现深拷贝
obj1 = { a: 0 , b: { c: 0}}; 
let obj3 = JSON.parse(JSON.stringify(obj1));  // 此时相当于重建了对象
obj1.a = 4; 
obj1.b.c = 4; 
console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}

合并具有相同属性的对象，属性被后续参数中具有相同属性的其他对象覆盖

// 普通合并对象
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 }   后边的覆盖前边的

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

const obj = Object.create({foo: 1}, { //  根据Object.create（）foo是个继承属性。
    bar: {
        value: 2  // 根据这个写法，bar 是个不可枚举属性 。
    },
    baz: {
        value: 3,
        enumerable: true  // baz 是个自身可枚举属性。
    }
});

const copy = Object.assign({}, obj);
console.log(copy); // { baz: 3 }

如果上方这个代码不是很懂，参考这篇

https://blog.csdn.net/weixin_41229588/article/details/106400071

Object.assign() 方法的使用详解

猜你喜欢