JavaScript Academy · Lektion

structuredClone för djupa kopior

Klona komplexa objekt på ett säkert sätt.

Lektion 4 av 413 steg

structuredClone för djupa kopior är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Problemet med djup kopiering

Spread och Object.assign skapar ytliga kopior: kapslade objekt delas via referenser. För att duplicera en kapslad struktur fullständigt behöver Ni en djup kopia.

structuredClone är den inbyggda lösningen.

Spread räcker inte

En spread-kopia delar kapslade objekt. Om Ni ändrar den kapslade delen av kopian påverkas även originalet.

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

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

structuredClone till undsättning

structuredClone kopierar hela strukturen rekursivt. Ändringar i klonen påverkar aldrig originalet.

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

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

Oberoende kapslade objekt

Efter kloningen är varje kapslat objekt en separat referens, så identitetsjämförelsen blir falsk på varje nivå.

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);

Kloning av arrayer

Även arrayer, inklusive kapslade arrayer, klonas på djupet. Om Ni lägger till ett element i en kapslad array i klonen förblir källan oförändrad.

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);

Hanterar Map och Set

Till skillnad från JSON.parse(JSON.stringify(...)) stöder structuredClone många inbyggda typer, däribland Map, Set och 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);

Hanterar cirkulära referenser

Ett självrefererande objekt förstör JSON-lösningen, men kan klonas utan problem med structuredClone.

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

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

Det som inte kan klonas

structuredClone kan inte kopiera funktioner eller DOM-noder; det kastar ett DataCloneError. Det tar också bort prototypkedjor och returnerar vanliga objekt.

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

Prototyper bevaras inte

En klonad klassinstans blir ett vanligt objekt: data kopieras, men metoderna och prototypen försvinner.

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 jämfört med JSON-lösningen

Den gamla lösningen JSON.parse(JSON.stringify(x)) förlorar undefined, datum blir strängar och den misslyckas vid cykler. structuredClone undviker dessa problem för serialiserbara data.

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);

Varför det spelar roll

structuredClone ger en tillförlitlig, inbyggd djup kopia för vanliga data och ersätter sköra egenbyggda kopior. Använd den när Ni behöver en helt oberoende kopia av kapslat tillstånd, och kom ihåg att funktioner och prototyper tas bort.

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);

Snabbtest

Varför ska Ni använda structuredClone i stället för spread-operatorn för kapslade data?

Besvara frågan i den interaktiva lektionen

Sammanfattning: structuredClone

Ni har lärt er tillförlitlig djup kopiering:

Spread är ytlig; structuredClone kopierar på djupet.
Den stöder Map, Set, Date och cirkulära referenser.
Den kan inte klona funktioner eller DOM-noder och tar bort prototyper.
Den är ett säkrare alternativ till lösningen JSON.parse(JSON.stringify()).

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”structuredClone för djupa kopior” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”structuredClone för djupa kopior”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”structuredClone för djupa kopior”?

Klona komplexa objekt på ett säkert sätt. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”structuredClone för djupa kopior”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy