{...obj}可实现对象浅拷贝，仅复制第一层可枚举属性；支持边拷贝边修改、条件添加、嵌套对象手动展开及多对象合并，后者按顺序覆盖同名字段。

用 {...obj} 一行就能完成对象的浅拷贝，生成一个拥有相同可枚举属性的新对象，原对象与副本互不影响——但仅限第一层属性。

基础写法：复制整个对象

直接展开原对象，包裹在新对象字面量中：

const copy = {...original};

这等价于 Object.assign({}, original)，会拷贝所有自身可枚举属性（不含原型链上的、不可枚举的或 Symbol 键）。

边拷贝边修改：覆盖或新增字段

展开后紧跟其他键值对，同名字段会被后者覆盖，新字段则直接加入：

• 更新 name 字段：const updated = {...original, name: "张三"};
• 添加 id 字段：const withId = {...original, id: 1001};
• 条件添加 role：const user = {...original, ...(isAdmin ? {role: "admin"} : {}) };

处理嵌套对象：需手动展开下一层

展开运算符只做浅拷贝，若 original.profile 是对象，{...original} 中的 profile 仍是原引用。要安全修改嵌套字段，必须显式展开嵌套层：

前端开发

ys-agent 前端（frontend/）功能迭代的工程规范守门 skill。当任何 agent 接到 ys-agent 前端相关任务时——新增页面、新增组件、加 API、加 Pinia store、改路由、写 mock、调整布局、修改样式、对接后端接口、迁移 demo 代码、做主题、加权限、写公共组件、做数据可视化、做表单、做弹窗、做表格、做搜索过滤、调 Element Plus 用法、做响应式、做性能优化，或仅仅是在 frontend/ 目录下编辑任何 .vue / .ts / .scss / .c

下载

const safeUpdate = {...original, profile: {...original.profile, age: 30}};

否则直接改 copy.profile.age 会影响原对象的 original.profile.age。

合并多个对象：天然支持多源覆盖

把多个对象依次展开，后面属性会覆盖前面同名属性，适合配置合并场景：

const finalConfig = {...defaults, ...userSettings, ...overrides};

顺序决定优先级，越靠后的对象字段权重越高。