Kas prisijungiama prie konsolės, kai mutuojate objektus
Daugelis kūrėjų nenaudoja derintuvo kurdami. Užtat jie pasikliauja savo senu draugu console.log().
Svarbu pažymėti, kad konsolė rodo objekto vertę, kuri yra įvertinta pirmojo išplėtimo metu konsolėje.
Pirmiausia leiskite man patikslinti, ką noriu pasakyti apie plėtrą. Kai mes console.logobjektą (kuris taip pat apima masyvus), objekto vertė sutrinka. Pavyzdžiui:
console.log( "users: ", [{name: "John"}]);
Naršyklės pultas atrodys taip:
Tada, spustelėjus trikampį, objektas išsiplečia. Tuo metu objekto vertė yra įvertinta ir rodoma.
Pasinerkime į tai daugiau ir pažiūrėkime pavyzdį:
1 eilutėje inicijuojame naują userskintamąjį, kuris yra objektų masyvas.
6 eilutėje mes rašome userskintamojo vertę į konsolę.
Toliau kartojame users, patikriname, ar vartotojas teisingas, ir, atsižvelgiant į grąžą, išjungiame vartotoją. Dėl argumento, tarkime, kad 10 eilutėje įvykdomi validateUser()grąžinimai falseir kodas.
Nors mapkuriant naują masyvą, keičiant userobjektą, keičiamas userir usersmasyvo objektas . Jis keičiasi, nes turi tą pačią nuorodą. (Norėdami geriau paaiškinti, kas vyksta, peržiūrėkite šį straipsnį).
Kyla klausimas: kas bus rodoma konsolėje, kuri vadinama 6 linija?
Kai atidarome šį pavyzdį „Chrome“ ir „Firefox“, objektas sutraukiamas. Išsiplėtę matome vertybes:
Įjungta yra nustatyta į false, net jei vertė buvo trueišvesties metu. Priežastis yra ta, kad objekto vertė vertinama pirmą kartą, kai spustelėjame, norėdami išplėsti objektą (tingus skaitymas).
Pažvelkime į „Safari“:
Hm, įgalinta nustatyta į „true“. Taigi galime pastebėti, kad tarp naršyklių yra keletas neatitikimų. „Safari“ bandys automatiškai išplėsti objektą. Jei objektas / masyvas yra per didelis, jis sugrius ir elgsis taip pat, kaip „Chrome“ ir „Firefox“.
Vienas iš būdų tai apeiti yra naudoti JSON.stringify(),pvz
console.log("users", JSON.stringify(users, null, 2));
kuris konsolei pateiks tokią išvestį:
Deja, taikant šį metodą negalima išplėsti / sutraukti objekto. Vertė nebus mutuota.
Esu didelis funkcinės programavimo paradigmos ir nekintamų kintamųjų gerbėjas. Norėdami modifikuoti objektą, sukuriate kloną, kuris tada modifikuojamas. Tokiu atveju jūs nepatirtumėte tokios „problemos“. Taigi galėtume parašyti maždaug taip:
Žemėlapio funkcijoje dabar klonuojame vartotojo objektą, kurį modifikuojame ir grąžiname.
Jei laikysitės objekto mutacijos, Zoranas Jamboras pridėjo dar vieną protingą sprendimą:
console.log("users", ...users);
Taigi vartotojų masyvas yra sunaikintas, o konsolėje rodomas objektų sąrašas:
Bet čia mes taip pat turime būti atsargūs. Jei objekto vertė buvo pakeista, konsolės išvestis pasikeis plečiant:
Jei norite būti visiškai tikri, kad užregistruotas objektas turi tą pačią vertę, kokią jis turėjo „console.log“ metu, turėsite sukurti gilų jo kloną. Pavyzdžiui, užuot rašę tiesiogiai į konsolę, galime naudoti šią pagalbinės funkcijos funkciją:
3 eilutėje mes iš tikrųjų kuriame gilų objekto kloną, kuris suteikia tokį išėjimą:
Dabar objekto vertė plečiant nekinta.
Jei naudojate derintuvą, pridedant pertraukimo tašką prie 6 eilutės, vykdymas bus sustabdytas. Pamatysite dabartinio objekto vertę. Jei dažniausiai pageidaujate konsolės, atminkite, kad objektas / masyvas įvertinamas per pirmąjį išplėtimą.
Peržiūrėkite šį puikų straipsnį, kaip naudoti savo naršyklės derintuvą.
Ačiū, kad skaitėte. Prašau pasidalinti ja su visais, kuriems tai gali būti naudinga, ir pateikti atsiliepimų. (Tai mano pirmoji „Medium“ istorija ir norėčiau toliau rašyti ir tobulėti).
