目錄

• 物件合併的多種方式（對於通過介面獲取資料之後賦值給本地物件的時候極其有用）
• 第一種：手動賦值(很撈)
• 第二種：擴充套件運算子
• 第三種：Object.assign() (最推薦)
• 1. 專案清空表單
  
• 總結

物件合併的多種方式（對於通過介面獲取資料之後賦值給本地物件的時候極其有用）

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

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

這種方法時最簡單的，但是日常專案中一個物件的屬性是非常多的，如果還是用這種方法的話就會有點繁瑣了

第二種：擴充套件運算子

const obj1 = {
  name: "zs",};
const newObj = { ...obj1,...obj2 };
console.log(newObj === obj1); //false
console.log(newObj === obj2); //false

通過擴充套件運算子的特性可以快速的進行物件的合併，缺點就是需要用一個新的變數來接收

第三種：Object.assign() (最推薦)

const obj1 = {
  name: "zs",http://www.cppcns.com};
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 訪問屬性來新增進目標物件，所以最後返回的值其實就www.cppcns.com是第一個目物件，可以在目標物件上新增訪問屬性來見識覆蓋過程

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

總結

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