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:
- Bruk spredning (
...
) syntaks - Bruk
Object.assign()
metode - Bruk
JSON.stringify()
ogJSON.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 avObject.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