de Boris Sever

Ce este înregistrat în consolă atunci când mutați obiecte

Mulți dezvoltatori nu folosesc un depanator în timpul dezvoltării. În schimb, se bazează pe vechiul lor prieten console.log().

Este important să rețineți că consola arată valoarea obiectului, care este evaluată în momentul efectuării prima expansiune în consolă.

Mai întâi, permiteți-mi să clarific ce vreau să spun prin extindere. Cand noi console.log un obiect (care acoperă și matrici), valoarea obiectului este prăbușită. De exemplu:

console.log( "users: ", [{name: "John"}]);

Consola browserului va arăta astfel:

Apoi, când faceți clic pe triunghi, obiectul se extinde. La acel moment exact, valoarea obiectului este evaluată și afișată.

Să ne aruncăm mai mult în acest sens și să vedem un exemplu:

Pe linia 1 inițializăm un nou users variabilă, care este o serie de obiecte.

Pe linia 6 scriem valoarea users variabilă la consolă.

Apoi, repetăm users, verificați dacă utilizatorul este valid și, în funcție de returnare, îl dezactivăm. Din motive de argument, să presupunem că validateUser()se intoarce false iar codul de pe linia 10 este executat.

Chiar dacă map creează o nouă matrice, schimbând user obiectul schimbă de asemenea user obiect în users matrice. Se schimbă pentru că are aceeași referință. (Pentru o explicație mai bună a ceea ce se întâmplă, verificați Acest articol ).

Întrebarea este: ce va fi afișat în consola care este apelată pe linia 6?

Când deschidem acest exemplu în Chrome și Firefox, obiectul este prăbușit. Apoi, după expansiune, vedem valorile:

Activat este setat la false, chiar dacă valoarea a fost true în momentul ieșirii. Motivul din spatele acestui fapt este că valoarea obiectului este evaluată pentru prima dată când facem clic pentru a extinde obiectul (citire leneșă).

Notă: Chrome va afișa o pictogramă de informații care afirmă: „Valoarea de mai jos a fost evaluată chiar acum”.

Să aruncăm o privire acum asupra Safari:

Hm, activat este setat la adevărat. Deci, putem vedea că există unele inconsecvențe între browsere. Safari va încerca să extindă automat obiectul. Dacă obiectul / matricea este prea mare, acesta se va prăbuși și se va comporta la fel ca Chrome și Firefox.

O modalitate de a evita acest lucru este de a folosi JSON.stringify(), de exemplu
console.log("users", JSON.stringify(users, null, 2));

care va produce următoarea ieșire către consolă:

Din păcate, cu această abordare nu puteți extinde / restrânge un obiect. Valoarea nu va fi mutată.

Sunt un mare fan al paradigmei funcționale de programare și a variabilelor imuabile. Pentru a modifica obiectul, creați o clonă care este apoi modificată. În acest caz, nu ați experimenta acest tip de „problemă”. Așa că am putea scrie așa ceva:

În funcția de hartă, acum clonăm obiectul utilizator pe care îl modificăm și îl returnăm.

În cazul în care rămâneți cu mutația obiectului, Zoran Jambor a adăugat o altă soluție inteligentă:
console.log("users", ...users);
Deci matricea de utilizatori este distrusă și o listă de obiecte este afișată în consolă:

Dar și aici trebuie să fim atenți. Dacă valoarea obiectului a fost mutată, ieșirea consolei se va modifica la extindere:

În cazul în care doriți să fiți absolut sigur că obiectul, care a fost înregistrat, are aceeași valoare ca în timpul console.log, va trebui să faceți o clonă profundă a acestuia. De exemplu, am putea folosi următoarea funcție de ajutor în loc să scriem direct pe consolă:

Pe linia 3 creăm de fapt o clonă profundă a obiectului, care dă următoarea ieșire:

Acum valoarea obiectului nu este modificată la extindere.

Dacă utilizați un depanator, adăugarea unui punct de întrerupere la linia 6 va întrerupe execuția. Veți vedea valoarea obiectului curent. Dacă preferați consola de cele mai multe ori, rețineți că obiectul / matricea este evaluat la prima expansiune.

Verifică acest mare articol despre cum să utilizați depanatorul browserului.

Mulțumesc că ai citit. Vă rugăm să îl împărtășiți cu oricine ar putea găsi util și lăsați feedback. (Aceasta este prima mea poveste pe Medium și aș vrea să continui să scriu și să mă îmbunătățesc).