Explication détaillée de la fusion dynamique des propriétés de deux objets en JavaScript

Cet article vous présentera la méthode de fusion dynamique des propriétés de deux objets en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Nous pouvons utiliser l'opérateur de propagation (...) pour fusionner différents objets en un seul objet, ce qui est également l'opération la plus courante pour fusionner deux objets ou plus.

Il s'agit d'une méthode immuable de fusion de deux objets, c'est-à-dire que les deux objets initiaux utilisés pour la fusion ne changeront en aucune façon en raison des effets secondaires. Au final, on obtient un nouvel objet construit à partir de ces deux objets alors qu'ils restent intacts.

Nous créons deux objets et les fusionnons :

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

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

console.log(employee);

Résultat d'exécution :

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

Remarque : s'il existe des propriétés communes entre ces deux objets, par exemple location, alors le les propriétés du deuxième objet (job) écraseront les propriétés du premier objet (person) :

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

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

console.log(employee);

Résultat de l'exécution :

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

Si vous souhaitez fusionner avec plus de deux objets, l’objet le plus à droite couvrira l’objet de gauche.

Fusionner des objets JavaScript à l'aide de Object.assign()

Une autre façon courante de fusionner deux objets ou plus consiste à utiliser la méthode Object.assign() intégrée :

Object.assign(target, source1, source2, ...);

Cette méthode copie toutes les propriétés d'un ou plusieurs objets source à l'objet cible. Tout comme l'opérateur spread, en cas de substitution, la valeur la plus à droite sera utilisée :

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

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

Résultats d'exécution :

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

Encore une fois, rappelez-vous que l'objet référencé par employee est un objet complètement nouveau, ne sera pas lié aux objets référencés par person ou job.

Fusion superficielle et fusion profonde

En cas de fusion superficielle, si l'une des propriétés de l'objet source est un autre objet, l'objet cible contiendra une paire du même objet présent dans le citation de l’objet source. Dans ce cas, aucun nouvel objet n'est créé.

Nous ajustons l'objet person précédent et utilisons location comme objet lui-même

const person = {
    name: "John Doe",
    location: {
        city: "London", 
        country: "England"
    }
}
const job = {
    title: "Full stack developer"
}

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

console.log(employee.location === person.location);

Résultats d'exécution :

true

Nous pouvons voir person et employee Les références aux objets location dans les objets sont les mêmes. En fait, les opérateurs de spread (...) et Object.assign() sont tous deux des fusions superficielles.

JavaScript ne prend pas en charge la fusion profonde prête à l'emploi. Cependant, des modules et bibliothèques tiers le prennent en charge, comme .merge de Lodash.

Résumé

Dans cet article, nous montrons comment fusionner deux objets en JS. L'opérateur de propagation (...) et la méthode Object.assign() sont introduits, qui effectuent tous deux une fusion superficielle de deux objets ou plus en un nouvel objet sans affecter les éléments constitutifs.

Adresse originale : https://stackak.com/merge-properties-of-two-objects-dynamically-in-javascript/

Auteur : Abhilash Kakumanu

Adresse de traduction : https://segmentfault.com/a/1190000039833349

Traducteur : Front-end Xiaozhi

Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!