返回顶部
首页 > 资讯 > 前端开发 > JavaScript >javascript对象的多种合并方式详解
  • 918
分享到

javascript对象的多种合并方式详解

2024-04-02 19:04:59 918人浏览 安东尼
摘要

目录对象合并的多种方式(对于通过接口获取数据之后赋值给本地对象的时候极其有用)第一种:手动赋值(很捞)第二种:扩展运算符第三种: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);

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!

--结束END--

本文标题: javascript对象的多种合并方式详解

本文链接: https://lsjlt.com/news/134161.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作