Oppsummering: i denne opplæringen vil du lære hvordan å kopiere objekter i JavaScript, inkludert grunne kopiere og dyp kopi., For å kopiere et objekt i JavaScript, har du tre valg:

  1. Bruk spredning (...) syntaks
  2. Bruk Object.assign() metode
  3. Bruk JSON.stringify() og JSON.parse() metoder

følgende illustrerer hvordan kopiere et objekt, ved hjelp av tre metoder ovenfor:

Begge spredning (...) og Object.assign() utføre en grunn kopi mens JSON metoder bære en dyp kopi.

Grunne kopi vs., dyp kopi

I JavaScript, kan du bruke variabler til å lagre verdier som kan være primitive eller referanser. Når du lager en kopi av en verdi som er lagret i en variabel, kan du opprette en ny variabel med samme verdi. For en primitiv verdi, du bare bruke en enkelt oppdrag:

Code language: JavaScript (javascript)

Og når du endrer verdien av den kopierte variabel, verdien av den opprinnelige forblir den samme.

Code language: JavaScript (javascript)

Output:

hvis du Imidlertid bruker tilordningsoperatoren for en referanse verdi, det vil ikke kopiere verdien., I stedet, begge variablene vil referere til samme objekt i minnet:

Code language: JavaScript (javascript)

Og når tilgang objektet via den nye variabelen (copiedPerson) og endre verdien av eiendommen sin (navn), du vil endre verdien av eiendommen av objektet.

Code language: JavaScript (javascript)

Output:

Code language: CSS (css)

En dyp kopiering betyr at verdien av den nye variabelen er koblet fra den opprinnelige variabelen, mens en grunn kopi betyr at noen verdier er fortsatt koblet til den opprinnelige variabelen.,

Grunne kopi eksempel

Tenk deg følgende eksempel:

I dette eksempelet:

  • Første, oppretter du et nytt objekt som heter person.
  • Andre, klone person objekt ved hjelp av Object.assign() metode.
  • Tredje, endre fornavn og adresse informasjon av copiedPerson objekt.,

Her er resultatet:

Men, når du viser verdiene av person-objekt, vil du finne at adressen informasjon som er endret, men fornavn:

Code language: JavaScript (javascript)

Output:

grunnen er at adressen er referanse verdi, mens det første navnet er en primitiv verdi. Både person og copiedPerson referanser forskjellige objekter, men disse objektene referanse samme address objekter.,

Dyp kopi eksempel

følgende kodebit erstatter Object.assign() metode ved JSON metoder for å bære en dyp kopi person objekt:

Output

Code language: CSS (css)

I dette eksempelet, alle verdier i copiedPerson objektet er koblet fra den opprinnelige person objekt. I denne opplæringen, har du lært hvordan du skal kopiere objekter i JavaScript ved hjelp av enten grunt eller dypt kopi.

  • Var denne opplæringen nyttig ?
  • YesNo