sammanfattning: i den här handledningen lär du dig att kopiera objekt i JavaScript, inklusive Grunt kopia och djup kopia., För att kopiera ett objekt i JavaScript har du tre alternativ:

  1. använd spread (...) syntax
  2. använd Object.assign() metod
  3. använd JSON.stringify() och JSON.parse() metoder

följande visar hur man kopierar ett objekt med tre metoder ovan:

både spread (...) och Object.assign() utför en grund kopia medan JSON-metoderna har en djup kopia.

Grunt kopia vs., deep copy

i JavaScript använder du Variabler för att lagra värden som kan vara primitiva eller referenser. När du gör en kopia av ett värde som lagras i en variabel skapar du en ny variabel med samma värde. För ett primitivt värde använder du bara en enkel uppgift:

Code language: JavaScript (javascript)

och när du ändrar värdet på den kopierade variabeln förblir värdet på originalet detsamma.

Code language: JavaScript (javascript)

Output:

om du använder tilldelningsoperatören för ett referensvärde kopierar den dock inte värdet., Istället kommer båda variablerna att referera till samma objekt i minnet:

Code language: JavaScript (javascript)

och när du kommer åt objektet via den nya variabeln (copiedPerson) och ändrar värdet på dess egendom (namn) ändrar du värdet på objektets egendom.

Code language: JavaScript (javascript)

Output: 

Code language: CSS (css)

en djup kopiering innebär att värdet på den nya variabeln kopplas bort från den ursprungliga variabeln medan en grund kopia innebär att vissa värden fortfarande är anslutna till den ursprungliga variabeln.,

Grunt kopieringsexempel

Tänk på följande exempel:

i det här exemplet:

  • skapa först ett nytt objekt som heter person.
  • för det andra klonaperson – objektet medObject.assign() – metoden.
  • tredje, ändra förnamn och adressinformation för objektetcopiedPerson.,

här är utmatningen:

men när du visar värdena för personobjektet kommer du att upptäcka att adressinformationen ändrats men förnamn: 

Code language: JavaScript (javascript)

Output:

anledningen är att adressen är referensvärde medan förnamn är ett primitivt värde. Bådeperson ochcopiedPerson refererar till olika objekt men dessa objekt refererar till sammaaddress objekt.,

exempel på Djupkopiering

följande utdrag ersätterObject.assign() – metoden med JSON-metoderna för att kopieraperson – objektet:

utgång 

Code language: CSS (css)

i det här exemplet alla värden icopiedPerson – objektet kopplas bort från det ursprungligaperson – objektet. I den här handledningen har du lärt dig hur du kopierar objekt i JavaScript med antingen Grunt eller djupt kopia.

  • var den här handledningen till hjälp ?
  • YesNo