Oih, tegin seda uuesti: JavaScripti levinumate vigade silumine

JavaScripti koodi kirjutamine võib olla keeruline ja mõnikord lausa hirmutav, nagu paljud arendajad tunnevad. Töö käigus tekivad paratamatult vead ja osa neist kordub sageli. See algajatele arendajatele mõeldud artikkel räägib nendest vigadest ja nende lahendamisest. Selguse huvides on funktsioonide, omaduste ja objektide nimed võetud populaarne laul. Kõik see aitab teil kiiresti meeles pidada, kuidas levinud vigu parandada.

Tuletame meelde: kõigile "Habr" lugejatele - allahindlus 10 000 rubla, kui registreerute mis tahes Skillboxi kursusele, kasutades sooduskoodi "Habr".

Skillbox soovitab: Praktiline kursus "Mobile Developer PRO".

TypeError: atribuut ei ole määratletud

let girl = {
    name: "Lucky",
    location: "Hollywood",
    profession: "star",
    thingsMissingInHerLife: true,
    lovely: true,
    cry: function() {
        return "cry, cry, cries in her lonely heart"
    }
}
console.log(girl.named.lucky)

Ülaltoodud näitekood annab tõrketeate Uncaught TypeError: Undefined atribuuti 'lucky' ei saa lugeda. Probleem on selles, et tüdruku objektil ei ole nime omadust, kuigi sellel on nimi omadus. Ja kuna girl.named atribuut pole defineeritud, siis sellele ligi ei pääse, kuna formaalselt seda ei eksisteeri. Kui aga asendada girl.named.lucky nimega girl.name, siis kõik töötab ja programm tagastab Lucky.

Omaduste kohta saate lisateavet loe siit.

Kuidas tüübivigu lahendada

Tüübivead ilmnevad siis, kui programmeerija üritab teha toiminguid andmetega, mis ei vasta kindlale tüübile. Näited hõlmavad .bold() kasutamist, määratlemata atribuudi küsimist või funktsiooni kutsumist, mis ei ole tegelikult funktsioon.

Seega, kui proovite kutsuda girl(), kuvatakse viga Uncaught TypeError: yourVariable.bold ei ole funktsioon ja girl ei ole funktsioon, kuna see on tegelikult objekt, mida kutsutakse, mitte funktsioon.

Vigade kõrvaldamiseks peate muutujaid uurima. Niisiis, mis on tüdruk? Mis on girl.named? Seda saate teada koodi analüüsimisel, muutujate kuvamisel console.logi, silurikäsu abil või muutuja nime kutsumisel konsoolis. Peate veenduma, et muutujas sisalduva andmetüübiga on võimalik opereerida. Kui see ei sobi, siis muuda seda, lisa näiteks tingimus või proovi..catch block – ja saavuta kontroll toimingu sooritamise üle.

Virna ületäitumine

Kui uskuda loo Baby One More Time sõnade autoreid (see on Britney Spears, jah), siis sõna hitt tähendab selles kontekstis laulja soovi saada uuesti helistada (siin on selgitus laulu konteksti kohta). laul – tõlkija märkus). Võib juhtuda, et see soov toob tegelikus elus kaasa kõnede arvu suurenemise. Kuid programmeerimisel on see rekursioon, mis võib kutsupinu ületäitumisel põhjustada tõrke.

Vead näevad välja sellised:

Viga: virna ruum otsas (serv)
Sisemine viga: liiga palju rekursiooni (Firefox)
RangeError: kõnevirna maksimaalne suurus on ületatud (Chrome)

Viru ületäitumine toimub siis, kui arendaja ei arvesta rekursioonis põhijuhtumit või kui kood ei käsitle kavandatud juhtumit.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness++
    return oneMoreTime(stillBelieve, loneliness)
}

Sel juhul ei saa stillBelieve kunagi olla vale, nii et oneMoreTime kutsutakse iga kord, kuid funktsioon ei jõua kunagi lõpule.

Kui hakkate lootma kahele sõbrale, vähendab see üksindust ja te ei pea kõnet ootama.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness--
    stillBelieve = false
    return oneMoreTime(stillBelieve, loneliness)
}

Näitena võib tuua lõpmatu tsükliga juhtumid, kus süsteem ei genereeri veateadet, vaid leht, millel JavaScripti koodi käivitatakse, lihtsalt hangub. See juhtub siis, kui while-ahelal ei ole lõpetamise tingimust.

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
}

Saate probleemi lahendada järgmiselt.

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
  worldEnded = true
}

Lõpmatute silmuste ja rekursioonide silumine

Kui teil on lõpmatu tsükli probleem, peate sulgema Chrome'is või Edge'is vahekaardi ja Firefoxis brauseriakna. Pärast seda peate koodi hoolikalt analüüsima. Kui te probleemi ei leia, tasub tsüklile või funktsioonile lisada silurikäsk ja kontrollida muutujate väärtusi. Kui tulemus ei vasta oodatule, siis asendame selle, seda saab teha lihtsalt.

Ülaltoodud näites tuleks funktsiooni või tsükli esimeseks reaks lisada silur. Seejärel peate avama Chrome'is silumiskaardi, analüüsides muutujaid ulatuse ulatuses. Järgmise nupu abil saate jälgida nende muudatusi igal iteratsioonil. Seda kõike on lihtne teha ja enamikul juhtudel leitakse probleem.

Kõige selle kohta saad täpsemalt lugeda siit (kroomile) ja siin (Firefoxi jaoks).

Süntaksiviga

Üks levinumaid JavaScripti vigu on SyntaxError. Tekstiredaktori laiendused aitavad teil neid vältida. Näiteks Bracket Pair Colorizer tähistab sulud koodis erinevate värvidega ning Prettier või sarnane analüüsitööriist võimaldab kiiresti vigu leida. Parim võimalus SyntaxErrori tõenäosuse vähendamiseks on minimaalne pesastamine.

Jagage kommentaarides: mida teete vigade vältimiseks või nende kiireks tuvastamiseks ja kõrvaldamiseks?

Skillbox soovitab:

• Kaheaastane praktiline kursus "Ma olen PRO veebiarendaja".
• Veebikursus "C# arendaja alates 0".
• Praktilise aasta kursus "PHP arendaja 0-st PRO-le".

Allikas: www.habr.com