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:
- använd spread (
...
) syntax - använd
Object.assign()
metod - använd
JSON.stringify()
ochJSON.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 klona
person
– objektet medObject.assign()
– metoden. - tredje, ändra förnamn och adressinformation för objektet
copiedPerson
.,
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