Mi kerül naplózásra a konzolba, amikor objektumokat mutál

Sok fejlesztő nem használ hibakeresőt fejlesztés közben. Ehelyett régi barátjukra hagyatkoznak console.log().

Fontos megjegyezni, hogy a konzol megmutatja az objektum értékét, amelyet kiértékelnek a konzol első bővítésének idején.

Először hadd tisztázzam, mit értek a bővítés alatt. Amikor console.logegy objektumot (amely tömböket is lefed), az objektum értéke összeomlik. Például:

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

A böngésző konzolja így fog kinézni:

Ezután, amikor a háromszögre kattint, az objektum kibővül. Pontosan ekkor kiértékeli és megjeleníti az objektum értékét.

Merüljünk el jobban ebben, és nézzünk meg egy példát:

Az 1. vonalon egy új usersváltozót inicializálunk , amely egy objektum tömb.

A 6. sorban a usersváltozó értékét írjuk a konzolra.

Ezután iterálunk users, ellenőrizzük, hogy a felhasználó érvényes-e, és a visszatéréstől függően letiltjuk a felhasználót. Az érvelés kedvéért tegyük fel, hogy a validateUser()visszatérések falseés a 10. sor kódja végrehajtásra kerül.

Annak ellenére, hogy mapteremt egy új tömböt, változik a usertárgy is változik a usertárgy a userstömbben. Változik, mert ugyanaz a hivatkozás. (A történések jobb magyarázatához nézze meg ezt a cikket).

A kérdés az: mi fog megjelenni a konzolon, amelyet a 6. vonalon hívnak?

Amikor megnyitjuk ezt a példát a Chrome-ban és a Firefoxban, az objektum összeomlik. Majd a bővítéskor látjuk az értékeket:

Az Enabled falseértékre van állítva , annak ellenére, hogy az érték truea kimenet időpontjában volt. Ennek oka az, hogy az objektum értékét először értékelik, amikor rákattintunk az objektum kibontására (lusta olvasás).

Megjegyzés: A Chrome információs ikont jelenít meg, amely a következőket írja: „Az alábbi értéket most értékeltük fel.

Vessünk egy pillantást a Safarira:

Hm, engedélyezve értéke true. Tehát láthatjuk, hogy vannak ellentmondások a böngészők között. A Safari megpróbálja automatikusan kibővíteni az objektumot. Ha az objektum / tömb túl nagy, összeomlik és ugyanúgy fog viselkedni, mint a Chrome és a Firefox.

Ennek egyik megkerülési módja JSON.stringify(),pl

console.log("users", JSON.stringify(users, null, 2));

amely a következő kimenetet produkálja a konzolra:

Sajnos ezzel a megközelítéssel nem lehet kibővíteni / összecsukni az objektumot. Az érték nem lesz mutálva.

Nagy rajongója vagyok a funkcionális programozási paradigmának és a megváltoztathatatlan változóknak. Az objektum módosításához létrehoz egy klónt, amelyet ezután módosít. Ebben az esetben nem tapasztalna ilyenfajta „problémát”. Így írhatnánk ilyesmit:

A térképfunkcióban most klónozzuk a módosított és visszaadott felhasználói objektumot.

Ha betartja az objektummutációt, Zoran Jambor újabb okos megoldást adott hozzá:

console.log("users", ...users);

Tehát a felhasználói tömb megsemmisült, és az objektumok listája megjelenik a konzolon:

De itt is vigyáznunk kell. Ha az objektum értéke mutált, a konzol kimenete megváltozik a bővítéskor:

Abban az esetben, ha teljesen biztos akar lenni abban, hogy a naplózott objektumnak ugyanaz az értéke, mint a konzol.log során, akkor mély klónot kell készítenie róla. Például a következő segítő funkciót használhatjuk a konzolra történő közvetlen írás helyett:

A 3. vonalon valóban létrehozunk egy mély klónot az objektumból, amely a következő kimenetet adja:

Most az objektum értéke nem változik a bővítés során.

Hibakeresőt használ, ha töréspontot ad a 6. sorhoz, a végrehajtás szünetel. Látni fogja az aktuális objektum értékét. Ha a konzolt részesíti előnyben legtöbbször, ne feledje, hogy az objektum / tömb kiértékelése megtörtént az első bővítéskor.

A böngésző hibakeresőjének használatáról olvassa el ezt a nagyszerű cikket.

Köszönöm, hogy elolvasta. Kérjük, ossza meg mindazokkal, akik hasznosnak találják, és küldjön visszajelzést. (Ez az első történetem a Medium-on, és szeretnék folytatni az írást, és jobbá válnék benne).