There are three main methods to merge objects in JavaScript: 1. Use the Spread Operator to expand the properties of one object into another object, which is concise in syntax and suitable for most cases; 2. Use the Object.assign() method to achieve better compatibility merging, suitable for old browser projects; 3. When deep merging nested objects, you can use Lodash's _.merge() or custom recursive logic. It should be noted that the first two methods are shallow merges, duplicate attributes will be overwritten, and nested structures will not be processed, and the original data will not be retained by default.

Merging two objects is a common operation in JavaScript, especially when processing data, configuration, or state management. You just need to use the right method to complete the merge quickly.

Use the Spread Operator

This is the easiest and most common way to do it. You can use ... to "expand" the properties of one object into another:

 const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const merged = { ...obj1, ...obj2 };

console.log(merged); // { a: 1, b: 3, c: 4 }

It should be noted that if there are duplicate attribute names, the following ones will overwrite the previous ones . For example, the b attribute in the above example is ultimately the value of obj2 .

This method is suitable for most situations, especially when you don't want to change the original object.

Use Object.assign()

Object.assign() is an older but still widely supported method:

 const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const merged = Object.assign({}, obj1, obj2);

console.log(merged); // { a: 1, b: 3, c: 4 }

• The first parameter is the target object. Generally, passing an empty object {} avoids modifying the original object.
• The subsequent parameters are the objects to be merged.
• Like the expand operator, the properties of the following object will override the previous one.

The advantage of this method is that it has good compatibility and is suitable for projects that need to support old browsers.

Problems with deep copy and nested objects

Both methods above are shallow merging . If you have nested objects in your object, they will not be deeply copied:

 const obj1 = { a: { x: 1 } };
const obj2 = { a: { y: 2 } };

const merged = { ...obj1, ...obj2 };

console.log(merged); // { a: { y: 2 } }, the original ax was replaced by the entire

If you want to do deep merge, you have to use third-party libraries such as Lodash's _.merge() , or write recursive logic yourself. Otherwise, the default method does not handle nested structures.

Summarize how to choose

• If you don't need to be compatible with old browsers:
  • ? Priority is given to the use of expansion operators, the code is concise and intuitive.
• If you need compatibility better:
  • ? Use Object.assign()
• If there is a nested structure in the object and you want to preserve or merge internal properties:
  • ? Consider using Lodash's merge or implementing deep merge logic yourself

Basically these are the methods. Although it doesn't seem complicated, it will cover the data you originally wanted to retain if you are not careful, so pay attention to the order and structure when using it.

The above is the detailed content of How to merge two objects in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!