Detailed explanation of various ways to merge javascript objects

Various ways to merge objects (extremely useful when obtaining data through an interface and assigning it to a local object)

The first method: manual assignment (very good)

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

This method is the simplest, but in daily projects, an object has many properties, so it would be a bit cumbersome if this method is still used.

Second: Extension operator

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

The spread operator allows you to quickly merge objects. The disadvantage is that you need to use a new variable to receive the

The third method: Object.assign() (most recommended)

const obj1 = {
  name: "zs",
  age: 13,
};
const obj2 = {
  name: "ls",
  sex: "female",
};
const newObj = Object.assign(obj1, obj2);
console.log(newObj === obj1); //true
console.log(newObj === obj2); //false
console.log(newObj);
// {
// name:'ls',
//age:13,
// sex:'female'
// }

The Object.assign() method can receive a target object and one or more source objects as parameters. If the objects have the same properties, the properties of the latter object will overwrite the properties of the former object.

The principle is to add the subsequent objects to the target object through the set access attribute, so the final returned value is actually the first target object. You can add access attributes to the target object to see the overwriting process.

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

This method can be used in many scenarios, and is particularly useful, for example:

1.vue project clear form

Some students may clear the form by assigning empty values ​​to the data in the form one by one. In fact, the efficiency is very low. However, if Object.assign() and $options are used together, the efficiency will be very high.

// Daily this.ruleForm.name='';
this.ruleForm.phone='';
this.ruleForm.imgUrl='';
this.ruleForm.des='';
...10,000 words omitted here // Using Object.assign and $options
Object.assign(this.ruleForm,this.$options.data)

Tips : $options stores the initial value of the Vue instance, so through the Object.assign() overwrite value feature, you can quickly reset the form. Similarly, if you are modifying the form data, you can also quickly assign the ruleForm of the page.

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

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!