JavaScript 中对象 API 怎么使用扩展运算符（...）实现对象的浅拷贝与属性覆盖-js教程-PHP中文网

扩展运算符（...）用于对象浅拷贝和属性覆盖，按顺序展开可枚举自有属性，后项同名属性覆盖前项；不处理原型、不可枚举属性及symbol键，无法深拷贝，不能展开null/undefined。

javascript 中对象 api 怎么使用扩展运算符（...）实现对象的浅拷贝与属性覆盖

扩展运算符（...）在 JavaScript 中可用于对象的浅拷贝和属性覆盖，核心是将一个或多个对象的可枚举自有属性“展开”到新对象中，按顺序依次赋值，后出现的同名属性会覆盖前面的。

浅拷贝对象

使用 {...obj} 创建一个新对象，其属性值与原对象相同，但引用类型（如数组、嵌套对象）仍共享内存地址。

示例：

const original = {
  name: 'Alice',
  age: 30,
  hobbies: ['reading', 'swimming'],
  address: { city: 'Beijing' }
};

const copy = { ...original };
copy.name = 'Bob'; // 修改基础类型：不影响 original
copy.hobbies.push('coding'); // 修改引用类型：original.hobbies 也会变化
copy.address.city = 'Shanghai'; // original.address.city 同样变成 'Shanghai'

console.log(original.name); // 'Alice'
console.log(original.hobbies); // ['reading', 'swimming', 'coding']
console.log(original.address.city); // 'Shanghai'

合并多个对象并覆盖同名属性

按从左到右顺序展开对象，右侧对象的同名属性会覆盖左侧已存在的属性。

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

写法：{...obj1, ...obj2, ...obj3}
obj2 中的属性会覆盖 obj1 中同名属性，obj3 再覆盖前两者
适用于配置合并、默认值填充等场景

示例：

const defaults = { theme: 'light', fontSize: 14, notifications: true };
const userPrefs = { theme: 'dark', fontSize: 16 };

const config = { ...defaults, ...userPrefs };
console.log(config); // { theme: 'dark', fontSize: 16, notifications: true }

结合字面量新增/覆盖特定属性

可在展开对象的同时，显式添加或重写某些属性，写在展开项之后的属性具有最高优先级。

新增属性直接写在展开表达式后面，如 {...obj, newKey: newValue}
覆盖已有属性只需用相同 key 赋新值，如 {...obj, id: 100}
适合临时修改部分字段，避免手动逐个复制

示例：

const user = { id: 1, name: 'Tom', role: 'user' };

const adminUser = { ...user, role: 'admin', permissions: ['read', 'write'] };
console.log(adminUser); // { id: 1, name: 'Tom', role: 'admin', permissions: ['read', 'write'] }

注意点与限制

扩展运算符只处理对象自身的、可枚举的属性，不拷贝原型链上的属性、不可枚举属性（如 Object.defineProperty 设置的 enumerable: false）、Symbol 键（除非显式展开）。

无法深拷贝：嵌套对象、数组仍是引用
不能展开 null 或 undefined：会报错 TypeError
Symbol 属性需显式处理：{ ...obj, ...Object.getOwnPropertyDescriptors(obj) } 不适用；可用 Reflect.ownKeys() + reduce 手动收集
对于需要深拷贝的场景，应使用 structuredClone()（现代环境）、第三方库（如 lodash 的 cloneDeep），或递归实现