Objet JavaScript – Congélation superficielle ou congélation profonde

La différence entre le gel superficiel et le gel profond réside dans la manière dont le comportement de gel est appliqué aux objets imbriqués. Voici une répartition des deux concepts :

---

1. Gel peu profond

• Définition : gèle uniquement les propriétés de niveau supérieur d'un objet.
• Comportement :
  • Empêche l'ajout, la suppression ou la modification des propriétés de niveau supérieur.
  • Ne pas gèle les objets imbriqués ; ils restent mutables.
• Exemple :

const shallowObject = {
    name: "Alice",
    details: { age: 25, city: "New York" },
};

Object.freeze(shallowObject);

// Top-level properties are immutable
shallowObject.name = "Bob"; // Ignored
shallowObject.newProp = "test"; // Ignored

// Nested objects are still mutable
shallowObject.details.age = 30; // Allowed

console.log(shallowObject);
// Output: { name: "Alice", details: { age: 30, city: "New York" } }

---

2. Congélation

• Définition : gèle l'objet ainsi que tous ses objets et tableaux imbriqués, de manière récursive.
• Comportement :
  • Garantit qu'aucune partie de l'objet (de niveau supérieur ou imbriqué) ne peut être modifiée.
• Exemple :

const deepObject = {
    name: "Alice",
    details: { age: 25, city: "New York" },
};

// Deep freeze function
function deepFreeze(object) {
    const propertyNames = Object.getOwnPropertyNames(object);
    for (const name of propertyNames) {
        const value = object[name];
        if (value && typeof value === 'object') {
            deepFreeze(value); // Recursively freeze
        }
    }
    return Object.freeze(object);
}

deepFreeze(deepObject);

// Neither top-level nor nested properties can be changed
deepObject.name = "Bob"; // Ignored
deepObject.details.age = 30; // Ignored

console.log(deepObject);
// Output: { name: "Alice", details: { age: 25, city: "New York" } }

---

Tableau de comparaison

Fonctionnalité Gel peu profond Congélation profonde ête>

Feature	Shallow Freeze	Deep Freeze
Scope	Only freezes top-level properties.	Freezes top-level and nested objects.
Nested Object Mutability	Mutable.	Immutable.
Implementation	Object.freeze(object).	Custom recursive function with Object.freeze().
Example Mutation	Modifications to nested objects are allowed.	No modifications allowed at any level.

Portée Gèle uniquement les propriétés de niveau supérieur. Gèle les objets de niveau supérieur et imbriqués. Mutabilité des objets imbriqués Mutable. Immuable. Mise en œuvre Objet.freeze(objet). Fonction récursive personnalisée avec Object.freeze(). Exemple de mutation Les modifications des objets imbriqués sont autorisées. Aucune modification autorisée à aucun niveau.

---

Cas d'utilisation

1. Gel peu profond :

   • Convient lorsque seules les propriétés de niveau supérieur doivent être immuables.
   • Exemples : Configurations où les propriétés imbriquées sont gérées indépendamment.

2. Congélation profonde :

   • Idéal lorsqu'une immuabilité complète est requise pour toute la hiérarchie des objets.
   • Exemples : Assurer la cohérence des données pour les objets profondément imbriqués dans la gestion des états.

Considérations

• Performances :
  • La congélation peut être coûteuse en calcul pour les objets volumineux ou profondément imbriqués.
• Références cycliques :
  • Si l'objet contient des références circulaires, vous devrez suivre les objets visités pour éviter une récursion infinie.

Gestion des références cycliques

Pour gérer les références cycliques, vous pouvez maintenir un WeakSet d'objets visités :

const shallowObject = {
    name: "Alice",
    details: { age: 25, city: "New York" },
};

Object.freeze(shallowObject);

// Top-level properties are immutable
shallowObject.name = "Bob"; // Ignored
shallowObject.newProp = "test"; // Ignored

// Nested objects are still mutable
shallowObject.details.age = 30; // Allowed

console.log(shallowObject);
// Output: { name: "Alice", details: { age: 30, city: "New York" } }

Cela empêche la récursion infinie pour les références cycliques.

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!