Comment cloner correctement un objet JavaScript ?

Comment cloner avec précision un objet JavaScript

La duplication d'un objet en JavaScript est essentielle pour maintenir l'intégrité des données et éviter des modifications inattendues. Cependant, la création d’une simple copie d’un objet peut introduire par inadvertance des modifications involontaires. Voici un guide complet pour garantir un clonage d'objet réussi en JavaScript :

Clonage structuré (solution moderne) :

Pour les derniers navigateurs, clonage structuré (introduit dans ES2020) offre une solution simple et fiable :

const clone = structuredClone(object);

Cette méthode génère une copie précise de l'objet, y compris tous ses propriétés, sans aucun extra indésirable.

Approche traditionnelle :

Pour les versions antérieures du navigateur, le clonage d'un objet nécessite un processus plus complexe :

Évitez les raccourcis :

La copie d'objets dérivés d'objets JavaScript intégrés peut conduire à l'introduction de propriétés supplémentaires. Pour éviter cela, clonez uniquement les objets construits de manière littérale.

Gérer l'héritage du prototype :

Les nouveaux objets héritent généralement des propriétés de leur prototype. Pour imiter ce comportement, vous devez transférer manuellement les propriétés héritées vers l'objet cloné.

Filtrer les attributs non locaux :

Les propriétés non énumérables ne sont pas héritées par défaut . Utilisez la méthode hasOwnProperty pour filtrer ces attributs du prototype.

Considérez les propriétés cachées :

Certains objets ont des propriétés cachées, telles que prototype et __proto__, qui ne sont pas accessible par énumération. Ces propriétés doivent être gérées individuellement.

Traitement des objets date :

Les objets date ont une propriété de données masquée qui contient la valeur de date. Pour conserver la même date, appelez setTime sur l'objet Date cloné. Notez que cette approche est spécifique aux objets Date.

Types de données complexes :

Si votre objet contient des types de données complexes comme des tableaux ou d'autres objets, ceux-ci doivent également être clonés récursivement pour garantir une copie complète.

Clonage Fonction :

Voici une fonction de clonage complète qui suit ces principes :

function clone(obj) {
    if (null == obj || "object" != typeof obj) return obj;
    var copy = obj.constructor();
    for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
    }
    return copy;
}

Limitations :

Il est important de noter que cela La fonction suppose un ensemble limité de types de données et ne gère pas les références cycliques ou les objets avec des propriétés cachées au-delà de celles mentionnées.

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!