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

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

总结

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

赞 (0)

相关推荐

  • js 将多个对象合并成一个对象 assign方法的实现

    1.接下来介绍一下ES6在Object新加的方法  assign()   1.作用:将多个对象{}  合并成一个独立对象. 2.使用方式: Object.assign(合并的对象,传入合并中的对象....) let user = {name:'无敌人',age:19}; let page = {pageSize:10,currentPage:1}; let newObj = {}; Object.assign(newObj,user,page); 2.首先es6新增了许多新知识.比如数组型的:S

  • JavaScript如何把两个数组对象合并过程解析

    JavaScript如何把两个数组对象合并过程解析

    这篇文章主要介绍了JavaScript如何把两个数组对象合并过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 合并数组或者对象在数组或对象前面加...,是es6的新写法,然后数组的map方法会返回数组. var obj1 = [{ "id": 980550455852, "model": "XQG70-S1208FW", "color": "白",

  • JavaScript简单实现合并两个Json对象的方法示例

    JavaScript简单实现合并两个Json对象的方法示例

    本文实例讲述了JavaScript简单实现合并两个Json对象的方法.分享给大家供大家参考,具体如下: $.mergeJsonObject = function(jsonbject1, jsonbject2) { var resultJsonObject = {}; for (var attr in jsonbject1) { resultJsonObject[attr] = jsonbject1[attr]; } for (var attr in jsonbject2) { resultJso

  • Javascript 对象（object）合并操作实例分析

    本文实例讲述了Javascript 对象(object)合并操作.分享给大家供大家参考,具体如下: 对象的合并 需求:设有对象 o1 ,o2,需要得到对象 o3 var o1 = { a:'a' }, o2 = { b:'b' }; // 则 var o3 = { a:'a', b:'b' } 方法1:使用JQuery的extend方法 **方法定义**:jQuery.extend([deep], target, object1, [objectN]) > 用一个或多个其他对象来扩展一个对象,返

  • 详解JavaScript中的数组合并方法和对象合并方法

    1 数组合并 1.1 concat 方法 var a=[1,2,3],b=[4,5,6]; var c=a.concat(b); console.log(c);// 1,2,3,4,5,6 console.log(a);// 1,2,3 不改变本身 1.2 循环遍历 var arr1=['a','b']; var arr2=['c','d','e']; for(var i=0;i<arr2.length;i++){ arr1.push(arr2[i]) } console.log(arr1);/

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

    目录 对象合并的多种方式(对于通过接口获取数据之后赋值给本地对象的时候极其有用) 第一种:手动赋值(很捞) 第二种:扩展运算符 第三种:Object.assign() (最推荐) 1.vue 项目清空表单 总结 对象合并的多种方式(对于通过接口获取数据之后赋值给本地对象的时候极其有用) 第一种:手动赋值(很捞) const obj1 = { name: "zs", age: 13, }; const obj2 = { name: "ls", sex: "女

  • javascript url几种编码方式详解

    1. escape() 不能直接用于URL编码,它的真正作用是返回一个字符的Unicode编码值.比如"春节"的返回结果是%u6625%u8282,escape()不对"+"编码主要用于汉子编码,现在已经不提倡使用了. 2. encodeURI()是javascript中真正用来对URL编码的函数.编码整个URL地址,但对特殊含义的符号";/?:@&=+$,#",也不进行编码.对应的解码函数是decodeURI(). 3. encodeU

  • Javascript对象及Proxy工作原理详解

    Javascript对象及Proxy工作原理详解

    正文 这一章其实算是javascript的科普文章,其实这本书的读者一般都不会是入门者,因此按道理说应该不需要再科普才对.但是作者依旧安排了这一章,证明就是这一章内容与我们以为的对象不一样. Javascript中一切皆对象 这一句话大家应该耳熟能详,对于常规的字面量对象,和new出来的对象,大家应该都能分辨 const str = '' const str2 = new String() const obj = {} const obj2 = Object.create() 但是根据ECMA,

  • javascript创建对象、对象继承的实用方式详解

    本文约定:不特殊声明的情况下,属性代指属性或方法. 创建对象.对象继承实际上是一回事:我们所需要的实例对象通过构造函数获得私有属性.通过原型链获得共享的属性.什么是好的方式?私有属性通过构造函数的方式获得(不考虑实例中自定义私有属性)且不需要重写,共享属性通过原型链找到且不需要重复创建. 普适的方式 组合使用构造函数模式和原型模式创建对象 function HNU_student(name) { this.name = name; this.sayName = function() { retu

  • JavaScript中定义类的方式详解

    本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的extend或冒号,它也没有用来支持虚函数的virtual,不过,Javascript是一门灵活的语言,下面我们就看看没有关键字class的Javascript如何实现类定义,并创建对象. 一.定义类并创建类的实例对象 在Javascript中,我们用function来定义类,如下: function Sh

  • JavaScript类属性的访问方式详解

    JavaScript类属性的访问方式 复制代码 代码如下: var fish = { head : 1, tail : 1, feature : { speak : false, swim : true } } 其一,点操作符: 复制代码 代码如下: console.log(fish.head);//1 console.log(fish.tail);//1 console.log(fish.feature);//Object { head:1, tail:1, feature: Object}

  • 微信小程序 两种为对象属性赋值的方式详解

    微信小程序两种为对象属性赋值的方式 对应config.wxml <view> 阶段一<switch id="config1" checked bindchange="switchChange"/> </view> 对应config.js data:{ //定义对象 configs:{} } //方式一 switchChange:function(e){ //为对象的某一属性赋值 configs.config1={ }; conso

  • SqlServer 多种分页方式 详解(含简单速度测试)

    目录 SQLServer分页方式 1.Offset and Fetch 方式分页 2.row_number() 方式分页 3.row_number()变种 4.not in/top方式分页 5.not exists方式分页 6.max/top方式分页 SQLServer分页方式 附带50万数据分页时间[本机访问|已重启SQL服务|无其他程序干扰][非索引排序]环境 WIN7 SQL服务12.04 SQL管理器SSMS14.01 1.Offset and Fetch 方式分页 [SqlServer

  • Android中Intent传递对象的3种方式详解

    前言 相信Intent的用法大家已经比较熟悉了,Intent可以用来启动Activity,Service等等,同时我们也可以通过Intent来进行传递数据,当我们使用Intent在Activity 间传递信息时发现putExtra() 方法并不支持自定义对象的传输,下面就来介绍三种解决方式. 一.Serializable 方式 这是最简单的一种方法,因为我们要做的就是让我们自定义的对象实现 Serializable 这个空接口. public class Person implements Se

  • JavaScript中Object值合并方法详解

    前言:在日常开发工作中我们可能会遇到js中对象中所有值的复制工作,也有可能是通过electron开发客户端,改版时候面临到的设置合并问题.那么本文将对此做一个简要解决方案的叙述. 介绍:比如有obj1, obj2,我们需要将obj1中的所有与obj2中相同字段相同深度的值copy给obj2,并且需要保持obj2字段结构不变,调用一下方法即可(采用ES6写法). 代码: /** * 将src中的数据copy到dist中,并保留dist的结构 * @param src * @param dist *

随机推荐