Grunt kopi vs dyp kopi i JavaScript

Kopieringsoppgaven i JavaScript er ganske grei for primitive datatyper. Du må imidlertid nøye velge mellom Grunt og dyp kopi teknikker mens du håndterer objekter og referanser.

I grunne kopi bare referanseadresser er kopiert; Derfor vil det å endre ett objekt også bruke de samme endringene på et annet objekt. For å unngå en slik situasjon, kan du bruke den dype kopiprosedyren.

Dette innlegget vil forklare begrepet grunt kopi og dyp kopi ved hjelp av passende eksempler. Så la oss starte!

Grunt kopi i JavaScript

En mekanisme der et objekt er bitsmessig kopiert til et spesifisert objekt er kjent som grunt kopi.

• Den grunne kopimetoden limer inn en eksakt kopi av et bestemt objekt til et annet objekt.
• Det brukes først og fremst for å kopiere en dimensjonale matriseelementer, der det bare kopierer elementene som er til stede på første nivå.
• Det kopierer bare referanseadressene til et annet objekt.

Metoder for grunt kopier et objekt i JavaScript

For å grunne kopiere et JavaScript -objekt i et annet objekt, kan du bruke følgende metoder:

• Gjenstand.tilordne () Metode
• Spred operatør […]
• Oppdragsoperatør “=”

Merk: Hvis du bruker “Spred operatør” eller “Objekt.tildele()" Metode, deretter etter grunt kopiering, blir det kopierte objektet koblet fra det opprinnelige objektet, mens i tilfelle av å bruke "oppdrag"Operatør, og endrer det kopierte objektet vil også endre det opprinnelige objektet.

Vi vil kort diskutere hver av de nevnte metodene for å kopiere et objekt i JavaScript.

Grunt kopier et objekt i JavaScript ved hjelp av spredningsoperatør

“spre”Operatør kan brukes til grunt kopiering av et objekt. Det er representert som tre påfølgende prikker “…”.

Syntaks for å bruke spredningsoperatør til grunt kopier et objekt i JavaScript

La objekt2 = … objekt1;

Her vil spredningsoperatøren kopiere nøkkelverdiparet av “Object1” til “Object2”.

Eksempel: Grunt kopier et objekt i JavaScript ved hjelp av spredningsoperatør

Først av alt vil vi lage et objekt som heter “ansatt”Å ha to nøkkelverdipar:

const ansatt =
Navn: 'Alex',
Betegnelse: 'Manager'
;

Deretter vil vi grunne kopiere "ansatt”Objekt til det nyopprettede”Emp1”Objekt ved hjelp av spredningsoperatøren:

La EMP1 = … ansatt;

I tillegg kan du bekrefte hvis du endrer eiendomsverdiene til "Emp1”Objekt kan også påvirke“ansatt”Objektets navnegenskap:

Emp1.Navn = 'Maks';

konsoll.Logg (“Emp1 Navn:” + Emp1.Navn);

konsoll.Logg (“Ansattes navn:” + Ansatt.Navn); [/cc]

Vi har kopiert "ansatt”Objekt til“Emp1”Objekt og endre“Emp1.Navn”Eiendomsverdi har ikke brukt noen endringer i“ansatt.Navn”Eiendom:

Grunt kopi i JavaScript ved hjelp av objekt.tilordne () Metode

JavaScript “Gjenstand.tildele()”Metoden brukes til å grunt kopiernøkkelverdi”Par av et allerede opprettet objekt i et annet objekt. Det opprinnelige objektet vil ikke bli påvirket mens du bruker objektet.tilordne () Metode.

Syntaks for å bruke objekt.Tilordne () Metode til grunne kopi i JavaScript

Gjenstand.Tildel (mål, kilde)

Her, “mål”Representerer JavaScript-objektet hvis nøkkelverdipar vil bli kopiert, og“kilde”Indikerer objektet der det kopierte nøkkelverdiparet blir plassert.

Eksempel: Grunt kopi i JavaScript ved hjelp av objekt.tilordne () Metode

Vi vil påkalle "Gjenstand.tildele()”Metode for grunt kopiering av "Ansatt" gjenstand for "EMP1":

La emp1 = ; objekt.tilordne (emp1, ansatt);

“Gjenstand.tildele()”Metoden vil returnere målobjektet, som er“Emp1”I vårt tilfelle:

Deretter vil vi oppdatere “emp.Navn" Eiendomsverdi:

Emp1.Navn = 'Stepheny'; konsoll.Logg ("Emp1 Name:" + Emp1.Navn);
konsoll.Logg ("Ansatt.Navn: " + Ansatt.Navn);

Som du kan se i den undergitte utgangen, endrer du “emp.Navn”Eiendomsverdi har ikke endret“ansatt”Objekt.

Grunt kopi i JavaScript ved hjelp av oppgavoperatør

Oppdragsoperatøren “=”Kan også hjelpe deg med å kopiere et objekt i JavaScript. Når det gjelder bruk av tildelingsoperatøren, vil begge variablene referere til det samme objektet. Endringer i ett objekt vil også påvirke det tilsvarende objektets egenskapsverdi:

Syntaks for å bruke oppgavoperatør til grunne kopi i JavaScript

Objekt2 = Objekt1

Her kopierer oppdragsoperatøren “Object1” til “Object2”.

Eksempel: Grunt kopi i JavaScript ved hjelp av oppdragsoperatør

Nå vil vi bruke JavaScript -oppdragsoperatøren for grunne kopiering av "Ansatt" gjenstand for "EMP1":

La emp1 = ; emp1 = ansatt;

I neste trinn vil vi spesifisere “Stepheny”Som verdien av“Emp1.Navn”Eiendom:

Emp1.Navn = 'Stepheny'; konsoll.Logg ("Emp1 Name:" + Emp1.Navn);
konsoll.Logg ("Ansatt.Navn: " + Ansatt.Navn);

Den gitte utgangen betyr at å endre “emp.Navn”Eiendomsverdi har ikke endret "Ansatt" -objekt "Navn" eiendom:

Nå vil vi diskutere konseptet med dyp kopiering av et objekt i JavaScript.

Dyp kopi i JavaScript

“Dyp kopi”Er en rekursiv prosedyre for å kopiere objekt. Denne mekanismen lager et nytt objekt og klemmer deretter det spesifiserte objektets nøkkelverdipar til det. Denne uttalelsen betyr at mens dyp kopiering er et JavaScript -objekt fullstendig klonet til et annet objekt. Etter det blir det kopierte objektet koblet fra det opprinnelige objektet.

Metoder for å kopiere et objekt i JavaScript

Metoder brukt for dyp kopiering av et JavaScript -objekt er JSON.Stringify () og JSON.parse (), Hvor Stringify () -metoden konverterer et bestemt JavaScript -objekt til en streng, og deretter utfører metoden Parse ().

Syntaks av å bruke JSON.Stringify () og JSON.parse () metoder for å kopiere et objekt i JavaScript dypt

La objekt2 = json.Parse (JSON.Stringify (Object1));

Her, The Stringify () methoD konverterer JavaScript “Objekt1”Til en streng, og deretter utfører analysemetoden analysen og returene som vil bli lagret i“Objekt2”.

Eksempel: Dyp kopi i JavaScript et objekt i JavaScript ved hjelp av JSON.Stringify () og JSON.parse () metoder

I dette eksemplet har vi brukt Stringify () og analysemetoder () metoder å kopiere “Ansatt” til “Emp1” gjenstand. “JSON.Stringify ()”Metoden vil konvertere“ansatt”Objekt til en“streng”Og så“JSON.parse ()”Metode Analyser den resulterende strengen og returner et JavaScript -objekt:

La ansatt =
Navn: 'Alex',
Adresse: City: 'Ankara', land: 'Tyrkia'
;
var emp1 = json.Parse (JSON.Stringify (ansatt));
konsoll.logg (emp1);

Gitt utgang betyr at vi har kopiert "Ansatt" gjenstand for "EMP1":

Til slutt vil vi endre noen egenskaper til “Emp1” -objektet og deretter sjekke resultatet:

Emp1.Navn = 'Maks';
Emp1.adresse.by = 'Istanbul';
konsoll.Logg ("EMP1.Navn: " + Emp1.Navn);
konsoll.Logg ("EMP1.adresse.By: " + Emp1.adresse.by);
konsoll.Logg ("Ansatt.Navn: " + Ansatt.Navn);
konsoll.Logg ("Ansatt.adresse.By: " + Ansatt.adresse.by);

Etter å ha utført den dype kopieringsoperasjonen, “Emp1”Blir koblet fra“ansatt,”Så eventuelle endringer gjort i“Emp1”Vil ikke påvirke“ansatt”Objekt:

Vi har samlet all viktig informasjon relatert til grunne kopi og dype kopieringsobjekter i JavaScript. Du kan utforske det ytterligere i henhold til dine krav.

Konklusjon

Spred operatør “[…]”, “Objekt.tilordne () ”og“ Assignment ”-operatøren er metoder som tillater deg å grunne kopieringsobjekter og for å kopiere et JavaScript -objekt, JSON, JSON.Stringify () og JSON.parse () metoder brukes, der JSON.Stringify () -metode konverterer et bestemt objekt til en streng, som deretter analyseres tilbake ved hjelp av JSON.parse () -metode. Dette innlegget forklarte begrepet grunt og dyp kopi ved hjelp av passende eksempler.