Mnogi programeri ne koriste program za ispravljanje pogrešaka tijekom razvoja. Umjesto toga, oslanjaju se na svog starog prijatelja console.log().
Važno je napomenuti da konzola prikazuje vrijednost objekta koja se procjenjuje u trenutku prvog proširenja u konzoli.
Prvo, dopustite mi da pojasnim što mislim pod proširenjem. Kada console.logobjekt (koji također pokriva nizove), vrijednost objekta se skuplja. Na primjer:
console.log( "users: ", [{name: "John"}]);
Konzola preglednika izgledat će ovako:
Zatim, kad kliknete trokut, objekt se širi. U to se točno vrijeme vrijednost objekta procjenjuje i prikazuje.
Zaronimo više u ovo i pogledajmo primjer:
U retku 1 inicijaliziramo novu usersvarijablu, koja je niz objekata.
U redak 6 zapisujemo vrijednost usersvarijable na konzolu.
Dalje, prelistamo users, provjerimo je li korisnik valjan i ovisno o povratu onemogućimo korisnika. Radi argumenta, pretpostavimo da se izvršava validateUser()return falsei kôd u retku 10.
Iako mapstvara novi niz, promjena userobjekta također mijenja userobjekt u usersnizu. Mijenja se jer ima istu referencu. (Za bolje objašnjenje što se događa pogledajte ovaj članak).
Pitanje je: što će biti prikazano u konzoli koja se zove na liniji 6?
Kada otvorimo ovaj primjer u Chromeu i Firefoxu, objekt je sažet. Tada nakon proširenja vidimo vrijednosti:
Omogućeno je postavljeno na false, iako je vrijednost bila trueu vrijeme izlaza. Razlog tome je što se vrijednost objekta procjenjuje prvi put kad kliknemo za proširenje objekta (lijeno čitanje).
Pogledajmo sada Safari:
Hm, omogućeno je postavljeno na true. Tako možemo vidjeti da postoje neke nedosljednosti između preglednika. Safari će pokušati automatski proširiti objekt. Ako je objekt / niz prevelik, urušit će se i ponašati se na isti način kao Chrome i Firefox.
Jedan od načina da se to zaobiđe je upotreba JSON.stringify(),npr
console.log("users", JSON.stringify(users, null, 2));
koji će proizvesti sljedeći izlaz na konzolu:
Nažalost, ovim pristupom ne možete proširiti / sažeti objekt. Vrijednost neće biti mutirana.
Veliki sam ljubitelj paradigme funkcionalnog programiranja i nepromjenjivih varijabli. Da biste izmijenili objekt, stvorite klon koji se zatim modificira. U tom slučaju ne biste doživjeli ovu vrstu "problema". Tako bismo mogli napisati nešto ovako:
U funkciji mape sada kloniramo korisnički objekt koji mijenjamo i vraćamo.
U slučaju da ostanete s mutacijom predmeta, Zoran Jambor dodao je još jedno pametno rješenje:
console.log("users", ...users);
Dakle, niz korisnika je uništen, a popis objekata prikazan je u konzoli:
Ali ovdje također moramo biti oprezni. Ako je vrijednost objekta mutirana, izlaz konzole promijenit će se pri proširenju:
U slučaju da želite biti apsolutno sigurni da objekt koji je zabilježen ima istu vrijednost kao tijekom console.log, morat ćete ga duboko klonirati. Na primjer, mogli bismo koristiti sljedeću pomoćnu funkciju umjesto da izravno pišemo na konzolu:
Na liniji 3 zapravo stvaramo duboki klon objekta koji daje sljedeći rezultat:
Sada se vrijednost objekta ne mijenja prilikom proširenja.
Ako koristite program za ispravljanje pogrešaka, dodavanje točke prekida u redak 6 zaustavit će izvršenje. Vidjet ćete vrijednost trenutnog objekta. Ako preferirate konzolu većinu vremena, imajte na umu da se objekt / niz procjenjuje pri prvom proširenju.
Pogledajte ovaj sjajni članak o tome kako koristiti program za ispravljanje pogrešaka vašeg preglednika.
Hvala na čitanju. Podijelite ga sa svima koji bi vam mogli biti korisni i ostavite povratne informacije. (Ovo je moja prva priča o Medijumu i želio bih nastaviti pisati i poboljšati se).