Hups, tein sen uudelleen: JavaScriptin yleisten virheiden korjaaminen

JavaScript-koodin kirjoittaminen voi olla haastavaa ja joskus suorastaan ​​pelottavaa, kuten monet kehittäjät tietävät. Työprosessissa virheitä syntyy väistämättä, ja jotkut niistä toistuvat usein. Tämä aloitteleville kehittäjille suunnattu artikkeli kertoo näistä virheistä ja niiden ratkaisemisesta. Selvyyden vuoksi funktioiden, ominaisuuksien ja objektien nimet on otettu suosittu laulu. Kaikki tämä auttaa sinua muistamaan nopeasti, kuinka korjata yleiset virheet.

Muistutamme sinua: kaikille "Habrin" lukijoille - 10 000 ruplan alennus ilmoittautuessaan mille tahansa Skillbox-kurssille "Habr" -tarjouskoodilla.

Skillbox suosittelee: Käytännön kurssi "Mobile Developer PRO".

TypeError: ominaisuutta ei ole määritetty

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)

Yllä oleva esimerkkikoodi antaa virheen Uncaught TypeError: Cannot read (lucky) ominaisuudesta undefined. Ongelmana on, että tyttöobjektilla ei ole nimettyä ominaisuutta, vaikka sillä on nimiominaisuus. Ja koska girl.named-omaisuutta ei ole määritelty, et voi käyttää sitä, koska muodollisesti sitä ei ole olemassa. Mutta jos korvaat girl.named.luckyn sanalla tyttö.nimi, kaikki toimii ja ohjelma palauttaa Luckyn.

Voit oppia lisää kiinteistöistä lue täältä.

Kuinka ratkaista TypeErrors

Tyyppivirheitä ilmenee, kun ohjelmoija yrittää suorittaa toimintoja tiedoille, jotka eivät vastaa tiettyä tyyppiä. Esimerkkejä ovat .bold(), määrittämättömän ominaisuuden pyytäminen tai funktion kutsuminen, joka ei itse asiassa ole funktio.

Joten jos yrität kutsua tyttö(), saat virheilmoituksen Uncaught TypeError: yourVariable.bold ei ole funktio ja tyttö ei ole funktio, koska se on itse asiassa kutsuttava objekti, ei funktio.

Virheiden poistamiseksi sinun on tutkittava muuttujia. Joten mikä on tyttö? Mikä on tyttö.niminen? Voit selvittää sen analysoimalla koodia, näyttämällä muuttujat käyttämällä console.log-komentoa, debugger-komentoa tai kutsumalla muuttujan nimeä konsolissa. Sinun on varmistettava, että muuttujan sisältämää tietotyyppiä voidaan käyttää. Jos se ei sovi, muuta sitä, esimerkiksi lisää ehto tai kokeile..catch block - ja hanki toiminnon suorittamisen hallinta.

Pino ylivuoto

Jos uskot kappaleen Baby One More Time sanoitusten tekijöitä (tämä on Britney Spears, joo), niin sana hitti tarkoittaa tässä yhteydessä laulajan halua tulla kutsutuksi uudelleen (tässä on selitys laulun kontekstista). laulu - kääntäjän huomautus). Voi hyvinkin olla, että tämä halu johtaa puheluiden määrän kasvuun tosielämässä. Mutta ohjelmoinnissa tämä on rekursio, joka voi aiheuttaa virheen, jos puhelupino vuotaa yli.

Virheet näyttävät tältä:

Virhe: pinon tila loppu (reuna)
Sisäinen virhe: liian paljon rekursiota (Firefox)
RangeError: Puhelupinon enimmäiskoko ylitetty (Chrome)

Pinon ylivuoto tapahtuu, jos kehittäjä ei huomioi perustapausta rekursiossa tai jos koodi ei käsittele aiottua tapausta.

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

Tässä tapauksessa stillBelieve ei voi koskaan olla epätosi, joten oneMoreTimea kutsutaan joka kerta, mutta toiminto ei koskaan valmistu.

Jos alat luottaa kahteen ystävään, tämä vähentää yksinäisyyttä, eikä sinun tarvitse odottaa puhelua.

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

Esimerkkinä ovat tapaukset, joissa on ääretöntä silmukkaa, jolloin järjestelmä ei tuota virheilmoitusta, vaan sivu, jolla JavaScript-koodi suoritetaan, yksinkertaisesti jäätyy. Tämä tapahtuu, jos while-silmukalla ei ole lopetusehtoa.

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

Voit ratkaista ongelman seuraavasti:

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

Virheenkorjaus äärettömiä silmukoita ja rekursioita

Jos sinulla on äärettömän silmukan ongelma, sinun on suljettava välilehti Chromessa tai Edgessä ja suljettava selainikkuna Firefoxissa. Tämän jälkeen sinun on analysoitava koodi huolellisesti. Jos et löydä ongelmaa, kannattaa lisätä silmukkaan tai funktioon debuggerikomento ja tarkistaa muuttujien arvot. Jos tulos ei vastaa odotettua, vaihdamme sen, tämä voidaan tehdä helposti.

Yllä olevassa esimerkissä debuggeri tulee lisätä funktion tai silmukan ensimmäiseksi riviksi. Sitten sinun on avattava virheenkorjausvälilehti Chromessa ja analysoitava laajuuden muuttujat. Seuraava-painikkeella voit seurata niiden muutoksia jokaisessa iteraatiossa. Kaikki tämä on helppo tehdä, ja useimmissa tapauksissa ongelma löytyy.

Tästä kaikesta voit lukea lisää täältä (Chromelle) ja täällä (Firefoxille).

Syntaksivirhe

Yksi yleisimmistä JavaScript-virheistä on SyntaxError. Tekstieditorilaajennukset auttavat sinua välttämään niitä. Esimerkiksi Bracket Pair Colorizer merkitsee koodin sulut eri väreillä ja Prettier tai vastaava analyysityökalu mahdollistaa virheiden nopean etsimisen. Paras vaihtoehto SyntaxErrorin todennäköisyyden vähentämiseksi on minimaalinen sisäkkäisyys.

Jaa kommenteissa: mitä teet virheiden estämiseksi tai niiden havaitsemiseksi ja poistamiseksi nopeasti?

Skillbox suosittelee:

• Kahden vuoden käytännön kurssi "Olen PRO-verkkokehittäjä".
• Verkkokurssi "C#-kehittäjä 0:sta".
• Käytännön vuoden kurssi "PHP-kehittäjä 0:sta PRO".

Lähde: will.com