Object.assign方法有什么用？超详细测试用例、实例、可以在浏览器的控制台打印结果

Object.assign 是一个 JavaScript 方法，用于将一个或多个源对象的所有可枚举属性复制到目标对象中。它返回目标对象。这个方法常用于合并对象或浅复制对象。

语法

Object.assign(target, ...sources)

• target: 目标对象。
• sources: 一个或多个源对象。

示例

1. 合并对象

将多个对象的属性合并到一个对象中。

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };

const result = Object.assign(target, source1, source2);

console.log(result); // { a: 1, b: 2, c: 3 }
console.log(target); // { a: 1, b: 2, c: 3 }

为什么【const result = Object.assign(target, source1, source2);】里面的result和target的值都是一样的？
这是因为 Object.assign 会将所有源对象的属性复制到目标对象，并且返回的也是这个目标对象。所以，result 和 target 实际上是同一个对象的引用，它们会具有相同的值。更具体地说，Object.assign 是一个“浅拷贝”，它只拷贝对象的自身属性（不包括原型链上的属性），并且是按顺序进行的，所以后面的源对象的属性会覆盖前面的源对象的同名属性。

以下是一个详细的例子和解释：

示例代码

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };

const result = Object.assign(target, source1, source2);

console.log(result); // { a: 1, b: 2, c: 3 }
console.log(target); // { a: 1, b: 2, c: 3 }

解释

1. 初始对象：

   • target: { a: 1 }
   • source1: { b: 2 }
   • source2: { c: 3 }

2. 执行 Object.assign(target, source1, source2)：

   • 首先将 source1 的属性复制到 target:
     • target 变成 { a: 1, b: 2 }
   • 然后将 source2 的属性复制到 target:
     • target 变成 { a: 1, b: 2, c: 3 }

3. 返回值：

   • Object.assign 返回的对象就是 target，所以 result 和 target 都是指向同一个对象，它们的值完全相同。

深入理解

当你执行 Object.assign 时，它会修改 target 对象，并且返回这个修改后的对象。因此，result 和 target 实际上是同一个对象的引用，修改 result 也会修改 target，反之亦然。

在浏览器控制台中试试

你可以在浏览器的控制台中输入以下代码来验证：

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };

const result = Object.assign(target, source1, source2);

console.log('result:', result); // { a: 1, b: 2, c: 3 }
console.log('target:', target); // { a: 1, b: 2, c: 3 }
console.log(result === target); // true, 说明 result 和 target 是同一个对象的引用

通过这些代码，你可以观察到 result 和 target 的值是相同的，并且它们是同一个对象的引用。

2. 浅拷贝对象

创建对象的浅拷贝。

const obj = { a: 1, b: { c: 2 } };
const copy = Object.assign({}, obj);

console.log(copy); // { a: 1, b: { c: 2 } }

// 修改原对象不会影响拷贝对象（对于顶层属性）
obj.a = 10;
console.log(copy.a); // 1

// 但是对于嵌套对象（浅拷贝），修改会反映在拷贝对象上
obj.b.c = 20;
console.log(copy.b.c); // 20

3. 添加新属性

可以使用 Object.assign 给对象添加新属性。

const target = { a: 1 };

const result = Object.assign(target, { b: 2, c: 3 });

console.log(result); // { a: 1, b: 2, c: 3 }
console.log(target); // { a: 1, b: 2, c: 3 }

4. 重写属性

如果源对象有与目标对象同名的属性，目标对象的属性将被源对象的属性覆盖。

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

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

console.log(result); // { a: 1, b: 3, c: 4 }
console.log(target); // { a: 1, b: 3, c: 4 }

在浏览器控制台中试试

在浏览器的控制台中，输入以下代码并查看输出结果：

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };

const result = Object.assign(target, source1, source2);

console.log('合并后的对象:', result);
console.log('目标对象:', target);

const obj = { a: 1, b: { c: 2 } };
const copy = Object.assign({}, obj);

console.log('浅拷贝后的对象:', copy);

// 修改原对象不会影响拷贝对象（对于顶层属性）
obj.a = 10;
console.log('修改原对象顶层属性后的拷贝对象:', copy.a);

// 但是对于嵌套对象（浅拷贝），修改会反映在拷贝对象上
obj.b.c = 20;
console.log('修改原对象嵌套属性后的拷贝对象:', copy.b.c);

你会看到合并后的对象、浅拷贝对象以及修改后的输出结果。