ProHoster > Blogs > Interneta ziņas > Oops, es atkal to izdarīju: izsekojums izplatītākajām kļūdām JavaScript

Oops, es atkal to izdarīju: izsekojums izplatītākajām kļūdām JavaScript

Oops, es atkal to izdarīju: izsekojums izplatītākajām kļūdām JavaScript

Dažreiz JavaScript koda rakstÄ«Å”ana var bÅ«t sarežģīta, un dažiem izstrādātājiem tā pat var radÄ«t bailes. Darba procesā neizbēgami rodas kļūdas, un dažas no tām atkārtojas diezgan bieži. Å ajā rakstā, kas paredzēts iesācējiem izstrādātājiem, tiek apskatÄ«tas Ŕīs kļūdas un to novērÅ”anas veidi. Piemēri funkciju, Ä«paŔību un objektu nosaukumi ņemti no populāras dziesmas. Tas viss palÄ«dz ātri atcerēties, kā labot izplatÄ«tas kļūdas.

Atgādinām: visiem Ā«HabrĀ» lasÄ«tājiem ā€” atlaide 10 000 rubļu reÄ£istrējoties jebkurā Skillbox kursā ar promo kodu Ā«HabrĀ».

Skillbox iesaka: Praktiskais kurss Ā«Mobilais izstrādātājs PROĀ».

TypeError: Ä«paŔība nav definēta

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)

IepriekÅ” norādÄ«tais koda piemērs atgriež kļūdu Uncaught TypeError: Cannot read property ā€˜luckyā€™ of undefined. Problēma ir tāda, ka objektam girl nav Ä«paŔības named, lai gan ir Ä«paŔība name. Tā kā Ä«paŔība girl.named nav definēta, pie tās nevar piekļūt, jo formāli tā nepastāv. Tomēr, ja aizstāt girl.named.lucky ar girl.name, viss darbosies un programma atgriezÄ«s Lucky.

Vairāk par īpaŔībām var izlasīt Ŕeit.

TypeError kļūdu novērÅ”anas veidi

TypeError kļūdas rodas, kad programmētājs mēģina veikt darbÄ«bas ar datiem, kas neatbilst noteiktam tipam. Piemēram, var pieminēt .bold() izmantoÅ”anu, pieprasot undefined Ä«paŔību vai izsaucot funkciju, kas faktiski nav funkcija.

Tādējādi, ja mēģināt izsaukt girl(), parādīsies kļūda Uncaught TypeError: yourVariable.bold is not a function un girl is not a function, jo faktiski tiek izsaukts objekts, nevis funkcija.

Lai novērstu kļūdas, ir jāizpēta mainÄ«gie. Tādējādi, kas ir girl? Un kas ir girl.named? To var noskaidrot, ja analizējam kodu, izmantojam console.log, ievieÅ”am debugger komandu vai izsaucam mainÄ«gā nosaukumu konsolē. JānodroÅ”ina, ka ir iespējams strādāt ar datu tipu, kas satur mainÄ«gais. Ja tas nepiemērots, mainiet to, piemēram, pievienojot nosacÄ«jumu vai try..catch bloku ā€” un iegÅ«stiet kontroli pār operācijas izpildi.

Steka pārpildījums

Ja ticēt dziesmas Baby One More Time autoriem (tas ir Britney Spears, jā), tad vārds hit Å”ajā kontekstā nozÄ«mē dziedātājas vēlmi, lai viņai piezvana vēlreiz (Å”eit ir paÅ”a dziesmas konteksta skaidrojums ā€” tulkotāja piezÄ«me). Pavisam iespējams, ka Ŕī vēlme radÄ«s zvanu pieaugumu reālajā dzÄ«vē. Bet programmÄ“Å”anā tas ir rekursija, kas var izraisÄ«t kļūdu, ja aicinājumu steks ir pārpildÄ«ts.

Kļūdas izskatās Ŕādi:

Error: Out of stack space (Edge)
InternalError: too much recursion (Firefox)
RangeError: Maximum call stack size exceeded (Chrome)

Steka pārplÅ«de notiek, ja izstrādātājs nav ņēmis vērā pamata gadÄ«jumu rekursijā, vai ja kods nepievērÅ”as paredzētajam gadÄ«jumam.

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

Šajā gadījumā stillBelieve nekad nevar pieņemt vērtību false, tāpēc katru reizi notiks oneMoreTime izsaukums, bet funkcijas izpilde tā arī nebeigsies.

Ja sāksim cerēt uz diviem draugiem, tas samazinās loneliness (vienatni), un zvanu varbūt nemaz nevajadzēs gaidīt.

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

Par piemēru var minēt bezgalÄ«gos ciklus, kad sistēma neizdod kļūdas ziņojumu, bet lapa, kurā tiek izpildÄ«ts JavaScript kods, vienkārÅ”i sasalst. Tas notiek, ja while ciklam nav pabeigÅ”anas nosacÄ«juma.

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

Problēmu var atrisināt Ŕādā veidā:

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

Bezgala ciklu un rekursiju atkļūdoŔana

Ja rodas problēma ar bezgalÄ«gu ciklu, Chrome vai Edge jāaizver cilne, bet Firefox ā€” pārlÅ«kprogrammas logs. Pēc tam rÅ«pÄ«gi jāpārbauda kode. Ja problēmu neizdodas atrast, vērts pievienot debugger komandu ciklam vai funkcijai un pārbaudÄ«t mainÄ«go vērtÄ«bas. Ja rezultāts neatbilst gaidÄ«tajam, to var viegli aizstāt.

Piemērā, kas minēts iepriekÅ”, debugger jāievieto funkcijas vai cilpas pirmajā rindā. Pēc tam jāatver debaga cilne Chrome, lai analizētu mainÄ«gās scope. Ar next pogu var izsekot to izmaiņām katrā iterācijā. To visu izdarÄ«t ir vienkārÅ”i, un lielākajā daļā gadÄ«jumu problēma ir atrodama.

Sīkāk par to visu var lasīt Ŕeit (Chrome) un Ŕeit (Firefox).

Sintakses kļūda

Viens no visbiežākajām kļūdām JavaScript ir SyntaxError. To novērst palÄ«dzēs teksta redaktora paplaÅ”inājumi. Tātad, Bracket Pair Colorizer iezÄ«mē iekavas kodā ar dažādām krāsām, bet Prettier vai lÄ«dzÄ«gs analÄ«zes rÄ«ks ļauj ātri atrast kļūdas. Labākais variants, lai samazinātu SyntaxError iespējamÄ«bu, ir minimāla iedziļināŔanās.

Dalieties komentāros: ko jūs darāt, lai nepieļautu kļūdas vai ātri tās atklātu un novērstu?

Skillbox iesaka:

Avots: habr.com

Iegādājieties uzticamu tÄ«mekļa hostingu ar DDoS aizsardzÄ«bu, VPS VDS serveriem šŸ”„ Iegādājieties uzticamu tÄ«mekļa hostingu ar DDoS aizsardzÄ«bu, VPS VDS serveriem | ProHoster