Au revoir `JSON.stringify()` et `{...obj}`, bonjour `structuredClone()` !

• Qu'est-ce que structuredClone() ?

  • structuréClone() est une fonction globale introduite en 2022 qui permet le clonage en profondeur d'objets JavaScript. Contrairement aux méthodes traditionnelles comme JSON.stringify() et JSON.parse(), qui ont du mal avec les structures complexes et les références circulaires, structuredClone() gère ces défis sans effort.

• Pourquoi cela change-t-il la donne ?

  • C'est un outil robuste pour créer de véritables clones profonds, préservant l'intégrité des objets imbriqués et des références circulaires sans avoir besoin de logique ou de solutions de contournement supplémentaires. De plus, il est disponible dans les environnements modernes, y compris les Web Workers.

---

1. Clonage d'objet simple : les bases

• Utilisation de {...obj} (copie superficielle)

  const original = { name: "Alice", details: { age: 25 } };
  const shallowCopy = { ...original };

  shallowCopy.details.age = 30;

  console.log(original.details.age); // 30
  console.log(shallowCopy.details.age); // 30

• Que se passe-t-il ?

  • L'opérateur spread {...obj} crée uniquement une copie superficielle. L'objet détails n'est pas profondément cloné, donc les modifications apportées à ShallowCopy.details affectent également les détails d'origine.
  • Utilisation de JSON.stringify() + JSON.parse() (Deep Copy)

  const original = { name: "Alice", details: { age: 25 } };
  const deepCopy = JSON.parse(JSON.stringify(original));

  deepCopy.details.age = 30;

  console.log(original.details.age); // 25
  console.log(deepCopy.details.age); // 30

• Que se passe-t-il ?

  • Cette méthode crée une copie complète, mais elle a des limites : elle ne peut pas gérer les fonctions, les références non définies ou circulaires.
  • Utilisation de structuredClone() (Deep Copy)

  const original = { name: "Alice", details: { age: 25 } };
  const clone = structuredClone(original);

  clone.details.age = 30;

  console.log(original.details.age); // 25
  console.log(clone.details.age); // 30

• Que se passe-t-il ?
  • structuréClone() crée un clone profond, préservant la structure sans aucune des limitations de JSON.stringify() et gérant des types de données complexes comme les références circulaires et non définies.

---

2. Gérer les références circulaires : un défi

• Référence circulaire avec {...obj}

  const original = { name: "Alice" };
  original.self = original;

  // This will cause an error:
  const shallowCopy = { ...original }; // TypeError: Converting circular structure to JSON

• Que se passe-t-il ?

  • {...obj} ne peut pas gérer les références circulaires, ce qui entraîne une erreur.
  • Référence circulaire avec JSON.stringify()

  const original = { name: "Alice" };
  original.self = original;

  // This will cause an error:
  const jsonCopy = JSON.parse(JSON.stringify(original)); // TypeError: Converting circular structure to JSON

• Que se passe-t-il ?

  • JSON.stringify() échoue également avec les références circulaires, générant une erreur.
  • Référence circulaire avec structuredClone()

  const original = { name: "Alice" };
  original.self = original;

  const clone = structuredClone(original);

  console.log(clone !== original); // true
  console.log(clone.self === clone); // true

• Que se passe-t-il ?
  • structuredClone() gère de manière transparente les références circulaires, créant un clone profond approprié sans erreurs.

---

3. Clonage avec fonctions et non défini : un autre test

• Utilisation de {...obj}

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const shallowCopy = { ...original };

  console.log(shallowCopy.greet()); // "Hello!"
  console.log(shallowCopy.value); // undefined

• Que se passe-t-il ?

  • {...obj} copie les fonctions et non définies comme prévu, mais seulement superficiellement.
  • Utilisation de JSON.stringify()

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const jsonCopy = JSON.parse(JSON.stringify(original));

  console.log(jsonCopy.greet); // undefined
  console.log(jsonCopy.value); // undefined

• Que se passe-t-il ?

  • JSON.stringify() ne peut pas sérialiser les fonctions ou non définies, ce qui entraîne leur perte dans l'objet cloné.
  • Utilisation de structuredClone()

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const clone = structuredClone(original);

  console.log(clone.greet); // undefined
  console.log(clone.value); // undefined

• Que se passe-t-il ?
  • structuréClone() ne clone pas non plus les fonctions mais préserve les valeurs non définies, ce qui le rend plus fiable que JSON.stringify() pour les objets complexes.

---

4. Vitesse et efficacité : une note de performance

• Efficacité avec les données volumineuses

  const largeArray = new Array(1e6).fill({ key: "value" });

  console.time("structuredClone");
  const clone = structuredClone(largeArray);
  console.timeEnd("structuredClone");

  console.time("JSON.stringify + JSON.parse");
  const jsonCopy = JSON.parse(JSON.stringify(largeArray));
  console.timeEnd("JSON.stringify + JSON.parse");

• Que se passe-t-il ?
  • structuréClone() est souvent plus rapide que JSON.stringify() + JSON.parse() pour les données volumineuses et complexes, et évite les pièges de la sérialisation et de la désérialisation.

---

5. Conclusion : Pourquoi structuredClone() est l'avenir

• Fiabilité : gère les références circulaires, les fonctions et les valeurs non définies de manière plus prévisible.
• Efficacité : effectue un clonage en profondeur plus rapidement pour les grands ensembles de données et ne nécessite aucune solution de contournement.
• Simplicité : une méthode pour les gouverner tous : plus besoin de choisir entre {...obj}, JSON.stringify() ou des fonctions de clonage profond personnalisé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!