欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript對(duì)象的多種合并方式詳解

 更新時(shí)間：2021年08月31日 16:53:27   作者：易風(fēng)有點(diǎn)瘋  
這篇文章主要介紹了JavaScript中的多種對(duì)象合并方法,通過(guò)代碼的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下，希望能夠給你帶來(lái)幫助

對(duì)象合并的多種方式（對(duì)于通過(guò)接口獲取數(shù)據(jù)之后賦值給本地對(duì)象的時(shí)候極其有用）

第一種：手動(dòng)賦值(很撈)

const obj1 = {
  name: "zs",
  age: 13,
};
const obj2 = {
  name: "ls",
  sex: "女",
};
obj1.name = obj2.name;
obj1.sex = obj2.sex;

這種方法時(shí)最簡(jiǎn)單的，但是日常項(xiàng)目中一個(gè)對(duì)象的屬性是非常多的，如果還是用這種方法的話就會(huì)有點(diǎn)繁瑣了

第二種：擴(kuò)展運(yùn)算符

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

通過(guò)擴(kuò)展運(yùn)算符的特性可以快速的進(jìn)行對(duì)象的合并，缺點(diǎn)就是需要用一個(gè)新的變量來(lái)接收

第三種：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()方法可以接收一個(gè)目標(biāo)對(duì)象和一個(gè)或者多個(gè)源對(duì)象作為參數(shù)，如果對(duì)象中有一樣的屬性，后面對(duì)象的屬性會(huì)覆蓋掉前面對(duì)象的那個(gè)屬性。

其原理是將后面的對(duì)象通過(guò) set 訪問屬性來(lái)添加進(jìn)目標(biāo)對(duì)象，所以最后返回的值其實(shí)就是第一個(gè)目對(duì)象，可以在目標(biāo)對(duì)象上添加訪問屬性來(lái)見識(shí)覆蓋過(guò)程

const obj1 = {
  set a(val) {
    console.log(val);
  },
};
Object.assign(obj1, { a: "tom" }, { a: "jerry" }, { a: "dog" });
//'tom'
//'jerry'
//'dog'

這個(gè)方法的使用場(chǎng)景有很多，都特別好用，例如：

1.vue 項(xiàng)目清空表單

日常有些同學(xué)清空表單可能會(huì)給 form 里面的數(shù)據(jù)一個(gè)一個(gè)的賦空值來(lái)進(jìn)行表單的清空操作，其實(shí)效率是非常低的,但是如果使用 Object.assign()和$options 配合的話，效率就很高

// 日常
this.ruleForm.name='';
this.ruleForm.phone='';
this.ruleForm.imgUrl='';
this.ruleForm.des='';
...此處省略一萬(wàn)字
// 使用Object.assign和$options
Object.assign(this.ruleForm,this.$options.data)

Tips： $options 存儲(chǔ)的是 Vue 實(shí)例的初始值，所以通過(guò) Object.assign()覆蓋值的特性，可以快速的做到重置表單，同理，如果是在進(jìn)行表單數(shù)據(jù)修改的時(shí)候也能對(duì)頁(yè)面的 ruleForm 進(jìn)行快速的賦值

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

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

相關(guān)文章

最新評(píng)論