samenvatting: in deze tutorial leert u hoe u objecten in JavaScript kopieert, inclusief shallow copy en deep copy., Kopiëren van een object in JavaScript, hebt u drie opties:
- Gebruik van de verspreiding (
...
) syntax - Gebruik de
Object.assign()
methode - Gebruik de
JSON.stringify()
enJSON.parse()
methoden
Het volgende voorbeeld illustreert hoe een object kopiëren met behulp van de drie bovenstaande methoden:
Zowel verspreid (...
) en Object.assign()
uitvoeren van een ondiepe kopiëren terwijl de JSON-methoden dragen van een diepe kopie.
ondiepe kopie vs., deep copy
in JavaScript gebruikt u variabelen om waarden op te slaan die primitief kunnen zijn of referenties. Wanneer u een kopie maakt van een waarde die is opgeslagen in een variabele, maakt u een nieuwe variabele met dezelfde waarde. Voor een primitieve waarde gebruikt u gewoon een eenvoudige toewijzing:
Code language: JavaScript (javascript)
en wanneer u de waarde van de gekopieerde variabele wijzigt, blijft de waarde van het origineel hetzelfde.
Code language: JavaScript (javascript)
Output:
echter, als u de toegewezen operator voor een referentiewaarde gebruikt, zal deze de waarde niet kopiëren., In plaats daarvan verwijzen beide variabelen naar hetzelfde object in het geheugen:
Code language: JavaScript (javascript)
en wanneer u het object opent via de nieuwe variabele (copiedPerson) en de waarde van de eigenschap (naam) wijzigt, wijzigt u de waarde van de eigenschap van het object.
Code language: JavaScript (javascript)
Output:
Code language: CSS (css)
een diepe kopie betekent dat de waarde van de nieuwe variabele wordt losgekoppeld van de oorspronkelijke variabele, terwijl een ondiepe kopie betekent dat sommige waarden nog steeds verbonden zijn met de oorspronkelijke variabele.,
ondiep kopiëren voorbeeld
beschouw het volgende voorbeeld:
In dit voorbeeld:
- maak eerst een nieuw object aan met de naam
person
. - ten tweede, kloon het
person
object met behulp van deObject.assign()
methode. - ten derde, wijzig de voornaam en adresinformatie van het
copiedPerson
object.,
Hier is de uitvoer:
wanneer u echter de waarden van het persoonsobject toont, zult u merken dat de adresinformatie is gewijzigd, maar de voornaam:
Code language: JavaScript (javascript)
uitvoer:
de reden is dat het adres een referentiewaarde is terwijl de voornaam een primitieve waarde is. Zowel person
als copiedPerson
verwijzen naar verschillende objecten, maar deze objecten verwijzen naar dezelfde address
objecten.,
Diepe kopie voorbeeld
Het volgende fragment vervangt de Object.assign()
methode door de JSON-methoden om te dragen en een diepe kopie van de person
object:
Output:
Code language: CSS (css)
In dit voorbeeld, alle waarden in de copiedPerson
object losgekoppeld van de oorspronkelijke person
object. In deze tutorial heb je geleerd hoe je objecten in JavaScript kunt kopiëren met behulp van ondiep of diep kopiëren.
- Was deze tutorial nuttig ?
- YesNo