a face o copie superficială a unei matrice sau a unui obiect înseamnă a crea noi referințe la valorile primitive din interiorul obiectului, copiindu-le.
asta înseamnă că modificările la matricea originală nu vor afecta matricea copiată, ceea ce s-ar întâmpla dacă ar fi fost copiată doar referința la matrice (cum ar fi cu operatorul de atribuire =).
o copie superficială se referă la faptul că un singur nivel este copiat și că va funcționa bine pentru o matrice sau un obiect care conține numai valori primitive.,pentru obiectele și tablourile care conțin alte obiecte sau tablouri, copierea acestor obiecte necesită o copie profundă. În caz contrar, modificările aduse referințelor imbricate vor schimba datele imbricate în obiectul sau matricea originală.în acest articol, descriu 4 metode de a face o copie superficială și apoi 5 metode de a face o copie profundă în JavaScript.,
copie Superficială, folosind …
1. Operatorul de răspândire (…) este o modalitate convenabilă de a face o copie superficială a unei matrice sau a unui obiect —atunci când nu există cuiburi, funcționează excelent.,
după Cum se arată mai sus, răspândirea operator este util pentru crearea de noi cazuri de tablouri care nu se comportă în mod neașteptat din cauza referințe mai vechi. Operatorul de răspândire este astfel util pentru adăugarea la o matrice în stare React.
copie Superficială a utiliza .felie ()
2.,Pentru tablouri în mod special, folosind built-in .slice() metoda funcționează la fel ca răspândirea operator de — a crea o copie superficială a unuia de nivel:
copie Superficială a utiliza .atribuiți ()
3.,Același tip de copie superficială ar fi creat folosind Object.assign(), care poate fi folosit cu orice obiect sau matrice:
copie Superficială matrice folosind Matrice.din ()
4.,O altă metodă de a copia o matrice JavaScript este folosind Array.from(), care va face, de asemenea, o copie superficială, așa cum se arată în acest exemplu:
Dacă un obiect sau matrice conține alte obiecte sau tablouri, superficial copii va funcționa în mod neașteptat, pentru obiecte imbricate nu sunt de fapt clonate.pentru obiectele adânc imbricate, va fi necesară o copie profundă. Vă explic de ce mai jos.,
ferește-te de profund imbricate te-am Prins!
pe de altă parte, atunci când obiectele JavaScript, inclusiv matrice, sunt adânc imbricate, operatorul de răspândire copiază doar primul nivel cu o nouă referință, dar valorile mai profunde sunt încă legate între ele.,
Pentru a rezolva această problemă necesită crearea o copie profundă, spre deosebire de o copie superficială. Adânc copii pot fi realizate folosind lodash, rfdc, sau R. metoda clone() din Ramda programare funcțională bibliotecă. Am explora copii profunde următoare.
Ce este o copie profundă?,
pentru obiecte și tablouri care conțin alte obiecte sau tablouri, copierea acestor obiecte necesită o copie profundă. În caz contrar, modificările aduse referințelor imbricate vor schimba datele imbricate în obiectul sau matricea originală.
Acest lucru este comparat cu o copie superficială, care funcționează bine pentru un obiect sau matrice care conține numai valori primitive, dar va eșua pentru orice obiect sau matrice care are referințe imbricate la alte obiecte sau matrice., diferența între == și === poate ajuta vizual a vedea diferența dintre superficială și profundă copie, ca egalitate strictă operator (===) arată că imbricate trimiterile sunt la fel:
copie Profundă cu lodash
1.,Biblioteca lodash este cel mai comun mod de dezvoltatorii JavaScript face o copie profundă. Este surprinzător de ușor de utilizat:
Lodash numele lui vine de la bibliotecă fiind referite ca o subliniere (_), un „low dash” sau lodash de scurt.
copie Profundă cu Ramda
2.,Biblioteca de programare funcțională Ramda include metoda R.clone(), care face o copie profundă a unui obiect sau a unui tablou.
Rețineți că R.clone() de la Ramda este echivalent cu _.cloneDeep() pentru lodash, ca Ramda nu au o copie superficială metoda de ajutor.,
copie Profundă cu funcție particularizată
3. Este destul de ușor să scrieți o funcție JavaScript recursivă care va face o copie profundă a obiectelor sau matricelor imbricate. Aici este un exemplu:
Rețineți că eu, de asemenea, nevoie pentru a verifica pentru nulă deoarece typeof nul este „obiect.,”
copie Profundă cu JSON.parse /stringify
4. Dacă datele dvs. se potrivește caietul de sarcini (a se vedea mai jos), apoi JSON.parse urmat de JSON.stringify va adânci copia obiectului.,plex tipuri în obiect, una foarte simplă linie de adânc clona un obiect este: JSON.parse(JSON.stringify(object))” — Dan Dascalescu în StackOverflow răspunsul
Pentru a demonstra câteva motive pentru care această metodă nu este recomandată în general, aici este un exemplu de a crea o copie profundă folosind JSON.parse(JSON.stringify(object)):
O funcție particularizată sau bibliotecile menționate poate face o copie profundă, fără a fi nevoie să vă faceți griji cu privire la tipul de conținut, deși referințe circulare va declanșa tot de pe ei.,
Next I discuss a blazing-fast library called rfdc that can handle circular references while being as fast as a custom deep copy function.
Really fast deep copy? Think rfdc
5.,622333″>
„rdfc clones all JSON types: •Object •Array •Number •String •null
With additional support for: •Date (copied) •undefined (copied) •Function (referenced) •AsyncFunction (referenced) •GeneratorFunction (referenced) •arguments (copied to a normal object)
All other types have output values that match the output of JSON.parse(JSON.stringify(o)).,”—rfdc Documentare
cu Ajutorul rfdc este destul de drept înainte, la fel ca alte biblioteci:
rfdc biblioteca suporta toate tipurile și sprijină, de asemenea, referințe circulare opțional cu un steag care scade performanta cu aproximativ 25%.referințele circulare vor rupe ceilalți algoritmi de copiere profundă discutate.,o astfel de bibliotecă ar fi utilă dacă aveți de-a face cu un obiect mare, complex, cum ar fi unul încărcat din fișiere JSON de la dimensiunea 3MB-15MB.,e superficial copii sunt cel mai rapid, urmat de adânc copii utilizând o funcție particularizată sau rfdc:
„copie Profundă de performanță: a Clasat pe locul de cel mai bun la cel mai rău
Reatribuirea „
=” (șir de tablouri, numărul tablouri — numai)Felie (șir de matrice, matrice numărul — doar)
Concatenare (șir de matrice, matrice numărul — doar)
funcția Personalizat: pentru buclă sau recursive copie
jQuery e
$.extend
JSON.parse(șir de tablouri, numărul de tablouri, obiect tablouri — only)Subliniere.,js e
_.clone(șir de tablouri, numărul tablouri — numai)Lo-Dash e
_.cloneDeep” — Tim Montague în StackOverflow răspunsul
cu Ajutorul JSON.parse/JSON.stringify creează probleme în jurul valorii de tipuri de date, deci rfdc este recomandat — dacă doriți să scrieți o funcție particularizată.,
Concluzie
Acesta este de fapt destul de ușor pentru a evita a fi nevoie să copie profundă în JavaScript — dacă poți să-n cuib de obiecte și tablouri în interiorul reciproc.,
Deoarece, în acest caz — în cazul în care nu există nici o cuiburi și obiecte și tablouri conține numai valori primitive — face o copie superficială cu răspândirea operator (…), .slice() și .assign() toate mare lucru.dar, în lumea reală, unde obiectele au tablouri în interiorul lor sau invers, atunci va trebui utilizată o copie profundă. Recomand rfdc pentru clone profunde.,
(Rețineți că unii ar putea sugera, de asemenea, folosind JSON.stringify() urmat de JSON.parse(), dar asta nu este un mod sigur de a face o copie profundă.)
acum ieșiți acolo și copiați adânc unele obiecte imbricate!
bibliografie
- Aligator.,io are un articol bun pe adânc clonarea folosind lodash:
- Samantha Ming explică superficială și profundă copii de pe dev.de la:
- Petru Tasker articolul de pe dev.,a generat multe comentarii, inclusiv o explicație de când
JSON.parse(JSON.stringify(obj))nu:
- James Dorr referă la necesitatea de a copia atunci când se adaugă la o serie de a Reacționa Stat (din Reacționa Stat este imuabil) în JavaScript în limba engleză:
- Ramon Miklus folosește imutabilitatea-helper, o bibliotecă utilizată pentru a menține imutabilitatea de date, în loc de lodash să copie profundă pe Codementor:
- Vorbind de imuabilitate, Gabriel Lebec are un ghid de mare în dev.,to: