javascript對象的多種合并方式介紹

本篇內容介紹了“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);

“javascript對象的多種合并方式介紹”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！