Maison >interface Web >js tutoriel >Comment cloner en profondeur un tableau d'objets en JavaScript ?

Comment cloner en profondeur un tableau d'objets en JavaScript ?

Linda Hamilton
Linda Hamiltonoriginal
2024-12-13 04:59:10123parcourir

How to Deep Clone an Array of Objects in JavaScript?

Comment cloner un tableau d'objets en JavaScript ?

Lorsque vous traitez des structures de données complexes en JavaScript, il est souvent utile de créer une copie complète d'un tableau au lieu de une référence superficielle. Cela garantit que les modifications apportées à la copie clonée n'affectent pas le tableau d'origine et vice versa.

Création d'une copie approfondie

Utilisation de structuredClone

Le moderne L'approche du clonage profond d'un tableau utilise la méthode structuréClone :

array2 = structuredClone(array1);

Cette méthode est prise en charge dans la plupart des systèmes modernes. navigateurs, fournissant un mécanisme de clonage profond fiable.

Utilisation de JSON.parse

Si structuredClone n'est pas disponible, vous pouvez utiliser une technique basée sur JSON :

let clonedArray = JSON.parse(JSON.stringify(nodesArray))

Ceci L'approche fonctionne pour les objets sérialisables JSON, ce qui signifie qu'ils peuvent être convertis en chaîne JSON et inversement. Cependant, il peut ne pas convenir aux objets complexes dotés de fonctions ou à certains types de données.

Utilisation de l'opérateur Spread et de la carte

Pour les objets peu profonds, l'utilisation de l'opérateur spread combiné à la carte peut offrir de meilleures performances :

clonedArray = nodesArray.map(a => ({...a}))

Cette technique crée un nouvel objet pour chaque élément du tableau, garantissant que les modifications apportées au clone n'affectent pas l'original.

Choisir la bonne approche

La meilleure approche pour cloner un tableau d'objets dépend de vos besoins spécifiques. Pour une copie complète fiable, structuredClone est recommandé. Pour les objets sérialisables JSON, JSON.parse et JSON.stringify fournissent une option flexible. Pour les objets peu profonds, l'opérateur de propagation et la méthode map offrent de meilleures performances.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn