Comment cloner en profondeur des tableaux d'objets en JavaScript ?

Clonage de tableaux d'objets en JavaScript : une exploration approfondie

Le défi

Créer une copie approfondie d'un Un tableau d'objets contenant des références à d'autres objets au sein du tableau peut être une tâche complexe en JavaScript. Le simple clonage du tableau ne fait que copier les références, ce qui entraîne des modifications dans un tableau affectant l'autre.

structuredClone : une solution moderne

La méthode la plus récente et préférée pour les cloner un tableau en JavaScript consiste à utiliser structuredClone :

array2 = structuredClone(array1);

Cette fonction est disponible dans les navigateurs modernes (Chrome 98, Firefox 94) mais nécessite un polyfill pour une compatibilité plus large.

Clonage profond basé sur JSON

Pour une large prise en charge des navigateurs, des techniques basées sur JSON peuvent être utilisées.

Utiliser JSON.parse et JSON.stringify

Si vos objets sont JSON-sérialisable, vous pouvez utiliser JSON.parse et JSON.stringify pour le clonage en profondeur. Cependant, cette méthode présente des avantages et des inconvénients :

Avantages

• Clone à la fois le tableau et son contenu.
• Simple sur une seule ligne solution.

Inconvénients

• Fonctionne uniquement sur les objets sérialisables JSON.
• Les performances sont plus lentes que l'utilisation de l'opérateur de propagation.

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

Utilisation de l'opérateur Spread avec .map

Pour le clonage superficiel dans les navigateurs modernes, l'opérateur spread combiné à .map peut être plus performant :

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

Avantages

• Plus rapide que le clonage basé sur JSON.
• Fonctionne sur tous les types de objets.

Inconvénients

• Effectue uniquement un clone superficiel (clone le premier niveau de l'objet).

Benchmark : la méthode de propagation est nettement plus rapide que le clonage basé sur JSON pour un tableau de 20 objets avec une profondeur d'imbrication de 2.

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!