Vue merge object Object.assign()

1. Definition

The Object.assign() method is used to copy the values ​​of all enumerable properties from one or more source objects to a target object. It will return the target object. [Simply speaking, it is to merge objects (and shallow copy)]

Two, usage

Object.assign(target, ...sources)

target: target object

source: source object (one or more)

3. Use scenarios

// 一般的使用
const target = { a: 1, b: 2 };
const source = { c: 3 };
Object.assign(target, source);
console.log("console log1:", target);

// 如果目标和源有相同属性，目标会被源覆盖
const target = { a: 1, b: 2};
const source = { b: 3, d: 4}; // 覆盖target的b
Object.assign(target, source);
console.log("console log2:", target);

// 如果多个源有相同属性，目标会被最后一个源覆盖
const target = { a: 1, b: 2};
const source1 = { b: 3, d: 4}; // 覆盖target的b
const source2 = { b: 4};       // 覆盖source2的b
Object.assign(target, source1, source2);
console.log("console log3:", target);
source1.b = 5
console.log('source1:',source1);
console.log('target:', target);

const target = { a:'1', b: '2'};
const source1 = { };
const source2 = { b: '' };
Object.assign(target, source1, source2);
console.log("console log4:", target);
source1.b = 5
console.log('source1:',source1);
console.log('target:', target);

console log1: { a: 1, b: 2, c: 3 }

console log2: { a: 1, b: 3, d: 4 }

console log3: { a: 1, b: 4, d: 4 }
source1: { b: 5, d: 4 }
target: { a: 1, b: 4, d: 4 }

console log4: { a: '1', b: ''}
source1: { b: 5 }
target: { a: '1', b: '' }

Fourth, deep copy and shallow copy

// 一般的修改源的值
const target = { a: 1 };
const source = { a: 2, b: 3 };
Object.assign(target, source);
console.log('target:', target);
console.log('source:', source);
source.a = 4;
console.log('修改后target:', target);
console.log('修改后source:', source);

// 浅拷贝
const target = { a: 1 };
const source = { a: 2, b: { c: 4 }};
Object.assign(target, source);
console.log('target:', target);
console.log('source:', source);
source.b.c = 10;
console.log('修改后target:', target);    // 目标受源的影响
console.log('修改后source:', source);

// 深拷贝
const target = { a: 1 };
const source = { a: 2, b: { c: 4 }};
Object.assign(target, JSON.parse(JSON.stringify(source)));
console.log('target:', target);
console.log('source:', source);
source.b.c = 10;
console.log('修改后target:', target);    // 目标不受源的影响
console.log('修改后source:', source);

target: { a: 2, b: 3 }
source: { a: 2, b: 3 }
修改后target: { a: 2, b: 3 }
修改后source: { a: 4, b: 3 }

// 浅拷贝
target: { a: 2, b: { c: 4 }}
source: { a: 2, b: { c: 4 }}
修改后target: { a: 2, b: { c: 10 }}    // 目标受源的影响
修改后source: { a: 4, b: { c: 10 }}

// 深拷贝
target: { a: 2, b: { c: 4 }}
source: { a: 2, b: { c: 4 }}
修改后target: { a: 2, b: { c: 4 }}    // 目标不受源的影响
修改后source: { a: 4, b: { c: 10 }}

5. Others

Inherited and non-enumerable properties cannot be copied.

An exception terminates the copy.

Primitive types are wrapped, and null and undefined are ignored.

References and more examples: Object.assign() - JavaScript | MDN (mozilla.org)