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

 更新时间:2021年08月31日 16:53:27   作者:易风有点疯  
这篇文章主要介绍了JavaScript中的多种对象合并方法,通过代码的形式给大家介绍的非常详细,需要的朋友可以参考下,希望能够给你带来帮助

对象合并的多种方式(对于通过接口获取数据之后赋值给本地对象的时候极其有用)

第一种:手动赋值(很捞)

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);

总结

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

相关文章

  • 查看QQ是否在线状态的网页代码

    查看QQ是否在线状态的网页代码

    这个其实就是利用qq官方提供的东西,简单的通过图片来测试是否在线,隐身也是不在线状态。纯粹学习使用。
    2010-04-04
  • js 表单提交后按钮变灰的实例代码

    js 表单提交后按钮变灰的实例代码

    这篇文章介绍了js 表单提交后按钮变灰的实例代码,有需要的朋友可以参考一下
    2013-08-08
  • TypeScript 类型编程之索引类型递归去掉可选修饰

    TypeScript 类型编程之索引类型递归去掉可选修饰

    这篇文章主要介绍了TypeScript 类型编程之索引类型递归去掉可选修饰,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-08-08
  • 如何使用wheelnav.js构建酷炫的动态导航菜单

    如何使用wheelnav.js构建酷炫的动态导航菜单

    本文主要介绍一种基于SVG的web动态导航组件,通过这个组件可以实现很多丰富酷炫的效果,首先介绍这款wheelnav.js的相关知识,然后结合代码讲解如何在html页面中创建其对象,接着讲解wheelnav的一些属性和方法,最后给出基于wheelnav的实际成果,喜欢的朋友一起学习吧
    2024-06-06
  • chrome监听cookie变化与赋值问题

    chrome监听cookie变化与赋值问题

    这篇文章主要介绍了chrome监听cookie变化与赋值问题,cookie监听与赋值操作需要manifest文件里声明权限问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • IE的fireEvent方法概述及应用

    IE的fireEvent方法概述及应用

    IE中提供了一个fireEvent方法大概就是触发某个事件发生的意思,以为是和onclick()一样,看来是我自已为是了,有时间还要多看看javascript的细节啊,广大网友也是啊
    2013-02-02
  • JS实现设置ff与ie元素绝对位置的方法

    JS实现设置ff与ie元素绝对位置的方法

    这篇文章主要介绍了JS实现设置ff与ie元素绝对位置的方法,涉及JavaScript针对页面元素及元素属性的相关操作技巧,需要的朋友可以参考下
    2016-03-03
  • 微信小程序websocket实现聊天功能

    微信小程序websocket实现聊天功能

    这篇文章主要为大家详细介绍了微信小程序websocket实现聊天功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • 聊一聊JavaScript的URL对象是什么

    聊一聊JavaScript的URL对象是什么

    这篇文章主要介绍了JavaScript的URL对象是什么,还有各个属性的具体实现方法,对JS URL感兴趣的同学,可以参考下
    2021-05-05
  • 如何用js将blob为pcm格式转换为MP3格式

    如何用js将blob为pcm格式转换为MP3格式

    要将PCM文件转换为MP3文件,您可以使用Js实现,这篇文章主要给大家介绍了关于如何用js将blob为pcm格式转换为MP3格式的相关资料,需要的朋友可以参考下
    2023-11-11

最新评论