Comment fusionner des objets en JavaScript —

Les développeurs ont souvent besoin de fusionner ou de copier des objets pour des tâches telles que la combinaison de données ou la création de nouvelles instances. Des techniques comme la propagation ( ... ) (utilisé pour fusionner les propriétés de plusieurs objets) et l’opérateur Object.assign() (pour copier des propriétés d’un objet à un autre) sont des outils essentiels pour ces tâches. Cependant, comprendre quand et comment les utiliser est crucial pour une manipulation efficace des objets. Dans cet article, je couvrirai certaines applications pratiques de ces méthodes, leurs forces et leurs faiblesses, ainsi que le concept de copie en profondeur avant de fusionner des objets imbriqués.

Approches pour fusionner des objets

1. L’opérateur de propagation ( ... )

L’opérateur de propagation (...) est une approche courante pour fusionner des objets en JavaScript. Il a la forme {...object1, ...object2}. Lorsque des propriétés avec les mêmes clés existent dans les objets source, l’opérateur de propagation remplace les valeurs de l’objet cible par les dernières valeurs de l’objet source.

const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };

const combinedSettings = { ...defaults, ...userSettings };
console.log(combinedSettings);
// Output: { color: 'blue', size: 'medium' }

2. Le Object.assign() Méthode

Object.assign() est une méthode JavaScript pour fusionner des objets. Sa syntaxe est Object.assign(target, source1, source2, ...)où vous fusionnez des objets source dans le target objet. Lorsque des propriétés avec les mêmes clés existent dans les objets source, Object.assign() remplace les valeurs de l’objet cible par les dernières valeurs de l’objet source.

const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };

const combinedSettings = Object.assign({}, defaults, userSettings);
console.log(combinedSettings);
// Output: { color: 'blue', size: 'medium' }

Pièges et considérations

Voici les pièges et les problèmes potentiels avec l’opérateur de propagation et Object.assign() méthode de fusion d’objets en JavaScript :

1. Copie superficielle

L’opérateur de propagation et Object.assign() effectuer copie superficielle lors de la fusion d’objets. Cela signifie que les objets imbriqués sont toujours des références aux objets d’origine. La modification des objets imbriqués dans l’objet fusionné peut affecter les objets d’origine, ce qui peut entraîner des effets secondaires imprévus.

Voir Fusion profonde dessous.

2. Remplacer les propriétés

Lors de la fusion d’objets avec des propriétés qui ont les mêmes clés, l’opérateur de propagation et Object.assign() remplacer les valeurs de l’objet résultant par les valeurs du dernier objet source. Ce comportement peut entraîner la perte de données s’il n’est pas manipulé avec soin.

3. Problèmes de compatibilité

L’opérateur de propagation fait partie d’ECMAScript 2015 (ES6) et est non pris en charge dans les anciens environnements ou navigateurs JavaScript, comme Internet Explorer. Cela peut entraîner des problèmes de compatibilité si votre code doit s’exécuter dans des environnements plus anciens. Dans de tels cas, il est préférable d’utiliser Object.assign()qui bénéficie d’un soutien plus large.

4. Propriétés non dénombrables

L’opérateur de propagation et Object.assign() copier uniquement les propriétés énumérables des objets source vers l’objet cible. Les propriétés non énumérables ne sont pas copiées pendant le processus de fusion, ce qui peut entraîner des données manquantes ou un comportement inattendu.

5. Problèmes de performances

Dans les cas où vous devez fusionner des objets volumineux ou effectuer fréquemment des opérations de fusion, utilisez Object.assign() ou l’opérateur de propagation peut entraîner des problèmes de performances en raison de la création de nouveaux objets pendant le processus de fusion.

6. Propriétés du prototype

Object.assign() copie les propriétés du prototype de l’objet source vers l’objet cible, ce qui peut entraîner un comportement inattendu si le prototype de l’objet source a des propriétés en conflit avec les propriétés de l’objet cible. L’opérateur de propagation, en revanche, ne copie pas les propriétés du prototype.

Il est essentiel d’être conscient de ces pièges et problèmes lors de l’utilisation de l’opérateur de propagation ou Object.assign() pour fusionner des objets en JavaScript. Dans des scénarios spécifiques, vous devrez peut-être utiliser des approches alternatives, telles que des fonctions de clonage en profondeur ou de fusion en profondeur, pour surmonter ces limitations.

Lequel utiliser

Les deux Object.assign() et l’opérateur de propagation fusionne efficacement les objets. L’opérateur de propagation est plus concis et moderne, tandis que Object.assign() offre une meilleure compatibilité avec les anciens environnements JavaScript.

Pour décider quelle méthode utiliser, considérez :

1. Si votre environnement prend en charge l’opérateur de propagation (comme la dernière version d’ECMAScript), utilisez-le pour sa syntaxe concise.
2. Si la compatibilité avec les anciens environnements JavaScript est essentielle, choisissez Object.assign().
3. Si vous avez besoin de copier un objet imbriqué (un avec des objets imbriqués à l’intérieur), lisez la suite sur Copie en profondeur des objets.

Fusion approfondie : copie et fusion approfondie d’objets

L’opérateur de propagation et Object.assign() créent tous deux une copie superficielle du ou des objets en cours de copie. Cela signifie essentiellement que le nouvel objet aura des références aux mêmes objets imbriqués (par exemple, des tableaux et des fonctions) que l’objet d’origine, plutôt que d’en avoir des copies.

Il est essentiel de connaître et d’éviter cela avant de fusionner des objets.

L’exemple ci-dessous montre comment la modification d’objets imbriqués sur un objet copié peut affecter l’original :

const planet = {
  name: 'Earth',
  emoji: '🌍',
  info: {
    type: 'terrestrial',
    moons: 1
  }
};

// Shallow copy using the spread operator
const shallowCopyPlanet = { ...planet };

// Modifying the nested object in the shallow copy
shallowCopyPlanet.info.moons = 2;

console.log('Original planet:', planet.info.moons);
// Original planet: 2
console.log('Shallow copy of the planet:', shallowCopyPlanet.info.moons);
// Shallow copy of the planet: 2

La sortie de ce code montre que la propriété info.moons sur l’objet d’origine planet a été modifié en l’éditant dans shallowCopyPlanet (Vous ne voulez probablement pas cela).

Une fonction personnalisée de Deep Merging

Voici une fonction qui copie en profondeur plusieurs objets avant de les fusionner et renvoie un seul objet. Dans le code, le deepMergeObjects prend n’importe quel nombre d’objets d’entrée, en crée des copies complètes à l’aide de la fonction JSON.parse(JSON.stringify()) technique, puis les fusionne à l’aide de l’opérateur de propagation à l’intérieur de la reduce() méthode. L’objet fusionné contiendra des copies complètes des propriétés des objets d’entrée.

const deepMergeObjects = (...objects) => {
  const deepCopyObjects = objects.map(object => JSON.parse(JSON.stringify(object)));
  return deepCopyObjects.reduce((merged, current) => ({ ...merged, ...current }), {});
}

// Example usage:
const countries = {
  USA: {
    capital: 'Washington D.C.',
    emoji: '🇺🇸',
    population: 331000000
  }
};

const countriesDetails = {
  USA: {
    language: 'English',
    currency: 'USD'
  },
  Germany: {
    capital: 'Berlin',
    emoji: '🇩🇪',
    language: 'German',
    currency: 'EUR',
    population: 83000000
  }
};

const mergedData = deepMergeObjects(countries, countriesDetails);

Conclusion

Merci d’avoir lu! J’espère que cet article vous a donné une compréhension approfondie de la fusion d’objets en JavaScript et pas seulement une introduction superficielle. Être capable de combiner des objets dans cela devrait bien fusionner avec vos compétences en JavaScript et étendre vos prouesses de codage. Pour toute question ou commentaire, rejoignez-nous au Forum de la communauté SitePoint.