Javascript Object.assign 用法详解

Object.assign() 是 JavaScript ES6 (ECMAScript 2015) 引入的一个静态方法，用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它返回目标对象。

语法

Object.assign(target, ...sources)

• target：目标对象——将要接收新属性的对象。
• sources：源对象——一个或多个对象，其可枚举属性将被复制到目标对象。

返回值

返回目标对象（修改后的对象）。

特性

1. 浅拷贝：Object.assign() 只会拷贝源对象自身的和可枚举的属性到目标对象，而不会拷贝其原型链上的属性。并且，它是浅拷贝，即如果源对象的属性值是对象，那么目标对象对应的属性值将引用同一个对象。
2. 同名属性覆盖：如果源对象中有多个同名属性，后面的属性会覆盖前面的属性。
3. 不可枚举属性：Object.assign() 不会拷贝源对象的不可枚举属性（例如使用 Object.defineProperty() 定义的属性，且 enumerable 属性设为 false）。
4. 原始数据类型：如果目标对象不是对象（例如，原始数据类型），Object.assign() 会将其转换为对象，然后返回这个新对象。

示例

基本用法

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

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

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

console.log(returnedTarget);
// 输出: { a: 1, b: 2, c: 3 }
// 注意：目标对象被修改，并且返回的也是目标对象

浅拷贝

const obj1 = { a: { b: 1 } };
const obj2 = Object.assign({}, obj1);

obj2.a.b = 2;

console.log(obj1.a.b);
// 输出: 2
// 由于是浅拷贝，obj1 和 obj2 中的 a 属性指向同一个对象

合并对象

const defaults = { a: 1, b: 2 };
const options = { b: 3, c: 4 };

const finalOptions = Object.assign({}, defaults, options);

console.log(finalOptions);
// 输出: { a: 1, b: 3, c: 4 }
// 注意到 b 属性被 options 中的值覆盖了

处理原始数据类型

const target = 'abc';
const result = Object.assign(target, { a: 1 });

console.log(result);
// 输出: { 0: 'a', 1: 'b', 2: 'c', a: 1 }
// 注意：目标字符串被转换为对象，并且属性被添加

不可枚举属性

const source = Object.create(Object.prototype, {
  foo: {
    value: 1,
    enumerable: false,
    writable: true,
    configurable: true
  },
  bar: {
    value: 2,
    enumerable: true,
    writable: true,
    configurable: true
  }
});

const target = {};

Object.assign(target, source);

console.log(target);
// 输出: { bar: 2 }
// 不可枚举属性 foo 不会被拷贝

注意事项

• 使用 Object.assign() 时，要确保目标对象是可以被修改的对象，否则会出现不可预期的行为。
• 浅拷贝的特性可能导致数据污染或意外的数据共享，特别是在处理嵌套对象时。

实际应用

Object.assign() 在实际应用中非常广泛，可以用于对象合并、配置选项的默认值和覆盖、对象属性的复制等场景。