Resumé: i denne tutorial vil du lære, hvordan du kan kopiere objekter i JavaScript, herunder overfladisk kopi og dyb kopi., For at kopiere et object ind i JavaScript, har du tre muligheder:

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

følgende illustrerer, hvordan du kan kopiere et objekt ved hjælp af tre metoder ovenfor:

Både spredning (...) og Object.assign() udfør en overfladisk kopi, mens JSON metoder bære en dyb kopi.

overfladisk kopi vs., deep copy

i JavaScript bruger du variabler til at gemme værdier, der kan være primitive eller referencer. Når du laver en kopi af en værdi, der er gemt i en variabel, opretter du en ny variabel med samme værdi. For en primitiv værdi bruger du simpelthen en simpel opgave:

Code language: JavaScript (javascript)

og når du ændrer værdien af den kopierede variabel, forbliver værdien af originalen den samme.

Code language: JavaScript (javascript)

Output:

men hvis du bruger tildelingsoperatøren til en referenceværdi, kopierer den ikke værdien., I stedet, begge variabler, der refererer til det samme objekt i hukommelsen:

Code language: JavaScript (javascript)

Og når få adgang til objektet via den nye variabel (copiedPerson) og ændre værdien af sin ejendom (navn), kan du ændre værdien af ejendommen af objektet.

Code language: JavaScript (javascript)

Output:

Code language: CSS (css)

En dyb kopiering betyder, at værdien af de nye variable er adskilt fra den oprindelige variabel, mens en overfladisk kopi betyder, at nogle værdier er stadig knyttet til den oprindelige variabel.,

Overfladisk kopi eksempel

Overvej det følgende eksempel:

I dette eksempel:

  • Første, skal du oprette et nyt objekt med navnet person.
  • for det andet skal du kloneperson objektet ved hjælp afObject.assign() metoden.
  • for det tredje skal du ændre fornavn og adresse på copiedPerson objekt.,

Her er output:

men når du viser værdierne for personobjektet, vil du opdage, at adresseoplysningerne ændrede sig, men fornavnet:

Code language: JavaScript (javascript)

Output:

årsagen er, at adressen er referenceværdi, mens fornavnet er en primitiv værdi. Både person og copiedPerson referencer forskellige objekter, men disse objekter henvisning til den samme address objekter.,

Dyb kopi eksempel

følgende uddrag erstatter Object.assign() metode, som JSON metoder til at udføre en dyb kopiere person objekt:

Output

Code language: CSS (css)

I dette eksempel, alle værdier i copiedPerson objekt er adskilt fra den oprindelige person objektet. I denne tutorial har du lært, hvordan du kopierer objekter i JavaScript ved hjælp af enten lav eller dyb kopi.

  • var denne vejledning nyttig ?
  • YesNo