JavaScript 对象合并的多种方式详解
本文详细解析 JavaScript 中合并对象的三种常见方式：手动赋值、扩展运算符以及 Object.assign。重点介绍 Object.assign 在 Vue 项目中清空表单和重置数据的实际应用，通过对比不同方法的优缺点与底层原理，帮助开发者选择最高效的对象处理方案。
详解对象合并的多种实现方式（在接口数据获取后赋值给本地对象场景中极具实用价值）
方式一：手动逐个赋值（效率较低）
const obj1 = {
name: "zs",
age: 13,
};
const obj2 = {
name: "ls",
sex: "女",
};
obj1.name = obj2.name;
obj1.sex = obj2.sex;
该方式最为直观，但日常项目中对象属性繁多，沿用此法将导致代码繁琐冗长
方式二：利用扩展运算符
const obj1 = {
name: "zs",
age: 13,
};
const obj2 = {
name: "ls",
sex: "女",
};
const newObj = { ...obj1, ...obj2 };
console.log(newObj === obj1); //false
console.log(newObj === obj2); //false
借助扩展运算符特性可快速合并对象，其局限在于必须使用新变量接收结果
方式三：Object.assign()（首选推荐）
const obj1 = {
name: "zs",
age: 13,
};
const obj2 = {
name: "ls",
sex: "女",
};
const newObj = Object.assign(obj1, obj2);
console.log(newObj === obj1); //true
console.log(newObj === obj2); //false
console.log(newObj);
// {
// name:'ls',
// age:13,
// sex:'女'
// }
Object.assign()方法接收一个目标对象及一个或多个源对象作为参数，若存在同名属性，后序对象的属性值将覆盖前序对象
其底层机制是通过 set 访问器将后续对象属性添加至目标对象，因此返回值实为第一个目标对象，可在目标对象上定义访问器以观察覆盖过程
const obj1 = {
set a(val) {
console.log(val);
},
};
Object.assign(obj1, { a: "tom" }, { a: "jerry" }, { a: "dog" });
//'tom'
//'jerry'
//'dog'
该应用场景广泛且高效，例如：
1. Vue 项目中清空表单数据
常规做法可能需逐一将 form 内数据赋值为空，效率低下；若结合 Object.assign()与 $options 使用，则能显著提升处理效率
// 日常
this.ruleForm.name='';
this.ruleForm.phone='';
this.ruleForm.imgUrl='';
this.ruleForm.des='';
...此处省略一万字
// 使用Object.assign和$options
Object.assign(this.ruleForm,this.$options.data)
提示：$options 保存了 Vue 实例的初始状态，利用 Object.assign()覆盖特性可快速重置表单；同理，在修改表单数据时也可对页面 ruleForm 进行快速赋值
const { data } = await xxxApi.getList();
Object.assign(this.ruleForm, data);
总结
本文介绍至此结束，希望能为您提供帮助，欢迎持续关注本站获取更多精彩内容！
怎么在React或Vue前端中使用Cube.js Client获取数据
2026-11-03 09:24:09
Vue.js 新手入门：怎么使用 Vite 快速搭建第一个项目
2026-11-02 10:30:55
Vue 项目中封装 heatmap.js：生命周期管理与内存释放
2026-11-02 09:17:40
uni-app 自定义组件开发与通信机制详解
2026-11-01 02:03:46
Vue.js 项目中 Mock 数据的三种实现方案
2026-10-31 17:23:18