Maison >interface Web >js tutoriel >Comment cloner parfaitement des objets JavaScript ?

Comment cloner parfaitement des objets JavaScript ?

Patricia Arquette
Patricia Arquetteoriginal
2024-12-26 20:50:21576parcourir

How to Perfectly Clone JavaScript Objects?

Comment dupliquer avec précision des objets JavaScript

Les méthodes intégrées de JavaScript ne peuvent pas garantir la duplication précise des objets. Cela est dû à la présence de propriétés dérivées de prototypes et d'attributs cachés, qui peuvent conduire à des résultats imprévus lors du clonage. Pour résoudre ce problème, diverses approches ont été développées.

Mise à jour 2022 : clonage structuré

Une nouvelle norme JS appelée clonage structuré offre une solution simple. Il est pris en charge par de nombreux navigateurs modernes et permet une duplication précise avec la syntaxe suivante :

const clone = structuredClone(object);

Approche traditionnelle

Dans les versions précédentes de JavaScript, une fonction de clonage personnalisée peut être implémenté en suivant les étapes suivantes :

  1. Gestion des propriétés non énumérables : utilisez la méthode hasOwnProperty pour ignorer les propriétés du prototype et concentrez-vous sur ceux directement définis sur l'objet.
  2. Clonage d'attributs non énumérables : copiez explicitement les propriétés cachées si leurs noms sont connus, comme prototype ou __proto__.
  3. Configuration de l'héritage du prototype : assurez-vous que le prototype de l'objet copié correspond à l'original. Cela peut nécessiter une configuration manuelle ou l'appel du constructeur de l'objet source.
  4. Gestion des structures de données non énumérables : une gestion spécifique est nécessaire pour les structures de données avec des membres non énumérables, telles que les objets Date.
  5. Gestion des structures cycliques : évitez la récursion infinie en suivant les objets visités et en partageant les références au lieu du clonage profond.

Un exemple de clonage La fonction qui répond à ces défis est fournie ci-dessous :

function clone(obj) {
    if (null == obj || "object" != typeof obj) return obj;

    // Handing different object types
    // ... implementation for Date, Array, and Object

    // Generic fallback: deep copy properties
    var copy = {};
    for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
    }
    return copy;
}

Cette fonction suppose que l'objet forme une structure arborescente et ne contient aucune référence cyclique. La gestion des structures cycliques nécessite une approche plus complexe.

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