Detailed explanation of dynamically merging the properties of two objects in JavaScript

This article will introduce you to the method of dynamically merging the properties of two objects in JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

We can use the spread operator (...) to merge different objects into one object, which is also to merge two or more objects The most common operations.

This is an immutable method of merging two objects, that is, the initial two objects used for merging will not change in any way due to side effects. In the end, we get a new object constructed from these two objects while they remain intact.

We create two objects and merge them:

const person = {
    name: "前端小智",
    age: 24
}
const job = {
    title: "前端开发",
    location: "厦门"
}

const employee = {...person, ...job};

console.log(employee);

Running result:

{ 
  name: '前端小智', 
  age: 24, 
  title: '前端开发', 
  location: '厦门' 
}

Note: If there are common properties between the two objects, e.g. location, then the properties of the second object (job) will overwrite the properties of the first object (person):

const person = {
  name: "前端小智",
  location: "北京"
}
const job = {
  title: "前端开发",
  location: "厦门"
}

const employee = {...person, ...job};

console.log(employee);

Run Result:

{ 
  name: '前端小智', 
  location: '厦门', 
  title: '前端开发' 
}

If you want to merge more than two objects, the rightmost object will overwrite the left object.

Merge JavaScript objects using Object.assign() Another common way to merge two or more objects is to use the built-in

Object.assign ()

Method: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>Object.assign(target, source1, source2, ...);</pre><div class="contentsignin">Copy after login</div></div>This method copies all properties from one or more source objects to the target object. Just like the spread operator, when overriding, the rightmost value will be used:

const person = {
  name: "前端小智",
  location: "北京",
};
const job = {
  title: "前端开发",
  location: "厦门",
};

const employee = Object.assign(person, job);
console.log(employee);

Running result:

{ 
  name: '前端小智', 
  age: 24,
  location: '厦门', 
  title: '前端开发' 
}

Again, remember the object referenced by

employee

is a completely new object and will not be linked to the objects referenced by person or job. Shallow merge and deep merge

In case of shallow merge, if one of the properties on the source object is another object, the target object will contain a pair of the same object that exists in the source object citation. In this case, no new object is created.

We adjust the previous

person

object and use location as the object itself <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>const person = { name: &quot;John Doe&quot;, location: { city: &quot;London&quot;, country: &quot;England&quot; } } const job = { title: &quot;Full stack developer&quot; } const employee = {...person, ...job}; console.log(employee.location === person.location);</pre><div class="contentsignin">Copy after login</div></div>The running result:

true

We can See that the references to the

location

object in the person and employee objects are the same. In fact, spread operators (...) and Object.assign() are shallow merges. JavaScript does not have ready support for deep merging. However, third-party modules and libraries do support it, such as Lodash's

.merge

. Summary

In this article, we demonstrate how to merge two objects in JS. Introduced the spread operator (

...

) and the Object.assign() method, which both perform a shallow merge of two or more objects into a new object without will affect the components.

Original address: https://stackak.com/merge-properties-of-two-objects-dynamically-in-javascript/

Author: Abhilash Kakumanu

Translation address: https://segmentfault.com/a/1190000039833349

Translator: Front-end Xiaozhi

For more programming-related knowledge, please visit:

programming video

! !

The above is the detailed content of Detailed explanation of dynamically merging the properties of two objects in JavaScript. For more information, please follow other related articles on the PHP Chinese website!