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:

  1. Gebruik van de verspreiding (...) syntax
  2. Gebruik de Object.assign() methode
  3. Gebruik de JSON.stringify() en JSON.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 naamperson.
  • ten tweede, kloon hetperson 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