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

Posted on by

對象合並的多種方式（對於通過接口獲取數據之後賦值給本地對象的時候極其有用）

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

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

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：