omdat objecten in JavaScript referentiewaarden zijn, kunt u niet gewoon kopiëren met de =. Maar geen zorgen, hier zijn 3 manieren om een object te klonen 👍
# objecten zijn Referentietypen
uw eerste vraag zou kunnen zijn, waarom kan ik =niet gebruiken. Laten we eens kijken wat er gebeurt als we dat doen:
const obj = { one: 1, two: 2 };const obj2 = obj;console.log( obj, // {one: 1, two: 2}; obj2, // {one: 1, two: 2};);tot nu toe lijken beide objecten hetzelfde uit te voeren. Dus geen probleem., Maar laten we eens kijken wat er gebeurt als we ons tweede object bewerken:
const obj2.three = 3;console.log(obj2);// {one: 1, two: 2, three: 3}; <-- ✅console.log(obj);// {one: 1, two: 2, three: 3}; <-- 😱WTH?! Ik veranderde obj2 maar waarom werd obj ook beïnvloed. Dat komt omdat objecten referentietypen zijn. Dus als je = gebruikt, kopieerde het de pointer naar de geheugenruimte die het inneemt. Referentietypen bevatten geen waarden, ze zijn een verwijzing naar de waarde in het geheugen.
als je hier meer over wilt weten, bekijk dan Gordon ‘ s Zhu Watch en Code cursus. Het is gratis om in te schrijven en bekijk de video “vergelijking met objecten”., Hij geeft er een geweldige uitleg over.
# 1. Gebruik Spread
gebruik spread zal uw object klonen. Merk op dat dit een ondiepe kopie zal zijn. Vanaf deze post bevindt de spread operator voor het klonen van objecten zich in Fase 4. Dus het staat nog niet officieel in de specificaties. Dus als je dit zou gebruiken, zou je het moeten compileren met Babel (of iets dergelijks).
const food = { beef: '🥩', bacon: '🥓' };const cloneFood = { ...food };console.log(cloneFood);// { beef: '🥩', bacon: '🥓' }# 2. Object Gebruiken.toewijzen
alternatief is Object.assign in de officiële vrijgegeven en zal ook een ondiepe kopie van het object maken.,
const food = { beef: '🥩', bacon: '🥓' };const cloneFood = Object.assign({}, food);console.log(cloneFood);// { beef: '🥩', bacon: '🥓' }Noteer het lege {} als het eerste argument zorgt dit ervoor dat u het oorspronkelijke object niet muteert 👍
# 3. Gebruik JSON
deze laatste manier geeft je een diepe kopie. Nu zal ik vermelden, dit is een snelle en vuile manier van diep klonen van een object. Lodash Lodash
const food = { beef: '🥩', bacon: '🥓' };const cloneFood = JSON.parse(JSON.stringify(food));console.log(cloneFood);// { beef: '🥩', bacon: '🥓' }# Lodash DeepClone vs JSON
Hier is een commentaar van de gemeenschap. Ja, Het was voor mijn vorige post, How To Deep Clone an Array ., Maar het idee geldt nog steeds voor objecten.
Alfredo Salzillo: Ik wil dat je weet dat er verschillen zijn tussen deepClone en JSON.stringify / parse.
- JSON.stringify / parse werkt alleen met nummer en tekenreeks en Object letterlijke zonder functie of symbool eigenschappen.
- deepClone werk met alle typen, functie en symbool worden gekopieerd door verwijzing.
Hier is een voorbeeld:
@olegvaraksin: de JSON methode heeft problemen met circulaire afhankelijkheden. Bovendien kan de volgorde van eigenschappen in het gekloonde object anders zijn.,
# Shallow Clone vs Deep Clone
wanneer ik spread ... gebruikte om een object te kopiëren, maak ik alleen een ondiepe kopie. Als de array genest of multi-dimensionaal is, zal het niet werken. Hier is ons voorbeeld dat we zullen gebruiken:
const nestedObject = { flag: '🇨🇦', country: { city: 'vancouver', },};# Shallow Copy
laten we ons object klonen met spread:
const shallowClone = { ...nestedObject };// Changed our cloned objectshallowClone.flag = '🇹🇼';shallowClone.country.city = 'taipei';dus hebben we ons gekloonde object gewijzigd door de stad te veranderen. Laat de output eens zien.
console.log(shallowClone);// {country: '🇹🇼', {city: 'taipei'}}console.log(nestedObject);// {country: '🇨🇦', {city: 'taipei'}} <-- 😱een ondiepe kopie betekent dat het eerste niveau wordt gekopieerd, er wordt naar diepere niveaus verwezen.,
# Deep Copy
laten we hetzelfde voorbeeld nemen, maar een diepe kopie toepassen met “JSON”
zoals u kunt zien, is de diepe kopie een echte kopie voor geneste objecten. Vaak is tijd ondiepe kopie goed genoeg, je hebt niet echt een diepe kopie nodig. Het is als een spijkerpistool tegen een hamer. Meestal is de hamer prima in orde. Met behulp van een spijker pistool voor een aantal kleine kunsten en ambachtelijke is vaak geval een overkill, een hamer is prima. Het draait allemaal om het gebruik van het juiste gereedschap voor de juiste taak 🤓
# Performance
helaas kan ik geen test voor spread schrijven omdat het nog niet officieel in de specificatie staat., Toch heb ik het opgenomen in de test, zodat u het kunt uitvoeren in de toekomst 😝. Maar het resultaat laat zien dat Object.assign veel sneller is dan JSON.
prestatietest
# Community Input
# Object.toewijzen vs Spread
@d9el: het is belangrijk om op te merken dat Object.toewijzen is een functie die het doelobject wijzigt en retourneert. In Samantha ‘ s voorbeeld met behulp van het volgende,
const cloneFood = Object.assign({}, food);{} is het object dat is gewijzigd., Het doelobject wordt door geen enkele variabele op dat punt gerefereerd, maar omdat Object.assign het doelobject retourneert, kunnen we het resulterende toegewezen object opslaan in de cloneFood variabele. We kunnen ons voorbeeld omschakelen en het volgende gebruiken:
const food = { beef: '🌽', bacon: '🥓' };Object.assign(food, { beef: '🥩' });console.log(food);// { beef: '🥩', bacon: '🥓' }uiteraard is de waarde van beef in ons voedselobject onjuist, zodat we de juiste waarde van beef kunnen toewijzen met Object.assign., We gebruiken eigenlijk helemaal niet de geretourneerde waarde van de functie, maar we zijn ons doelobject aan het aanpassen waar we naar verwezen hebben met de const food.
Spread aan de andere kant is een operator die eigenschappen van een object kopieert naar een nieuw object., Als we het bovenstaande voorbeeld willen repliceren met behulp van spread om onze variabele te wijzigen food...
const food = { beef: '🌽', bacon: '🥓' };food = { ...food, beef: '🥩',};// TypeError: invalid assignment to const `food'... krijgen we een fout, omdat we spread gebruiken bij het maken van nieuwe objecten, en daarom een geheel nieuw object toewijzen aan food die werd gedeclareerd met const, wat illegaal is., Zo kunnen we kiezen voor het declareren van een nieuwe variabele te houden van onze nieuwe object in, zoals de volgende:
const food = { beef: '🌽', bacon: '🥓' };const newFood = { ...food, beef: '🥩',};console.log(newFood);// { beef: '🥩', bacon: '🥓' }of we kunnen verklaren food met let of var die ons in staat zou stellen voor het toewijzen van een geheel nieuw object:
let food = { beef: '🌽', bacon: '🥓' };food = { ...food, beef: '🥩',};console.log(food);// { beef: '🥩', bacon: '🥓' }met Dank aan: @d9el
# Diep Kloon met behulp van Externe Bibliotheken
# Meer Manieren met behulp van JavaScript
- @hariharan_d3v :
Object.fromEntries(Object.entries(food))klonen van het object.
Geef een reactie