Comment fusionner les objets en javascript

Points de base

• Les méthodes de fusion d'objets couramment utilisées dans JavaScript incluent l'opérateur d'extension (...) et les méthodes Object.assign(). L'opérateur Expand est plus moderne et concis, tandis que le Object.assign() est plus compatible et adapté aux environnements plus anciens.
• élargir les opérateurs et Object.assign() tous deux effectuent des copies peu profondes lors de la fusion d'objets, ce qui signifie que l'objet imbriqué est toujours une référence à l'objet d'origine. La modification des objets imbriqués dans des objets fusionnés peut affecter l'objet d'origine, entraînant des effets secondaires potentiels inattendus.
• Pour la fusion profonde (fusion correcte des objets imbriqués), des bibliothèques telles que des fonctions personnalisées ou Lodash peuvent être utilisées. Un exemple de fonction personnalisé deepMergeObjects est fourni dans l'article, qui crée une copie de profondeur de l'objet avant de la fusionner en utilisant la technique JSON.parse(JSON.stringify()).

Les développeurs ont souvent besoin de fusionner ou de copier des objets pour effectuer des tâches telles que la composition de données ou la création de nouvelles instances. Des techniques telles que l'opérateur d'extension (...) (utilisé pour fusionner les propriétés de plusieurs objets) et la méthode Object.assign() (utilisée pour copier les propriétés d'un objet à un autre) sont des outils importants pour accomplir ces tâches. Cependant, comprendre quand et comment les utiliser est essentiel pour manipuler efficacement les objets. Dans cet article, je présenterai certaines applications pratiques de ces méthodes, leurs avantages et leurs inconvénients, et le concept de copie profondément et de fusion des objets imbriqués.

Catalogue

• Méthode de fusion d'objets
  • 1. élargir l'opérateur (...)
  • 2. Object.assign() Méthode
• Trus et précautions
• quelle méthode choisir
• Fusion profonde: copie profonde et fusion des objets
  • Fonction de fusion de profondeur personnalisée
• Conclusion

Méthode de fusion d'objets

1. ... Développer l'opérateur (

) est une méthode courante pour fusionner des objets en JavaScript. Sa forme est

. Lorsqu'il y a des attributs avec la même touche dans l'objet source, l'opérateur Expand écrase la valeur dans l'objet cible avec la valeur numérique de l'objet source le dernier. ... { ...object1, ...object2 }

2.

<code class="language-javascript">const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };

const combinedSettings = { ...defaults, ...userSettings };
console.log(combinedSettings);
// 输出：{ color: 'blue', size: 'medium' }</code>

est une autre méthode utilisée dans JavaScript pour fusionner les objets. Sa syntaxe est Object.assign(), où l'objet source est fusionné dans l'objet cible. Lorsqu'il y a des attributs avec la même clé dans l'objet source,

écrasera les valeurs de l'objet cible avec la valeur numérique de l'objet source le dernier.

Object.assign() Object.assign(target, source1, source2, ...) Object.assign() Traps et précautions

<code class="language-javascript">const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };

const combinedSettings = Object.assign({}, defaults, userSettings);
console.log(combinedSettings);
// 输出：{ color: 'blue', size: 'medium' }</code>

Voici les pièges et les problèmes qui peuvent être rencontrés lors de la fusion d'objets à l'aide de l'opérateur d'extension et de la méthode en javascript:

1.

Développer les opérateurs et

tous deux effectuent des copies peu profondes lors de la fusion d'objets. Cela signifie que l'objet imbriqué est toujours une référence à l'objet d'origine. La modification des objets imbriqués dans des objets fusionnés peut affecter l'objet d'origine, ce qui peut conduire à des effets secondaires inattendus. Object.assign()

Voir la profondeur de la profondeur ci-dessous.

2.

Lors de la fusion d'objets avec des propriétés de la même touche, l'opérateur d'extension et

écrasent les valeurs dans l'objet résultant avec la valeur numérique de l'objet source le dernier. S'il est géré mal, ce comportement peut entraîner une perte de données.

Object.assign() 3.

L'opérateur d'extension fait partie de ECMAScript 2015 (ES6) et n'est pas pris en charge dans des environnements JavaScript plus anciens ou des navigateurs tels que Internet Explorer. Cela peut entraîner des problèmes de compatibilité si votre code doit s'exécuter dans un environnement plus ancien. Dans ce cas, il est préférable d'utiliser

car il a un support plus large.

4. Object.assign() Développer les opérateurs et

ne copiera que les attributs énumérés de l'objet source à 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 une perte de données ou un comportement inattendu.

5.

Si vous avez besoin de fusionner de gros objets ou d'effectuer fréquemment des opérations de fusion, en utilisant Object.assign() ou en élargissant les opérateurs peut causer des problèmes de performance car de nouveaux objets sont créés pendant le processus de fusion.

6.

Copiez les attributs du prototype de l'objet source à l'objet cible, ce qui peut conduire à un comportement inattendu si le prototype de l'objet source a des propriétés qui entrent en conflit avec les propriétés de l'objet cible. D'un autre côté, l'opérateur d'extension ne copie pas les propriétés du prototype. Object.assign()

Assurez-vous de faire attention à ces pièges et problèmes lors de l'utilisation de l'opérateur d'extension ou

en JavaScript. Dans certains cas, vous devrez peut-être prendre d'autres méthodes, telles que le clonage profond ou les fonctions de fusion profonde, pour surmonter ces limitations.

Object.assign() Quelle méthode choisir?

Les opérateurs Object.assign()

et étendre les opérateurs peuvent fusionner efficacement les objets. L'opérateur Expand est plus simple et plus moderne, tandis que

est plus compatible avec les environnements JavaScript plus anciens. pour décider quelle méthode utiliser, considérez:

Object.assign() Si votre environnement prend en charge les opérateurs d'extension (tels que la dernière version ECMascript), utilisez-le car il est syntaxique. Object.assign()

Si la compatibilité avec les environnements JavaScript plus anciens est critique, sélectionnez

.

Si vous avez besoin de copier des objets imbriqués (objets coulés d'objets imbriqués intérieurs), lisez l'objet de copie profonde.
2. Object.assign() Fusion profonde: copie profonde et fusion des objets
élargir les opérateurs et

les deux créent des copies peu profondes de l'objet copié. Essentiellement, cela signifie que le nouvel objet fera référence aux mêmes objets imbriqués que l'objet d'origine (tels que les tableaux et les fonctions), plutôt qu'une copie d'eux.

Il est crucial de comprendre et d'éviter cela avant de fusionner des objets.

L'exemple suivant montre comment modifier un objet imbriqué d'un objet de copie affecte l'objet d'origine:

<code class="language-javascript">const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };

const combinedSettings = { ...defaults, ...userSettings };
console.log(combinedSettings);
// 输出：{ color: 'blue', size: 'medium' }</code>

La sortie de

ce code montre que la propriété shallowCopyPlanet de l'objet d'origine planet a été modifiée (vous ne le souhaitez peut-être pas). info.moons

Fonction de fusion de profondeur personnalisée

Il s'agit d'une fonction qui copie profondément plusieurs objets avant la fusion et renvoie un seul objet. Dans le code, la fonction

accepte n'importe quel nombre d'objets d'entrée, en crée une copie en profondeur à l'aide de la technique deepMergeObjects, puis utilise l'opération d'extension dans la méthode JSON.parse(JSON.stringify()) pour les faire correspondre. L'objet fusionné contiendra une copie en profondeur des propriétés de l'objet d'entrée. reduce()

<code class="language-javascript">const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };

const combinedSettings = Object.assign({}, defaults, userSettings);
console.log(combinedSettings);
// 输出：{ color: 'blue', size: 'medium' }</code>

Conclusion

Merci d'avoir lu! J'espère que cet article vous aidera à comprendre la fusion d'objets en JavaScript, pas seulement une simple introduction. Être capable de fusionner les objets devrait bien combiner avec vos compétences JavaScript et étendre vos capacités de codage. Si vous avez des questions ou des commentaires, veuillez rejoindre le Forum de la communauté SitePoint.

FAQ sur la fusion d'objets en javascript

Quel est le concept de fusion des objets en JavaScript?

La fusion d'objets dans JavaScript fait référence au processus de combinaison de deux objets ou plus dans un seul objet. Il s'agit généralement de fusionner les propriétés et les méthodes de plusieurs objets en un seul objet, afin que les données puissent être gérées et manipulées plus facilement. L'objet fusionné contiendra toutes les propriétés et méthodes de l'objet d'origine. S'il y a des propriétés en double, la valeur du dernier objet remplacera la valeur précédente.

Comment fusionner des objets en JavaScript à l'aide de l'opérateur d'extension?

L'opérateur d'extension (

) en JavaScript est un moyen moderne et efficace de fusionner des objets. Il permet l'expansion d'objets itérables tels que les expressions de tableau ou les chaînes pour une utilisation où il devrait être nul ou plus de paramètres ou d'éléments. Voici un exemple de la façon de l'utiliser: ...

<code class="language-javascript">const planet = {
  name: 'Earth',
  emoji: '?',
  info: {
    type: 'terrestrial',
    moons: 1
  }
};

// 使用展开运算符进行浅拷贝
const shallowCopyPlanet = { ...planet };

// 修改浅拷贝中的嵌套对象
shallowCopyPlanet.info.moons = 2;

console.log('原始行星：', planet.info.moons);
// 原始行星：2
console.log('行星的浅拷贝：', shallowCopyPlanet.info.moons);
// 行星的浅拷贝：2</code>

Quel est le rôle des méthodes dans la fusion d'objets? Object.assign()

La méthode est utilisée pour copier toutes les valeurs énumérées d'un ou plusieurs objets source à l'objet cible. Il renverra l'objet cible. C'est un moyen très utile de fusionner des objets car il vous permet de fusionner plusieurs objets source dans un seul objet cible. Cependant, il convient de noter que si la même propriété se trouve dans plusieurs objets, la valeur du dernier objet avec cette propriété remplacera la valeur précédente. Object.assign()

Puis-je fusionner des objets imbriqués en javascript?

Oui, vous pouvez fusionner des objets imbriqués en javascript. Cependant, ce processus est un peu plus compliqué car vous devez vous assurer que les objets imbriqués sont fusionnés correctement, pas seulement les propriétés de niveau supérieur. Ceci est souvent appelé fusion profonde. L'opérateur Object.assign() et l'opérateur d'extension n'effectuent pas de fusions profondes par défaut. Pour ce faire, vous devez implémenter des fonctions personnalisées ou utiliser des bibliothèques comme Lodash.

Que se passe-t-il lors de la fusion d'objets, de la répétition des attributs?

Lors de la fusion d'objets dans JavaScript, s'il existe des propriétés en double, la valeur du dernier objet remplacera la valeur précédente. En effet, lors de la fusion d'objets, il traverse les propriétés de l'objet source et les attribue à l'objet cible. Si un attribut existe déjà sur l'objet cible, sa valeur sera remplacée par la nouvelle valeur.

Est-il possible de fusionner des tableaux dans JavaScript comme la fusion d'objets?

Oui, les tableaux peuvent être fusionnés en JavaScript en utilisant une méthode similaire en tant qu'objet. Les opérateurs d'élargissement sont des moyens courants de fusionner les tableaux. Voici un exemple:

<code class="language-javascript">const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };

const combinedSettings = { ...defaults, ...userSettings };
console.log(combinedSettings);
// 输出：{ color: 'blue', size: 'medium' }</code>

Comment fusionner des objets sans modifier l'objet d'origine?

Les méthodes de l'opérateur

élargir et Object.assign() créent un nouvel objet lors de la fusion, laissant l'objet d'origine inchangé. Il s'agit d'une caractéristique clé de ces méthodes car elle favorise l'invariance, un concept de base dans la programmation fonctionnelle où les données ne changent jamais.

Puis-je fusionner des objets avec différents types de données en JavaScript?

Oui, vous pouvez fusionner des objets avec différents types de données dans JavaScript. L'objet fusionné contiendra toutes les propriétés et méthodes de l'objet d'origine quel que soit son type de données. Cependant, s'il existe des propriétés en double avec différents types de données, la valeur du dernier objet remplacera la valeur précédente.

Quel est l'impact des performances de la fusion des objets JavaScript?

La fusion des objets JavaScript peut avoir des impacts de performances, en particulier lorsqu'ils traitent de grands objets. La complexité temporelle de l'opérateur d'extension et de la méthode Object.assign() est O (n), où n est le nombre total de propriétés dans l'objet source. Par conséquent, lorsque vous décidez de fusionner des objets, il est important de considérer la taille de l'objet.

Quelles bibliothèques peuvent aider à fusionner des objets en JavaScript?

Oui, certaines bibliothèques peuvent aider à fusionner des objets en JavaScript. Lodash est une bibliothèque populaire qui fournit une gamme de fonctions utilitaires pour manipuler des objets et des tableaux, y compris des fonctions de fusion pour les objets de fusion profonde. Une autre bibliothèque est jQuery, qui fournit la méthode $.extend() pour fusionner les objets.

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!