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

javascript對象的多種合并方式詳解

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

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

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

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

其原理是將后面的對象通過 set 訪問屬性來添加進目標對象，所以最后返回的值其實就是第一個目對象，可以在目標對象上添加訪問屬性來見識覆蓋過程

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

這個方法的使用場景有很多，都特別好用，例如：

1.vue 項目清空表單

日常有些同學清空表單可能會給 form 里面的數(shù)據(jù)一個一個的賦空值來進行表單的清空操作，其實效率是非常低的,但是如果使用 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()覆蓋值的特性，可以快速的做到重置表單，同理，如果是在進行表單數(shù)據(jù)修改的時候也能對頁面的 ruleForm 進行快速的賦值

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

總結(jié)

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

相關文章

最新評論