Úbbs, ég gerði það aftur: Kembi algengar villur í JavaScript

Að skrifa JavaScript kóða getur verið krefjandi og stundum beinlínis ógnvekjandi eins og margir forritarar kannast við. Í vinnuferlinu koma óhjákvæmilega upp villur og sumar þeirra eru endurteknar oft. Þessi grein, sem miðar að nýliða verktaki, fjallar um þessar villur og hvernig á að leysa þær. Til glöggvunar eru nöfn falla, eiginleika og hluta tekin úr vinsælt lag. Allt þetta hjálpar þér að muna fljótt hvernig á að leiðrétta algeng mistök.

Við minnum á: fyrir alla Habr lesendur - 10 rúblur afsláttur þegar þú skráir þig á hvaða Skillbox námskeið sem er með því að nota Habr kynningarkóðann.

Skillbox mælir með: Verklegt námskeið "Mobile Developer PRO".

TypeError: eiginleiki er ekki skilgreindur

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)

Dæmiskóðinn hér að ofan kastar villunni Uncaught TypeError: Get ekki lesið eignina „heppinn“ óskilgreinds. Vandamálið er að stelpuhluturinn er ekki með nafngreindan eiginleika, þó hann hafi nafneiginleika. Og þar sem eignin girl.named er ekki skilgreind geturðu ekki nálgast hana, því formlega er hún ekki til. En ef þú skiptir út girl.named.lucky fyrir girl.name, þá mun allt virka og forritið mun skila Lucky.

Þú getur lært meira um eignirnar lesið hér.

Hvernig á að leysa TypeErrors

TypeVillar eiga sér stað þegar forritari reynir að framkvæma aðgerðir á gögnum sem passa ekki við tiltekna gerð. Sem dæmi má nefna að nota .bold(), biðja um óskilgreindan eiginleika eða kalla fall sem er í raun ekki fall.

Þannig að ef þú reynir að hringja í girl() færðu villuna Uncaught TypeError: yourVariable.bold er ekki fall og stelpa er ekki fall, því það er í raun hlutur sem er kallaður á, ekki fall.

Til að útrýma villum þarftu að rannsaka breyturnar. Svo, hvað er stelpa? Hvað er girl.named? Þú getur komist að því með því að greina kóðann, sýna breytur með því að nota console.log, villuleitarskipunina eða kalla á breytuheitið í stjórnborðinu. Þú þarft að ganga úr skugga um að hægt sé að vinna á gagnategundinni sem er í breytunni. Ef það passar ekki, breyttu því til dæmis, bættu við skilyrði eða reyndu..catch block - og fáðu stjórn á framkvæmd aðgerðarinnar.

Stafl flæða

Ef þú trúir höfundum textans við lagið Baby One More Time (þetta er Britney Spears, já), þá þýðir orðið högg í þessu samhengi löngun söngvarans til að vera kallaður aftur (hér er útskýring á sjálfu samhenginu við lag - athugasemd þýðanda). Það getur vel verið að þessi löngun leiði til þess að símtölum fjölgi í raunveruleikanum. En í forritun er þetta endurkoma sem getur valdið villu ef kallstaflan flæðir yfir.

Villurnar líta svona út:

Villa: Upplaust staflapláss (Edge)
Innri villa: of mikið endurtekning (Firefox)
RangeError: Farið yfir hámarksstærð símtala (Chrome)

Staflaflæði á sér stað ef verktaki lítur ekki á grunntilvikið í endurtekinu, eða ef kóðinn tekur ekki á fyrirhuguðu tilviki.

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

Í þessu tilviki getur stillBelieve aldrei verið rangt, svo einnMoreTime verður kallaður í hvert sinn, en aðgerðin mun aldrei ljúka.

Ef þú byrjar að treysta á tvo vini mun þetta draga úr einmanaleika og þú þarft ekki að bíða eftir símtali.

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

Dæmi eru tilvik með óendanlegar lykkjur, þegar kerfið býr ekki til villuboð, en síðan sem JavaScript kóðinn er keyrður á frýs einfaldlega. Þetta gerist ef while lykkjan hefur ekki uppsagnarskilyrði.

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

Þú getur leyst vandamálið á eftirfarandi hátt:

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

Villuleit óendanlegar lykkjur og endurtekningar

Ef þú ert með óendanlega lykkjuvandamál þarftu að loka flipanum í Chrome eða Edge og loka vafraglugganum í Firefox. Eftir þetta þarftu að greina kóðann vandlega. Ef þú finnur ekki vandamálið er það þess virði að bæta villuleitarskipun við lykkjuna þína eða aðgerðina og athuga gildi breytanna. Ef niðurstaðan er ekki í samræmi við það sem búist var við, þá skiptum við um hana, þetta er auðvelt að gera.

Í dæminu hér að ofan ætti villuleit að bæta við sem fyrstu línu fallsins eða lykkjunnar. Síðan þarftu að opna villuleitarflipann í Chrome og greina breyturnar í umfangi. Með því að nota næsta hnapp geturðu fylgst með breytingum þeirra við hverja endurtekningu. Allt þetta er auðvelt að gera og í flestum tilfellum finnst vandamálið.

Þú getur lesið meira um þetta allt hér (fyrir króm) og hér (fyrir Firefox).

Setningarvilla

Ein algengasta villan í JavaScript er SyntaxError. Textaritill viðbætur munu hjálpa þér að forðast þær. Til dæmis, Bracket Pair Colorizer merkir sviga í kóðanum með mismunandi litum og Prettier eða svipað greiningartæki gerir það mögulegt að finna villur fljótt. Besti kosturinn til að draga úr líkum á SyntaxError er lágmarks hreiður.

Deildu í athugasemdunum: hvað gerir þú til að koma í veg fyrir mistök eða uppgötva þau fljótt og útrýma þeim?

Skillbox mælir með:

• Tveggja ára verklegt nám „Ég er PRO vefhönnuður“.
• Rafræn fræðsla "C# verktaki frá 0".
• Hagnýtt eins árs nám "PHP verktaki frá 0 til PRO".

Heimild: www.habr.com