掌握 Object.assign ()：ES6 浅拷贝与对象合并的核心技巧

Object.assign() 是 ES6（ECMAScript 2015）新增的原生对象方法，核心作用是 将一个或多个源对象的可枚举属性复制到目标对象，并返回更新后的目标对象。它是对象浅拷贝、属性合并的常用工具，以下从核心特性、用法、细节、场景及注意事项全面解析。

一、基本语法

Object.assign(target, ...sources)

• 参数：
  • target：目标对象（接收属性的对象，会被直接修改）；
  • ...sources：一个或多个源对象（提供属性的对象，不会被修改）；
• 返回值：修改后的 target 对象（与传入的目标对象是同一个引用）。

二、核心特性（关键必知）

1. 浅拷贝：只复制 “表层属性”

Object.assign() 仅复制对象自身的可枚举属性（不包含原型链上的属性），且对嵌套对象 / 数组仅复制引用（不递归深拷贝）。

const target = { a: 1 };
const source = { 
  b: { x: 2 }, // 嵌套对象
  c: [3, 4]    // 数组（本质是对象）
};

Object.assign(target, source);
target.b.x = 99; // 修改拷贝后的嵌套对象
target.c.push(5); // 修改拷贝后的数组

console.log(source.b.x); // 99（源对象的嵌套对象被影响）
console.log(source.c);    // [3,4,5]（源对象的数组被影响）

2. 同名属性：后源对象覆盖前源对象

若多个源对象有同名属性，后面的源对象属性会覆盖前面的；若源对象与目标对象同名，也会覆盖目标对象的属性。

const target = { a: 1, b: 2 };
const source1 = { b: 3, c: 4 };
const source2 = { c: 5, d: 6 };

Object.assign(target, source1, source2);
console.log(target); // { a: 1, b: 3, c: 5, d: 6 }
// 逻辑：target.b 被 source1.b 覆盖，source1.c 被 source2.c 覆盖

3. 只复制 “自身可枚举属性”

• 排除原型链上的属性（obj.__proto__ 上的属性）；
• 排除不可枚举属性（enumerable: false 的属性，如 Object.defineProperty 默认配置）。

// 1. 原型链属性不复制
const parent = { protoProp: '原型属性' };
const source = Object.create(parent); // source 的原型是 parent
source.ownProp = '自身属性';

const target = Object.assign({}, source);
console.log(target.ownProp); // '自身属性'（复制成功）
console.log(target.protoProp); // undefined（原型属性不复制）

// 2. 不可枚举属性不复制
const source2 = {};
Object.defineProperty(source2, 'nonEnumProp', {
  value: '不可枚举属性',
  enumerable: false // 不可枚举
});
source2.enumProp = '可枚举属性';

const target2 = Object.assign({}, source2);
console.log(target2.enumProp); // '可枚举属性'（复制成功）
console.log(target2.nonEnumProp); // undefined（不可枚举属性不复制）

4. 特殊数据类型的处理

• 源对象是基本类型：除 String 外，Number、Boolean、null、undefined 会被忽略（因为它们不是对象，且无自身可枚举属性）；
• String 作为源对象：会被转换为类数组对象，复制其索引和 length 属性。

const target = Object.assign(
  {},
  123,          // 忽略（Number 无自身可枚举属性）
  true,         // 忽略（Boolean 无自身可枚举属性）
  null,         // 忽略
  undefined,    // 忽略
  'hello'       // 转换为类数组 {0: 'h', 1: 'e', 2: 'l', 3: 'l', 4: 'o', length: 5}
);

console.log(target); // {0: 'h', 1: 'e', 2: 'l', 3: 'l', 4: 'o', length: 5}

5. 目标对象是基本类型：自动包装为对象

若 target 是 Number、Boolean、String 基本类型，会先转换为对应的包装对象，最终返回包装对象（但基本类型本身不可修改，实际意义不大）。

const target = Object.assign(123, { a: 1 });
console.log(target); // Number {123, a: 1}（包装对象）
console.log(typeof target); // 'object'

6. Symbol 类型属性：会被复制

Symbol 类型的属性虽然不可枚举（默认 enumerable: false），但 Object.assign() 会特殊处理，将其复制到目标对象。

const sym = Symbol('test');
const source = { [sym]: 'Symbol 属性' };
const target = Object.assign({}, source);

console.log(target[sym]); // 'Symbol 属性'（复制成功）

三、常见用法场景

1. 浅拷贝对象（创建新对象）

通过 {} 作为目标对象，避免修改原对象，实现简单浅拷贝。

const original = { a: 1, b: 2 };
const copy = Object.assign({}, original); // 新对象，与 original 无引用关联
copy.a = 99;
console.log(original.a); // 1（原对象不受影响）

2. 合并多个对象

将多个源对象的属性合并到目标对象（适合配置合并、参数合并）。

// 示例：合并默认配置和用户配置
const defaultConfig = { theme: 'light', fontSize: 16 };
const userConfig = { fontSize: 18, language: 'zh-CN' };

const finalConfig = Object.assign({}, defaultConfig, userConfig);
console.log(finalConfig); // { theme: 'light', fontSize: 18, language: 'zh-CN' }

3. 为对象添加属性 / 方法（批量赋值）

批量给目标对象添加属性或方法（避免多次赋值语句）。

const obj = { a: 1 };
Object.assign(obj, {
  b: 2,
  sayHello: function() { console.log('hello'); }
});

console.log(obj); // { a: 1, b: 2, sayHello: [Function] }
obj.sayHello(); // 'hello'

4. 继承对象的浅拷贝（复制自身属性）

若需复制某个对象的 “自身属性”（排除原型链），可结合 Object.getPrototypeOf 实现。

const parent = { x: 1 };
const child = Object.create(parent); // child 继承 parent
child.y = 2; // 自身属性

// 只复制 child 的自身属性（y），不复制原型属性（x）
const copy = Object.assign({}, child);
console.log(copy); // { y: 2 }

四、注意事项与坑

1. 浅拷贝的局限性（嵌套对象 / 数组需谨慎）

如前文所述，嵌套对象 / 数组仅复制引用，修改拷贝后的值会影响原对象。若需深拷贝，需使用：

• 自定义深拷贝函数；
• Lodash 的 _.cloneDeep；
• ES2022 的 structuredClone()（支持大部分数据类型，不支持函数、Symbol 等）。

// 深拷贝示例（structuredClone）
const original = { a: 1, b: { x: 2 } };
const deepCopy = structuredClone(original);
deepCopy.b.x = 99;
console.log(original.b.x); // 2（原对象不受影响）

2. 目标对象会被直接修改

Object.assign() 是 “原地修改” 目标对象，若不想修改原对象，需传入空对象 {} 作为目标。

const target = { a: 1 };
const source = { b: 2 };

// 错误：直接修改 target
Object.assign(target, source);
console.log(target); // { a: 1, b: 2 }（被修改）

// 正确：不修改原对象，创建新对象
const newTarget = Object.assign({}, target, source);

3. 不可枚举属性、原型属性不会被复制

若需复制不可枚举属性，需结合 Object.getOwnPropertyDescriptors 和 Object.defineProperties：

const source = {};
Object.defineProperty(source, 'nonEnum', {
  value: '不可枚举',
  enumerable: false
});

// 复制不可枚举属性
const target = Object.defineProperties(
  {},
  Object.getOwnPropertyDescriptors(source)
);
console.log(target.nonEnum); // '不可枚举'（复制成功）

4. 源对象为 null/undefined 不会报错

若源对象是 null 或 undefined，Object.assign() 会直接忽略，不会抛出错误（兼容无风险）。

const target = Object.assign({}, null, undefined, { a: 1 });
console.log(target); // { a: 1 }（无报错）

5. 函数属性的复制（仅复制引用）

若源对象的属性是函数，Object.assign() 会复制函数引用（拷贝后的函数与原函数是同一个，修改其一不影响另一个，但调用时的 this 需注意）。

const source = { fn: () => console.log('test') };
const target = Object.assign({}, source);

console.log(target.fn === source.fn); // true（同一函数引用）
target.fn(); // 'test'

五、兼容性

• 支持环境：现代浏览器（Chrome 45+、Firefox 34+、Edge 12+、Safari 9+）、Node.js 4.0+；
• 兼容旧环境（如 IE）：
  • 用 Babel 转译（需配合 @babel/preset-env）；
  • 引入 polyfill（如 core-js 的 Object.assign polyfill）。

六、总结

Object.assign() 是 ES6 核心工具方法，核心能力是 “浅拷贝 + 属性合并”，适合简单的对象操作场景。使用时需牢记：

1. 浅拷贝特性（嵌套对象 / 数组仅复制引用）；
2. 只复制自身可枚举属性（含 Symbol，不含原型、不可枚举属性）；
3. 目标对象会被原地修改（需新对象则传 {}）；
4. 深拷贝需额外处理（如 structuredClone、_.cloneDeep）。

掌握这些细节，可避免大部分使用陷阱，高效处理对象复制与合并需求。