JavaScript中如何实现对象合并的多种技巧解析？

本文共计874个文字，预计阅读时间需要4分钟。

目录 + 对象合并的多种方式（对于通过接口获取数据后赋值给本地对象时极其有用） + 第一种：扩展运算符 + 第二种：扩展运算符 + 第三种：Object.assign()（最推荐） + 1.vue + 项目清空表单 + 总结 + 对象合并的多种方式

目录

• 对象合并的多种方式（对于通过接口获取数据之后赋值给本地对象的时候极其有用）
• 第二种：扩展运算符
• 第三种：Object.assign() (最推荐)
• 1.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)

Tips： $options 存储的是 Vue 实例的初始值，所以通过 Object.assign()覆盖值的特性，可以快速的做到重置表单，同理，如果是在进行表单数据修改的时候也能对页面的 ruleForm 进行快速的赋值

const { data } = await xxxApi.getList(); Object.assign(this.ruleForm, data);

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注自由互联的更多内容!