JavaScripti Struktureeritud Kloonimine: Sügavate Objektide Kopeerimise Valdamine

JavaScriptis on objektide ja massiivide koopiate loomine tavaline ülesanne. Kuigi lihtne omistamine (`=`) töötab primitiivsete väärtuste puhul, loob see objektide jaoks ainult viite. See tähendab, et muudatused kopeeritud objektis mõjutavad ka originaali. Iseseisvate koopiate loomiseks vajame sügavat kopeerimismehhanismi. Struktureeritud kloonimise algoritm pakub selle saavutamiseks võimsa ja mitmekülgse viisi, eriti keerukate andmestruktuuridega tegelemisel.

Mis on Struktureeritud Kloonimine?

Struktureeritud kloonimise algoritm on JavaScripti sisseehitatud mehhanism, mis võimaldab luua JavaScripti väärtustest sügavaid koopiaid. Erinevalt lihtsast omistamisest või pealiskaudsetest kopeerimismeetoditest (nagu `Object.assign()` või levikusüntaks `...`), loob struktureeritud kloonimine täielikult uusi objekte ja massiive, kopeerides rekursiivselt kõiki pesastatud omadusi. See tagab, et kopeeritud objekt on originaalist täielikult sõltumatu.

Seda algoritmi kasutatakse ka kulisside taga veebitöötajate vaheliseks suhtluseks ja andmete salvestamiseks History API abil. Selle toimimise mõistmine aitab optimeerida koodi ja vältida ootamatut käitumist.

Kuidas Struktureeritud Kloonimine Toimib

Struktureeritud kloonimise algoritm töötab, läbides objektigraafi ja luues igast leitud objektist ja massiivist uue eksemplari. See käsitleb erinevaid andmetüüpe, sealhulgas:

• Primitiivsed tüübid (numbrid, stringid, tõeväärtused, null, undefined) - kopeeritakse väärtuse järgi.
• Objektid ja Massiivid - kloonitakse rekursiivselt.
• Kuupäevad - kloonitakse uute Date objektidena sama ajatempliga.
• Regulaaravaldised - kloonitakse uute RegExp objektidena sama mustri ja lippudega.
• Blobid ja Failiobjektid - kloonitakse (kuid võib hõlmata kogu failiandmete lugemist).
• ArrayBuffer'id ja TypedArray'd - kloonitakse, kopeerides aluseks olevad binaarandmed.
• Mapid ja Setid - kloonitakse rekursiivselt, luues uusi Mape ja Sete koos kloonitud võtmete ja väärtustega.

Algoritm käsitleb ka ringviiteid, vältides lõpmatut rekursiooni.

Struktureeritud Kloonimise Kasutamine

Kuigi otsest `structuredClone()` funktsiooni ei ole kõigis JavaScripti keskkondades (vanemates brauserites võib natiivne tugi puududa), kasutatakse aluseks olevat mehhanismi erinevates kontekstides. Üks levinud viis sellele ligi pääseda on `postMessage` API kaudu, mida kasutatakse veebitöötajate või iframe'ide vaheliseks suhtluseks.

Meetod 1: `postMessage` kasutamine (soovitatav laia ühilduvuse tagamiseks)

See lähenemine kasutab `postMessage` API-t, mis sisemiselt kasutab struktureeritud kloonimise algoritmi. Me loome ajutise iframe'i, saadame objekti sinna `postMessage` abil ja saame selle siis tagasi.

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

// Näide kasutamisest
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);

  // Muuda kloonitud objekti
  clonedObject.address.city = "Los Angeles";

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

deepCopyExample();

            

              
                Copy
              
            
          

See meetod on laialdaselt ühilduv erinevate brauserite ja keskkondadega.

Meetod 2: Natiivne `structuredClone` (Kaasaegsed Keskkonnad)

Paljud kaasaegsed JavaScripti keskkonnad pakuvad nüüd otse sisseehitatud `structuredClone()` funktsiooni. See on kõige tõhusam ja otsekohesem viis sügava koopia tegemiseks, kui see on saadaval.

            // Kontrolli, kas structuredClone on toetatud
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);

  // Muuda kloonitud objekti
  clonedObject.address.city = "Paris";

  console.log("Original Object (after modification):", originalObject); // Muutmata
  console.log("Cloned Object (after modification):", clonedObject); // Muudetud
}
else {
  console.log("structuredClone ei ole selles keskkonnas toetatud. Kasutage postMessage polüfilli.");
}

            

              
                Copy
              
            
          

Enne `structuredClone` kasutamist on oluline kontrollida, kas see on sihtkeskkonnas toetatud. Kui ei, siis kasutage `postMessage` polüfilli või mõnda muud sügava kopeerimise alternatiivi.

Struktureeritud Kloonimise Piirangud

Kuigi võimas, on struktureeritud kloonimisel mõned piirangud:

• Funktsioonid: Funktsioone ei saa kloonida. Kui objekt sisaldab funktsiooni, läheb see kloonimise käigus kaotsi. Kloonitud objektis seatakse selle omaduse väärtuseks `undefined`.
• DOM-sõlmed: DOM-sõlmi (nagu veebilehe elemendid) ei saa kloonida. Nende kloonimise katse tulemuseks on viga.
• Vead: Teatuid veateateobjekte ei saa samuti kloonida ja struktureeritud kloonimise algoritm võib nendega kokku puutudes vea visata.
• Prototüübiketid: Objektide prototüübiketti ei säilitata. Kloonitud objektide prototüübiks on `Object.prototype`.
• Jõudlus: Sügav kopeerimine võib olla arvutuslikult kulukas, eriti suurte ja keerukate objektide puhul. Kaaluge jõudlusmõjusid, kui kasutate struktureeritud kloonimist, eriti jõudluskriitilistes rakendustes.

Millal Kasutada Struktureeritud Kloonimist

Struktureeritud kloonimine on väärtuslik mitmes stsenaariumis:

• Veebitöötajad: Andmete edastamisel peamise lõime ja veebitöötajate vahel on struktureeritud kloonimine peamine mehhanism.
• History API: Meetodid `history.pushState()` ja `history.replaceState()` kasutavad struktureeritud kloonimist andmete salvestamiseks brauseri ajalukku.
• Objektide sügav kopeerimine: Kui peate looma objektist täiesti sõltumatu koopia, pakub struktureeritud kloonimine usaldusväärse lahenduse. See on eriti kasulik, kui soovite koopiat muuta originaali mõjutamata.
• Serialiseerimine ja deserialiseerimine: Kuigi see ei ole selle peamine eesmärk, saab struktureeritud kloonimist kasutada serialiseerimise ja deserialiseerimise algelise vormina (kuigi JSON on püsivuse tagamiseks tavaliselt eelistatud).

Alternatiivid Struktureeritud Kloonimisele

Kui struktureeritud kloonimine ei sobi teie vajadustele (nt selle piirangute või jõudlusprobleemide tõttu), kaaluge neid alternatiive:

• JSON.parse(JSON.stringify(obj)): See on levinud lähenemine sügavale kopeerimisele, kuid sellel on piirangud. See töötab ainult objektidega, mida saab JSON-iks serialiseerida (ei mingeid funktsioone, kuupäevad teisendatakse stringideks jne) ja võib olla keerukate objektide puhul aeglasem kui struktureeritud kloonimine.
• Lodashi `_.cloneDeep()`: Lodash pakub tugevat `cloneDeep()` funktsiooni, mis käsitleb paljusid erijuhtumeid ja pakub head jõudlust. See on hea valik, kui kasutate juba Lodash'i oma projektis.
• Kohandatud sügava kopeerimise funktsioon: Võite kirjutada oma sügava kopeerimise funktsiooni, kasutades rekursiooni. See annab teile täieliku kontrolli kloonimisprotsessi üle, kuid nõuab rohkem vaeva ja võib olla vigadele altis. Veenduge, et käsitlete ringviiteid korrektselt.

Praktilised Näited ja Kasutusjuhud

Näide 1: Kasutajaandmete kopeerimine enne muutmist

Kujutage ette, et ehitate kasutajahaldusrakendust. Enne kui lubate kasutajal oma profiili redigeerida, võiksite luua tema praegustest andmetest sügava koopia. See võimaldab teil naasta algsete andmete juurde, kui kasutaja tühistab redigeerimise või kui värskendusprotsessi käigus tekib viga.

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

async function editUser(newPreferences) {
  // Loo algsetest andmetest sügav koopia
  const originalUserData = await structuredClone(userData);

  try {
    // Värskenda kasutajaandmeid uute eelistustega
    userData.preferences = newPreferences;

    // ... Salvesta uuendatud andmed serverisse ...

    console.log("User data updated successfully!");
  } catch (error) {
    console.error("Error updating user data. Reverting to original data.", error);
    // Pöördu tagasi algsete andmete juurde
    userData = originalUserData;
  }
}

// Näide kasutamisest
editUser({ language: "en", theme: "light" });

            

              
                Copy
              
            
          

Näide 2: Andmete saatmine veebitöötajale

Veebitöötajad võimaldavad teil teha arvutusmahukaid ülesandeid eraldi lõimes, vältides peamise lõime hangumist. Andmete saatmisel veebitöötajale peate kasutama struktureeritud kloonimist, et tagada andmete korrektne edastamine.

            // Põhilõim
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 (Veebitöötaja)
self.onmessage = (event) => {
  const data = event.data;
  console.log("Worker received data:", data);

  // ... Teosta andmetel mõningane töötlus ...
  const processedData = data.numbers.map(n => n * 2);

  self.postMessage(processedData);
};

            

              
                Copy
              
            
          

Parimad Praktikad Struktureeritud Kloonimise Kasutamisel

• Mõistke piiranguid: Olge teadlik andmetüüpidest, mida ei saa kloonida (funktsioonid, DOM-sõlmed jne) ja käsitlege neid vastavalt.
• Kaaluge jõudlust: Suurte ja keerukate objektide puhul võib struktureeritud kloonimine olla aeglane. Hinnake, kas see on teie vajaduste jaoks kõige tõhusam lahendus.
• Kontrollige tuge: Kui kasutate natiivset `structuredClone()` funktsiooni, kontrollige, kas see on sihtkeskkonnas toetatud. Vajadusel kasutage polüfilli.
• Käsitlege ringviiteid: Struktureeritud kloonimise algoritm käsitleb ringviiteid, kuid olge neist oma andmestruktuurides teadlik.
• Vältige ebavajalike andmete kloonimist: Kloonige ainult neid andmeid, mida teil on tegelikult vaja kopeerida. Vältige suurte objektide või massiivide kloonimist, kui ainult väike osa neist vajab muutmist.

Kokkuvõte

JavaScripti struktureeritud kloonimise algoritm on võimas tööriist objektide ja massiivide sügavate koopiate loomiseks. Selle võimete ja piirangute mõistmine võimaldab teil seda tõhusalt kasutada erinevates stsenaariumides, alates veebitöötajate suhtlusest kuni objektide sügava kopeerimiseni. Alternatiive kaaludes ja parimaid praktikaid järgides saate tagada, et kasutate oma konkreetsete vajaduste jaoks kõige sobivamat meetodit.

Pidage meeles, et alati tuleb arvestada jõudlusmõjudega ja valida õige lähenemine vastavalt oma andmete keerukusele ja suurusele. Valdades struktureeritud kloonimist ja teisi sügava kopeerimise tehnikaid, saate kirjutada robustsemat ja tõhusamat JavaScripti koodi.

Lisalugemist

• MDN Web Docs: Struktureeritud kloonimise algoritm
• MDN Web Docs: structuredClone
• MDN Web Docs: Worker.postMessage()