JavaScript Academy · Lezione

structuredClone per copie profonde

Cloni in sicurezza oggetti complessi.

structuredClone per copie profonde è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Il problema della copia profonda

Spread e Object.assign creano copie superficiali: gli oggetti annidati vengono condivisi tramite riferimento. Per duplicare completamente una struttura annidata serve una copia profonda.

structuredClone è la soluzione integrata.

Perché Spread non basta

Una copia ottenuta con spread condivide gli oggetti annidati. Modificare la parte annidata della copia influisce anche sull'originale.

const original = { user: { name: 'Ada' } };
const shallow = { ...original };

shallow.user.name = 'Grace';
console.log(original.user.name);

structuredClone in soccorso

structuredClone copia ricorsivamente l'intera struttura. Le modifiche al clone non influiscono mai sull'originale.

const original = { user: { name: 'Ada' } };
const deep = structuredClone(original);

deep.user.name = 'Grace';
console.log(original.user.name);
console.log(deep.user.name);

Oggetti annidati indipendenti

Dopo la clonazione, ogni oggetto annidato è un riferimento distinto, quindi il confronto d'identità restituisce false a ogni livello.

const original = { a: { b: { c: 1 } } };
const clone = structuredClone(original);

console.log(original === clone);
console.log(original.a === clone.a);
console.log(original.a.b === clone.a.b);

Clonare gli array

Anche gli array, compresi quelli annidati, vengono clonati in profondità. Aggiungere un elemento a un array annidato del clone non modifica la sorgente.

const original = { tags: ['a', 'b'], meta: { nested: [1] } };
const clone = structuredClone(original);

clone.meta.nested.push(2);
console.log(original.meta.nested);
console.log(clone.meta.nested);

Gestisce Map e Set

A differenza di JSON.parse(JSON.stringify(...)), structuredClone supporta molti tipi integrati, tra cui Map, Set e Date.

const original = { items: new Set([1, 2, 3]), when: new Date(0) };
const clone = structuredClone(original);

clone.items.add(4);
console.log([...original.items]);
console.log([...clone.items]);
console.log(clone.when instanceof Date);

Gestisce i riferimenti circolari

Un oggetto che fa riferimento a se stesso interrompe il metodo basato su JSON, ma viene clonato correttamente con structuredClone.

const node = { name: 'root' };
node.self = node;

const clone = structuredClone(node);
console.log(clone.name);
console.log(clone.self === clone);

Cosa non può clonare

structuredClone non può copiare funzioni o nodi DOM; genera un DataCloneError. Inoltre elimina le catene di prototipi e restituisce oggetti semplici.

try {
  structuredClone({ fn: () => 1 });
} catch (e) {
  console.log(e.name);
}

I prototipi non vengono conservati

Un'istanza di classe clonata diventa un oggetto semplice: i dati vengono copiati, ma i metodi e il prototipo vanno persi.

class Point {
  constructor(x) { this.x = x; }
  show() { return this.x; }
}
const p = new Point(5);
const clone = structuredClone(p);

console.log(clone.x);
console.log(clone instanceof Point);

structuredClone contro il metodo basato su JSON

Il vecchio metodo JSON.parse(JSON.stringify(x)) perde undefined, converte le date in stringhe e non funziona con i cicli. structuredClone evita questi problemi con i dati serializzabili.

const data = { when: new Date(0), missing: undefined, n: 5 };
const viaJson = JSON.parse(JSON.stringify(data));
const viaClone = structuredClone(data);

console.log(typeof viaJson.when);
console.log(viaClone.when instanceof Date);

Perché è importante

structuredClone offre una copia profonda affidabile e integrata per i dati semplici, sostituendo le fragili implementazioni manuali. Lo utilizzi quando serve una copia completamente indipendente di uno stato annidato e ricordi che rimuove funzioni e prototipi.

const state = { list: [{ id: 1 }], settings: { theme: 'dark' } };
const snapshot = structuredClone(state);
snapshot.list[0].id = 99;
console.log(state.list[0].id);
console.log(snapshot.list[0].id);

Verifica rapida

Perché usare structuredClone invece dell'operatore spread per i dati annidati?

Riepilogo: structuredClone

Ha imparato a eseguire copie profonde affidabili:

Spread esegue una copia superficiale; structuredClone copia in profondità.
Supporta Map, Set, Date e i riferimenti circolari.
Non può clonare funzioni o nodi DOM e rimuove i prototipi.
È un'alternativa più sicura al metodo basato su JSON.parse(JSON.stringify()).

Domande Frequenti

La lezione «structuredClone per copie profonde» è gratuita?

Sì — il testo completo di «structuredClone per copie profonde» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «structuredClone per copie profonde»?

Cloni in sicurezza oggetti complessi. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «structuredClone per copie profonde»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy