JavaScript Structured Clone: Behersk dyb objektkopiering

I JavaScript er det en almindelig opgave at oprette kopier af objekter og arrays. Mens simpel tildeling (`=`) virker for primitive værdier, opretter den kun en reference for objekter. Dette betyder, at ændringer i det kopierede objekt også vil påvirke originalen. For at skabe uafhængige kopier har vi brug for en mekanisme til dyb kopiering. 'Structured clone'-algoritmen tilbyder en kraftfuld og alsidig måde at opnå dette på, især når man arbejder med komplekse datastrukturer.

Hvad er Structured Clone?

'Structured clone'-algoritmen er en indbygget mekanisme i JavaScript, der giver dig mulighed for at oprette dybe kopier af JavaScript-værdier. I modsætning til simpel tildeling eller metoder til overfladisk kopiering (som `Object.assign()` eller spread-syntaksen `...`), skaber 'structured cloning' helt nye objekter og arrays ved rekursivt at kopiere alle indlejrede egenskaber. Dette sikrer, at det kopierede objekt er fuldstændig uafhængigt af originalen.

Denne algoritme bruges også 'under motorhjelmen' til kommunikation mellem web workers og ved lagring af data ved hjælp af History API'en. At forstå, hvordan den virker, kan hjælpe dig med at optimere din kode og undgå uventet adfærd.

Hvordan Structured Clone virker

'Structured clone'-algoritmen fungerer ved at gennemgå objektgrafen og skabe nye instanser af hvert objekt og array, den støder på. Den håndterer forskellige datatyper, herunder:

• Primitive typer (tal, strenge, booleans, null, undefined) - kopieres efter værdi.
• Objekter og Arrays - klones rekursivt.
• Datoer - klones som nye Date-objekter med samme tidsstempel.
• Regulære udtryk - klones som nye RegExp-objekter med samme mønster og flag.
• Blobs og File-objekter - klones (men kan involvere læsning af hele fildataen).
• ArrayBuffers og TypedArrays - klones ved at kopiere de underliggende binære data.
• Maps og Sets - klones rekursivt og skaber nye Maps og Sets med klonede nøgler og værdier.

Algoritmen håndterer også cirkulære referencer, hvilket forhindrer uendelig rekursion.

Brug af Structured Clone

Selvom der ikke findes en direkte `structuredClone()`-funktion i alle JavaScript-miljøer (ældre browsere kan mangle indbygget understøttelse), bruges den underliggende mekanisme i forskellige sammenhænge. En almindelig måde at tilgå den på er via `postMessage`-API'en, som bruges til kommunikation mellem web workers eller iframes.

Metode 1: Brug af `postMessage` (Anbefales for bred kompatibilitet)

Denne tilgang udnytter `postMessage`-API'en, som internt bruger 'structured clone'-algoritmen. Vi opretter en midlertidig iframe, sender objektet til den ved hjælp af `postMessage` og modtager det derefter tilbage.

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

// Example Usage
const originalObject = { 
  name: "John Doe",
  age: 30, 
  address: { city: "New York", country: "USA" }
};

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

  console.log("Original Object:", originalObject);
  console.log("Cloned Object:", clonedObject);

  // Modify the cloned object
  clonedObject.address.city = "Los Angeles";

  console.log("Original Object (after modification):", originalObject); // Unchanged
  console.log("Cloned Object (after modification):", clonedObject); // Modified
}

deepCopyExample();

            

              
                Copy
              
            
          

Denne metode er bredt kompatibel på tværs af forskellige browsere og miljøer.

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

Mange moderne JavaScript-miljøer tilbyder nu en indbygget `structuredClone()`-funktion direkte. Dette er den mest effektive og ligetil måde at udføre en dyb kopi på, når den er tilgængelig.

            // Check if structuredClone is supported
if (typeof structuredClone === 'function') {
  const originalObject = { 
    name: "Alice Smith",
    age: 25, 
    address: { city: "London", country: "UK" }
  };

  const clonedObject = structuredClone(originalObject);

  console.log("Original Object:", originalObject);
  console.log("Cloned Object:", clonedObject);

  // Modify the cloned object
  clonedObject.address.city = "Paris";

  console.log("Original Object (after modification):", originalObject); // Unchanged
  console.log("Cloned Object (after modification):", clonedObject); // Modified
}
else {
  console.log("structuredClone is not supported in this environment. Use the postMessage polyfill.");
}

            

              
                Copy
              
            
          

Før du bruger `structuredClone`, er det vigtigt at tjekke, om den understøttes i målmiljøet. Hvis ikke, skal du falde tilbage på `postMessage`-polyfillen eller et andet alternativ til dyb kopiering.

Begrænsninger ved Structured Clone

Selvom den er kraftfuld, har 'structured clone' nogle begrænsninger:

• Funktioner: Funktioner kan ikke klones. Hvis et objekt indeholder en funktion, vil den gå tabt under kloningsprocessen. Egenskaben vil blive sat til `undefined` i det klonede objekt.
• DOM-noder: DOM-noder (som elementer på en webside) kan ikke klones. Forsøg på at klone dem vil resultere i en fejl.
• Fejl: Visse fejlobjekter kan heller ikke klones, og 'structured clone'-algoritmen kan kaste en fejl, hvis den støder på dem.
• Prototypkæder: Objekters prototypkæde bevares ikke. Klonede objekter vil have `Object.prototype` som deres prototype.
• Ydeevne: Dyb kopiering kan være beregningsmæssigt dyr, især for store og komplekse objekter. Overvej ydeevnekonsekvenserne, når du bruger 'structured clone', især i ydeevnekritiske applikationer.

Hvornår skal man bruge Structured Clone

'Structured clone' er værdifuld i flere scenarier:

• Web Workers: Når data sendes mellem hovedtråden og web workers, er 'structured clone' den primære mekanisme.
• History API: Metoderne `history.pushState()` og `history.replaceState()` bruger 'structured clone' til at gemme data i browserens historik.
• Dyb kopiering af objekter: Når du har brug for at oprette en fuldstændig uafhængig kopi af et objekt, giver 'structured clone' en pålidelig løsning. Dette er især nyttigt, når du vil ændre kopien uden at påvirke originalen.
• Serialisering og deserialisering: Selvom det ikke er dens primære formål, kan 'structured clone' bruges som en grundlæggende form for serialisering og deserialisering (selvom JSON normalt foretrækkes til persistens).

Alternativer til Structured Clone

Hvis 'structured clone' ikke er egnet til dine behov (f.eks. på grund af dens begrænsninger eller ydeevnehensyn), kan du overveje disse alternativer:

• JSON.parse(JSON.stringify(obj)): Dette er en almindelig tilgang til dyb kopiering, men den har begrænsninger. Den virker kun for objekter, der kan serialiseres til JSON (ingen funktioner, Datoer konverteres til strenge osv.) og kan være langsommere end 'structured clone' for komplekse objekter.
• Lodash's `_.cloneDeep()`: Lodash tilbyder en robust `cloneDeep()`-funktion, der håndterer mange kanttilfælde og giver god ydeevne. Det er en god mulighed, hvis du allerede bruger Lodash i dit projekt.
• Brugerdefineret dyb kopieringsfunktion: Du kan skrive din egen dybe kopieringsfunktion ved hjælp af rekursion. Dette giver dig fuld kontrol over kloningsprocessen, men det kræver mere arbejde og kan være fejlbehæftet. Sørg for at håndtere cirkulære referencer korrekt.

Praktiske eksempler og use cases

Eksempel 1: Kopiering af brugerdata før ændring

Forestil dig, at du bygger en applikation til brugeradministration. Før du tillader en bruger at redigere sin profil, vil du måske oprette en dyb kopi af deres nuværende data. Dette giver dig mulighed for at vende tilbage til de oprindelige data, hvis brugeren annullerer redigeringen, eller hvis der opstår en fejl under opdateringsprocessen.

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

async function editUser(newPreferences) {
  // Create a deep copy of the original data
  const originalUserData = await structuredClone(userData);

  try {
    // Update the user data with the new preferences
    userData.preferences = newPreferences;

    // ... Save the updated data to the server ...

    console.log("User data updated successfully!");
  } catch (error) {
    console.error("Error updating user data. Reverting to original data.", error);
    // Revert to the original data
    userData = originalUserData;
  }
}

// Example usage
editUser({ language: "en", theme: "light" });

            

              
                Copy
              
            
          

Eksempel 2: Afsendelse af data til en Web Worker

Web workers giver dig mulighed for at udføre beregningsmæssigt intensive opgaver i en separat tråd, hvilket forhindrer hovedtråden i at blive blokeret. Når du sender data til en web worker, skal du bruge 'structured clone' for at sikre, at dataene overføres korrekt.

            // Main thread
const worker = new Worker('worker.js');

let dataToSend = {
  numbers: [1, 2, 3, 4, 5],
  text: "Process this data in the worker."
};

worker.postMessage(dataToSend);

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

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

  // ... Perform some processing on the data ...
  const processedData = data.numbers.map(n => n * 2);

  self.postMessage(processedData);
};

            

              
                Copy
              
            
          

Bedste praksis for brug af Structured Clone

• Forstå begrænsningerne: Vær opmærksom på de datatyper, der ikke kan klones (funktioner, DOM-noder osv.), og håndter dem passende.
• Overvej ydeevne: For store og komplekse objekter kan 'structured clone' være langsom. Vurder, om det er den mest effektive løsning til dine behov.
• Tjek for understøttelse: Hvis du bruger den indbyggede `structuredClone()`-funktion, skal du tjekke, om den understøttes i målmiljøet. Brug en polyfill om nødvendigt.
• Håndter cirkulære referencer: 'Structured clone'-algoritmen håndterer cirkulære referencer, men vær opmærksom på dem i dine datastrukturer.
• Undgå at klone unødvendige data: Klon kun de data, du rent faktisk har brug for at kopiere. Undgå at klone store objekter eller arrays, hvis kun en lille del af dem skal ændres.

Konklusion

JavaScript 'structured clone'-algoritmen er et kraftfuldt værktøj til at skabe dybe kopier af objekter og arrays. At forstå dens kapabiliteter og begrænsninger giver dig mulighed for at bruge den effektivt i forskellige scenarier, fra kommunikation med web workers til dyb objektkopiering. Ved at overveje alternativerne og følge bedste praksis kan du sikre, at du bruger den mest passende metode til dine specifikke behov.

Husk altid at overveje ydeevnekonsekvenserne og vælge den rigtige tilgang baseret på kompleksiteten og størrelsen af dine data. Ved at mestre 'structured clone' og andre teknikker til dyb kopiering kan du skrive mere robust og effektiv JavaScript-kode.

Yderligere læsning

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