JavaScript Structured Clone: Mestring av dyp objektkopiering

I JavaScript er det en vanlig oppgave å lage kopier av objekter og arrays. Mens enkel tilordning (`=`) fungerer for primitive verdier, skaper den bare en referanse for objekter. Dette betyr at endringer i det kopierte objektet også vil påvirke originalen. For å lage uavhengige kopier, trenger vi en mekanisme for dyp kopiering. Structured clone-algoritmen gir en kraftig og allsidig måte å oppnå dette på, spesielt når man håndterer komplekse datastrukturer.

Hva er Structured Clone?

'Structured clone'-algoritmen er en innebygd mekanisme i JavaScript som lar deg lage dype kopier av JavaScript-verdier. I motsetning til enkel tilordning eller grunne kopieringsmetoder (som `Object.assign()` eller spredningssyntaksen `...`), lager 'structured cloning' helt nye objekter og arrays, og kopierer rekursivt alle nestede egenskaper. Dette sikrer at det kopierte objektet er fullstendig uavhengig av originalen.

Denne algoritmen brukes også 'under panseret' for kommunikasjon mellom web workers og ved lagring av data ved hjelp av History API. Å forstå hvordan den fungerer kan hjelpe deg med å optimalisere koden din og unngå uventet oppførsel.

Hvordan Structured Clone fungerer

'Structured clone'-algoritmen fungerer ved å traversere objektgrafen og lage nye instanser av hvert objekt og array den møter. Den håndterer ulike datatyper, inkludert:

• Primitive typer (tall, strenger, booleans, null, undefined) - kopieres som verdi.
• Objekter og arrays - klones rekursivt.
• Datoer - klones som nye Date-objekter med samme tidsstempel.
• Regulære uttrykk - klones som nye RegExp-objekter med samme mønster og flagg.
• Blobs og File-objekter - klones (men kan innebære lesing av hele filens data).
• ArrayBuffers og TypedArrays - klones ved å kopiere de underliggende binære dataene.
• Maps og Sets - klones rekursivt, og skaper nye Maps og Sets med klonede nøkler og verdier.

Algoritmen håndterer også sirkulære referanser, noe som forhindrer uendelig rekursjon.

Bruk av Structured Clone

Selv om det ikke finnes en direkte `structuredClone()`-funksjon i alle JavaScript-miljøer (eldre nettlesere kan mangle innebygd støtte), brukes den underliggende mekanismen i ulike sammenhenger. En vanlig måte å få tilgang til den på er gjennom `postMessage`-API-et som brukes for kommunikasjon mellom web workers eller iframes.

Metode 1: Bruk av `postMessage` (Anbefalt for bred kompatibilitet)

Denne tilnærmingen utnytter `postMessage`-API-et, som internt bruker 'structured clone'-algoritmen. Vi oppretter en midlertidig iframe, sender objektet til den med `postMessage`, og mottar det deretter tilbake.

            function structuredClone(obj) {
  return new Promise(resolve => {
    const { port1, port2 } = new MessageChannel();
    port1.onmessage = ev => resolve(ev.data);
    port2.postMessage(obj);
  });
}

// Eksempel på bruk
const originalObject = { 
  name: "John Doe",
  age: 30, 
  address: { city: "New York", country: "USA" }
};

async function deepCopyExample() {
  const clonedObject = await structuredClone(originalObject);

  console.log("Originalt objekt:", originalObject);
  console.log("Klonet objekt:", clonedObject);

  // Endre det klonede objektet
  clonedObject.address.city = "Los Angeles";

  console.log("Originalt objekt (etter endring):", originalObject); // Uendret
  console.log("Klonet objekt (etter endring):", clonedObject); // Endret
}

deepCopyExample();

            

              
                Copy
              
            
          

Denne metoden er bredt kompatibel på tvers av ulike nettlesere og miljøer.

Metode 2: Innebygd `structuredClone` (Moderne miljøer)

Mange moderne JavaScript-miljøer tilbyr nå en innebygd `structuredClone()`-funksjon direkte. Dette er den mest effektive og enkleste måten å utføre en dyp kopi på når den er tilgjengelig.

            // Sjekk om structuredClone er støttet
if (typeof structuredClone === 'function') {
  const originalObject = { 
    name: "Alice Smith",
    age: 25, 
    address: { city: "London", country: "UK" }
  };

  const clonedObject = structuredClone(originalObject);

  console.log("Originalt objekt:", originalObject);
  console.log("Klonet objekt:", clonedObject);

  // Endre det klonede objektet
  clonedObject.address.city = "Paris";

  console.log("Originalt objekt (etter endring):", originalObject); // Uendret
  console.log("Klonet objekt (etter endring):", clonedObject); // Endret
}
else {
  console.log("structuredClone støttes ikke i dette miljøet. Bruk postMessage-polyfill.");
}

            

              
                Copy
              
            
          

Før du bruker `structuredClone`, er det viktig å sjekke om den støttes i mål-miljøet. Hvis ikke, fall tilbake til `postMessage`-polyfillen eller et annet alternativ for dyp kopiering.

Begrensninger med Structured Clone

Selv om den er kraftig, har 'structured clone' noen begrensninger:

• Funksjoner: Funksjoner kan ikke klones. Hvis et objekt inneholder en funksjon, vil den gå tapt under kloningsprosessen. Egenskapen vil bli satt til `undefined` i det klonede objektet.
• DOM-noder: DOM-noder (som elementer på en nettside) kan ikke klones. Et forsøk på å klone dem vil resultere i en feil.
• Feil: Visse feilobjekter kan heller ikke klones, og 'structured clone'-algoritmen kan kaste en feil hvis den støter på dem.
• Prototyp-kjeder: Prototyp-kjeden til objekter bevares ikke. Klonede objekter vil ha `Object.prototype` som sin prototyp.
• Ytelse: Dyp kopiering kan være beregningsmessig kostbart, spesielt for store og komplekse objekter. Vurder ytelseskonsekvensene ved bruk av 'structured clone', spesielt i ytelseskritiske applikasjoner.

Når bør man bruke Structured Clone

'Structured clone' er verdifull i flere scenarioer:

• Web Workers: Når data sendes mellom hovedtråden og web workers, er 'structured clone' den primære mekanismen.
• History API: Metodene `history.pushState()` og `history.replaceState()` bruker 'structured clone' for å lagre data i nettleserens historikk.
• Dyp kopiering av objekter: Når du trenger å lage en fullstendig uavhengig kopi av et objekt, gir 'structured clone' en pålitelig løsning. Dette er spesielt nyttig når du vil endre kopien uten å påvirke originalen.
• Serialisering og deserialisering: Selv om det ikke er dens primære formål, kan 'structured clone' brukes som en grunnleggende form for serialisering og deserialisering (selv om JSON vanligvis foretrekkes for persistens).

Alternativer til Structured Clone

Hvis 'structured clone' ikke er egnet for dine behov (f.eks. på grunn av begrensningene eller ytelseshensyn), kan du vurdere disse alternativene:

• JSON.parse(JSON.stringify(obj)): Dette er en vanlig tilnærming for dyp kopiering, men den har begrensninger. Den fungerer bare for objekter som kan serialiseres til JSON (ingen funksjoner, Datoer konverteres til strenger, etc.) og kan være tregere enn 'structured clone' for komplekse objekter.
• Lodash's `_.cloneDeep()`: Lodash tilbyr en robust `cloneDeep()`-funksjon som håndterer mange spesialtilfeller og gir god ytelse. Det er et godt alternativ hvis du allerede bruker Lodash i prosjektet ditt.
• Egendefinert dyp kopieringsfunksjon: Du kan skrive din egen funksjon for dyp kopiering ved hjelp av rekursjon. Dette gir deg full kontroll over kloningsprosessen, men krever mer innsats og kan være utsatt for feil. Sørg for at du håndterer sirkulære referanser korrekt.

Praktiske eksempler og bruksområder

Eksempel 1: Kopiering av brukerdata før endring

Se for deg at du bygger en applikasjon for brukeradministrasjon. Før du lar en bruker redigere profilen sin, vil du kanskje lage en dyp kopi av de nåværende dataene deres. Dette lar deg gå tilbake til de opprinnelige dataene hvis brukeren avbryter redigeringen eller hvis det oppstår en feil under oppdateringsprosessen.

            let userData = {
  id: 12345,
  name: "Carlos Rodriguez",
  email: "carlos.rodriguez@example.com",
  preferences: {
    language: "es",
    theme: "dark"
  }
};

async function editUser(newPreferences) {
  // Lag en dyp kopi av de opprinnelige dataene
  const originalUserData = await structuredClone(userData);

  try {
    // Oppdater brukerdataene med de nye preferansene
    userData.preferences = newPreferences;

    // ... Lagre de oppdaterte dataene til serveren ...

    console.log("Brukerdata oppdatert!");
  } catch (error) {
    console.error("Feil ved oppdatering av brukerdata. Går tilbake til opprinnelige data.", error);
    // Gå tilbake til de opprinnelige dataene
    userData = originalUserData;
  }
}

// Eksempel på bruk
editUser({ language: "en", theme: "light" });

            

              
                Copy
              
            
          

Eksempel 2: Sende data til en Web Worker

Web workers lar deg utføre beregningsintensive oppgaver i en separat tråd, noe som forhindrer at hovedtråden slutter å respondere. Når du sender data til en web worker, må du bruke 'structured clone' for å sikre at dataene blir overført korrekt.

            // Hovedtråd
const worker = new Worker('worker.js');

let dataToSend = {
  numbers: [1, 2, 3, 4, 5],
  text: "Prosesser disse dataene i workeren."
};

worker.postMessage(dataToSend);

worker.onmessage = (event) => {
  console.log("Mottatt fra worker:", event.data);
};

// worker.js (Web Worker)
self.onmessage = (event) => {
  const data = event.data;
  console.log("Worker mottok data:", data);

  // ... Utfør litt prosessering på dataene ...
  const processedData = data.numbers.map(n => n * 2);

  self.postMessage(processedData);
};

            

              
                Copy
              
            
          

Beste praksis for bruk av Structured Clone

• Forstå begrensningene: Vær klar over hvilke datatyper som ikke kan klones (funksjoner, DOM-noder, etc.) og håndter dem på en passende måte.
• Vurder ytelse: For store og komplekse objekter kan 'structured clone' være tregt. Evaluer om det er den mest effektive løsningen for dine behov.
• Sjekk for støtte: Hvis du bruker den innebygde `structuredClone()`-funksjonen, sjekk om den støttes i mål-miljøet. Bruk en polyfill om nødvendig.
• Håndter sirkulære referanser: 'Structured clone'-algoritmen håndterer sirkulære referanser, men vær oppmerksom på dem i datastrukturene dine.
• Unngå å klone unødvendige data: Klon kun de dataene du faktisk trenger å kopiere. Unngå å klone store objekter eller arrays hvis bare en liten del av dem skal endres.

Konklusjon

JavaScript 'structured clone'-algoritmen er et kraftig verktøy for å lage dype kopier av objekter og arrays. Ved å forstå dens kapabiliteter og begrensninger kan du bruke den effektivt i ulike scenarioer, fra kommunikasjon med web workers til dyp objektkopiering. Ved å vurdere alternativene og følge beste praksis, kan du sikre at du bruker den mest passende metoden for dine spesifikke behov.

Husk å alltid vurdere ytelseskonsekvensene og velge riktig tilnærming basert på kompleksiteten og størrelsen på dataene dine. Ved å mestre 'structured clone' og andre teknikker for dyp kopiering, kan du skrive mer robust og effektiv JavaScript-kode.

Videre lesing

• MDN Web Docs: Structured clone-algoritmen
• MDN Web Docs: structuredClone
• MDN Web Docs: Worker.postMessage()