Hvordan du dyp klonobjekter i javascript

JavaScript er helt basert på objekter, alt i JavaScript er et objekt. Arrays er objekter, strenger er objekter og objekter er objekter. Når du jobber med objekter eller matriser, kommer det noen ganger behov for å kopiere eller klone en matrise eller objekt.

Det er to typer kloner av objekter \ matriser, en av dem er grunne kloner og den andre vesen dype kloner.

Å lage dype kloner I Vanilla JavaScript må vi bruke en kombinasjon av JSON Parse () funksjon og JSON Stringify () funksjon. I dette innlegget skal vi diskutere hva som er grunne kloner og dype kloner, hvordan lage kloner i JavaScript, og hvordan lage dype kloner.

Grunne kloner vs dype kloner

Hver gang en matrise \ objekt som inneholder en annen matrise \ objekt inne i den, kopieres fra en variabel til en annen variabel, kopieres ikke elementene i den array \ objektet; Snarere er en referansepeker kopiert til den nye variabelen som peker på den gamle variabelen. Slike kopier er kjent som grunne kopier eller grunne kloner

Mens elementene i en matrise \ objekt kopieres direkte (ikke deres referansepeker) til en ny variabel sammen med den nestede array \ -objektet, er den kopien kjent som dype kloner eller dype kopier.

Forklaring med JavaScript -kode

Dette er avanserte JavaScript -konsepter, og det er grunnen til at vi vil bruke kodingseksempler for å demonstrere forskjellen mellom grunt kloning og dyp kloning. For å komme i gang, lage en matrise som inneholder forskjellige elementer ved å bruke følgende kodelinje:

var originalArray = [True, False, 2, "Google", udefinert];

Nå er det to måter å klone denne matrisen på:

• Ved å bruke skivemetoden
• Ved å bruke spredningsoperatøren

For å lage en klon ved hjelp av skivemetoden, bruk følgende linje:

var clone1 = originalArray.skive (0);

Og for å lage en klon ved hjelp av spredningsoperatøren, bruk følgende linje:

var clone2 = [… originalArray];

For å teste om elementene våre ble kopiert eller ikke, kan vi bruke konsollloggfunksjonen til å skrive ut den originale matrisen, så vel som begge klonene våre:

konsoll.logg (originalArray);
konsoll.Logg (Clone1);
konsoll.logg (clone2);

Vi får følgende utgang på konsollen vår:

For å bevise at dette er faktiske kloner, og ikke referanser til den originale matrisen som er ført inne i disse variablene, vil vi gjøre noen endringer i klonene og sjekke om disse endringene påvirker den opprinnelige matrisen eller ikke.

Clone1 [0] = 1;
Clone2 [1] = "Hei";

Skriv ut alle matriser på konsollen igjen for å undersøke endringene med følgende linjer:

konsoll.logg (originalArray);
konsoll.Logg (Clone1);
konsoll.logg (clone2);

Du vil observere følgende utdata:

Som du kan se, påvirket ikke endringer i klone -matriser den originale matrisen, noe som betyr at andre matriser ikke kopierte referansen til den originale matrisen.

Grunne kloner verifisering

Vi har sett hvordan du kloner enkle matriser, men hva om vi har en matrise eller objekt som inneholder en annen matrise inne i den, bør du vurdere følgende matrise:

var originalArray = [["Google"]];

Som du kan se, har vi en matrise i en annen matrise, la oss prøve å lage en klone av denne matrisen ved å bruke skivemetoden som vi allerede har brukt i eksemplet ovenfor:

var klon = originalArray.skive (0);

Vi har laget en klone av denne matrisen i variabelen “Klon”, Skriv ut begge disse matriser ved hjelp av konsollloggfunksjonen:

konsoll.logg (originalArray [0]);
konsoll.logg (klon [0]);

Du bør se følgende resultat på konsollen på skjermen:

La oss prøve å gjøre noen endringer i den klonede matrisen med følgende kodelinje:

klon [0].push ("kart");

Dette skal gjøre endringer i bare “Klon” matrise og ikke i den originale matrisen, men det er her ting blir interessant. Skriv ut begge matriser ved hjelp av konsollloggfunksjonen:

konsoll.logg (originalArray [0]);
konsoll.logg (klon [0]);

Du bør se følgende resultat på konsollen din:

Du kan enkelt observere fra bildet over at endringer i den klonede matrisen forårsaket endringer i den opprinnelige matrisen. Dette betyr at hvis objektet vårt \ matrise inneholder objekt \ matriser, så passerer kloningen referanse til de nestede objektene og dermed skaper en grunt klon.

Dyp kloning i vanilje JavaScript

Phew ... det var mange ting bare for å forklare ett konsept av grunne kloner Men igjen, dette er konsepter på avansert nivå. For å lage dype kloner ved hjelp av JavaScript er flere metoder tilgjengelige, men de fleste av dem krever nodejs. For å lage dype kloner i Vanilla JavaScript, må du bruke en kombinasjon av JSON Parse () -funksjonen og JSON Stringify () -funksjonen. Lag en matrise med et nestet utvalg inne i den med følgende kodeinje:

var originalArray = [["Google"]];

Bruk en kombinasjon av JSON Parse og JSON Stringify () med følgende linje:

var deepclone = json.Parse (JSON.Stringify (originalArray));

Nå, at vi har laget klonen vår, må vi bekrefte den ved å skrive den ut på konsollen ved å bruke konsollloggfunksjonen:

konsoll.logg (klon [0]);

Du får følgende resultat på konsollen:

La oss nå prøve å endre elementene i den klonede matrisen ved å bruke følgende linje:

DeepClone [0].push ("kart");

Det siste som er igjen er å observere begge matriser på konsollen for å bestemme om det å endre den klonede matrisen endret den originale matrisen eller ikke:

konsoll.logg (originalArray [0]);
konsoll.logg (DeepClone [0]);

Du får følgende resultat på konsollen din:

I bildet over kan du observere at endringer i klonet Array forårsaket ingen endring i den opprinnelige matrisen. Dette betyr at de nestede matriser \ objekter også ble kopiert i stedet for at referansen deres ble sendt til den nye variabelen, og dette er grunnen til at slike kloner kalles dype kloner.

Konklusjon

Dype kloner i Vanilla JavaScript er laget ved å bruke en kombinasjon av JSON Parse () -funksjon og JSON Stringify () -funksjon når du analyserer et objekt \ matrise i en ny variabel. Alt i JavaScript er et objekt, og når vi prøver å kopiere nestede objekter, blir deres referanse til pekeren kopiert til den nye variabelen i stedet for å kopiere elementene i de nestede matriser \ objekter. Når referanse til et objekt føres til en ny objektendring i det nye objektet, forårsaker endringer i det gamle objektet i tillegg til at det ikke er veldig effektivt. Dette er grunnen til at JavaScript la til en måte å lage dype kloner.