Hmm, es to izdarīju vēlreiz: JavaScript bieži sastopamo kļūdu atkļūdošana

JavaScript koda rakstīšana var būt sarežģīta un dažreiz pat biedējoša, kā tas ir pazīstams daudziem izstrādātājiem. Darba procesā neizbēgami rodas kļūdas, un dažas no tām bieži atkārtojas. Šajā rakstā, kas paredzēts izstrādātājiem iesācējiem, ir runāts par šīm kļūdām un to novēršanu. Skaidrības labad funkciju, īpašību un objektu nosaukumi ir ņemti no populāra dziesma. Tas viss palīdz ātri atcerēties, kā labot izplatītās kļūdas.

Atgādinām: visiem "Habr" lasītājiem - atlaide 10 000 rubļu, reģistrējoties jebkurā Skillbox kursā, izmantojot "Habr" reklāmas kodu.

Skillbox iesaka: Praktiskais kurss "Mobile Developer PRO".

Type Error: rekvizīts nav definēts

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š redzamais piemēra kods rada kļūdu Uncaught TypeError: Nevar nolasīt undefined rekvizītu “lucky”. Problēma ir tā, ka meitenes objektam nav nosaukta īpašuma, lai gan tam ir vārda rekvizīts. Un tā kā girl.named īpašums nav definēts, tam nevar piekļūt, jo formāli tas neeksistē. Bet ja nomainīsi girl.named.lucky ar girl.name, tad viss darbosies un programma atgriezīs Lucky.

Jūs varat uzzināt vairāk par īpašumiem lasīt šeit.

Kā novērst tipa kļūdas

Tipa kļūdas rodas, kad programmētājs mēģina veikt darbības ar datiem, kas neatbilst noteiktam tipam. Piemēri ietver .bold(), nedefinēta rekvizīta pieprasīšanu vai funkcijas, kas faktiski nav funkcija, izsaukšanu.

Tātad, ja mēģināsit izsaukt girl(), tiks parādīta kļūda Uncaught TypeError: yourVariable.bold nav funkcija un meitene nav funkcija, jo patiesībā tas ir objekts, kas tiek izsaukts, nevis funkcija.

Lai novērstu kļūdas, jums ir jāizpēta mainīgie. Tātad, kas ir meitene? Kas ir meitene.nosaukums? To var noskaidrot, analizējot kodu, parādot mainīgos, izmantojot console.log, atkļūdotāja komandu vai izsaucot mainīgā nosaukumu konsolē. Jums jāpārliecinās, vai ir iespējams darboties ar mainīgajā ietverto datu tipu. Ja tas neatbilst, mainiet to, piemēram, pievienojiet nosacījumu vai mēģiniet..catch block - un iegūstiet kontroli pār operācijas izpildi.

Stack Overflow

Ja ticēt dziesmas Baby One More Time vārdu autoriem (tā ir Britnija Spīrsa, jā), tad vārds šlāgeris šajā kontekstā nozīmē dziedātājas vēlmi tikt atkal sauktai (šeit ir izskaidrojums pašam dziesmas kontekstam). dziesma - tulka piezīme). Var gadīties, ka šī vēlme reālajā dzīvē izraisīs zvanu skaita pieaugumu. Bet programmēšanā tā ir rekursija, kas var izraisīt kļūdu, ja zvanu steks pārplūst.

Kļūdas izskatās šādi:

Kļūda: trūkst vietas (mala)
Iekšējā kļūda: pārāk daudz rekursijas (Firefox)
RangeError: pārsniegts maksimālais zvanu steka lielums (Chrome)

Steka pārpilde notiek, ja izstrādātājs rekursijā neņem vērā bāzes gadījumu vai ja kods nerisina paredzēto gadījumu.

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

Šajā gadījumā stillBelieve nekad nevar būt nepatiesa, tāpēc oneMoreTime tiks izsaukts katru reizi, bet funkcija nekad netiks pabeigta.

Ja sākat paļauties uz diviem draugiem, tas samazinās vientulību un jums nebūs jāgaida zvans.

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

Kā piemēru var minēt gadījumus ar bezgalīgām cilpām, kad sistēma neģenerē kļūdas ziņojumu, bet lapa, kurā tiek izpildīts JavaScript kods, vienkārši sasalst. Tas notiek, ja kamēr cilpai nav beigu nosacījuma.

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

Jūs varat atrisināt problēmu šādi:

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

Bezgalīgu cilpu un rekursiju atkļūdošana

Ja jums ir bezgalīgas cilpas problēma, pārlūkā Chrome vai Edge ir jāaizver cilne un pārlūkprogrammā Firefox jāaizver pārlūkprogrammas logs. Pēc tam jums rūpīgi jāanalizē kods. Ja nevarat atrast problēmu, ir vērts savai cilpai vai funkcijai pievienot atkļūdotāja komandu un pārbaudīt mainīgo vērtības. Ja rezultāts neatbilst gaidītajam, mēs to nomainām, to var izdarīt vienkārši.

Iepriekš minētajā piemērā atkļūdotājs jāpievieno kā funkcijas vai cilpas pirmā rinda. Pēc tam pārlūkā Chrome ir jāatver atkļūdošanas cilne, analizējot tvēruma mainīgos. Izmantojot nākamo pogu, varat izsekot to izmaiņām katrā iterācijā. Tas viss ir viegli izdarāms, un vairumā gadījumu problēma tiek atrasta.

Vairāk par to visu varat lasīt šeit (pārlūkam Chrome) un šeit (Firefox).

Sintakses kļūda

Viena no visbiežāk sastopamajām JavaScript kļūdām ir SyntaxError. Teksta redaktora paplašinājumi palīdzēs no tiem izvairīties. Piemēram, Bracket Pair Colorizer kodā iezīmē iekavas ar dažādām krāsām, un Prettier vai līdzīgs analīzes rīks ļauj ātri atrast kļūdas. Labākā iespēja samazināt sintakses kļūdas iespējamību ir minimāla ligzdošana.

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

Skillbox iesaka:

• Divu gadu praktiskais kurss "Es esmu PRO tīmekļa izstrādātājs".
• Tiešsaistes kurss "C# izstrādātājs no 0".
• Praktiskā gada kurss "PHP izstrādātājs no 0 līdz PRO".

Avots: www.habr.com