Oeps, ek het dit weer gedoen: Ontfouting van algemene foute in JavaScript

Die skryf van JavaScript-kode kan uitdagend en soms sommer intimiderend wees, soos baie ontwikkelaars bekend is. In die proses van werk ontstaan ​​foute onvermydelik, en sommige van hulle word gereeld herhaal. Hierdie artikel, gemik op beginner ontwikkelaars, praat oor hierdie foute en hoe om dit op te los. Vir duidelikheid word die name van funksies, eienskappe en voorwerpe uit geneem gewilde liedjie. Dit alles help jou om vinnig te onthou hoe om algemene foute reg te stel.

Ons herinner: vir alle lesers van "Habr" - 'n afslag van 10 000 roebels wanneer u inskryf vir enige Skillbox-kursus met behulp van die "Habr"-promosiekode.

Skillbox beveel aan: Praktiese kursus "Mobiele ontwikkelaar PRO".

TypeError: eiendom is nie gedefinieer nie

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)

Die voorbeeldkode hierbo gooi die fout Uncaught TypeError: Kan nie eiendom 'gelukkig' van ongedefinieerd lees nie. Die probleem is dat die meisie-voorwerp nie 'n genoemde eienskap het nie, alhoewel dit wel 'n naam-eienskap het. En aangesien die girl.named eiendom nie gedefinieer is nie, kan jy nie toegang daartoe kry nie, want formeel bestaan ​​dit nie. Maar as jy girl.named.lucky met girl.name vervang, dan sal alles werk en die program sal Lucky teruggee.

Jy kan meer leer oor die eiendomme lees hier.

Hoe om TypeErrors op te los

TypeFoute vind plaas wanneer 'n programmeerder probeer om aksies uit te voer op data wat nie by 'n spesifieke tipe pas nie. Voorbeelde sluit in die gebruik van .bold(), vra vir 'n ongedefinieerde eienskap, of die oproep van 'n funksie wat nie eintlik 'n funksie is nie.

Dus, as jy girl( probeer bel), sal jy die fout Uncaught TypeError kry: yourVariable.bold is nie 'n funksie nie en girl is nie 'n funksie nie, want dit is eintlik 'n objek wat genoem word, nie 'n funksie nie.

Om foute uit te skakel, moet jy die veranderlikes bestudeer. So, wat is 'n meisie? Wat is girl.named? Jy kan uitvind deur die kode te ontleed, veranderlikes te vertoon deur console.log, die debugger-opdrag te gebruik, of die veranderlikenaam in die konsole te noem. Jy moet seker maak dat dit moontlik is om te werk op die datatipe wat in die veranderlike vervat is. As dit nie pas nie, verander dit, byvoorbeeld, voeg 'n voorwaarde by of probeer..vangblok - en kry beheer oor die uitvoering van die operasie.

Stapel oorloop

As jy die skrywers van die lirieke van die liedjie Baby One More Time glo (dit is Britney Spears, ja), dan beteken die woord treffer in hierdie konteks die sanger se begeerte om weer geroep te word (hier is 'n verduideliking van die konteks van die lied - vertaler se nota). Dit kan goed wees dat hierdie begeerte sal lei tot 'n toename in die aantal oproepe in die werklike lewe. Maar in programmering is dit 'n rekursie wat 'n fout kan veroorsaak as die oproepstapel oorloop.

Die foute lyk soos volg:

Fout: uit stapelspasie (rand)
Interne fout: te veel rekursie (Firefox)
RangeError: Maksimum oproepstapelgrootte oorskry (Chrome)

'n Stapeloorloop vind plaas as die ontwikkelaar nie die basisgeval in die rekursie in ag neem nie, of as die kode nie die beoogde geval aanspreek nie.

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

In hierdie geval kan stillBelieve nooit vals wees nie, so oneMoreTime sal elke keer geroep word, maar die funksie sal nooit voltooi nie.

As jy op twee vriende begin staatmaak, sal dit eensaamheid verminder, en jy hoef nie vir 'n oproep te wag nie.

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

'n Voorbeeld is gevalle met oneindige lusse, wanneer die stelsel nie 'n foutboodskap genereer nie, maar die bladsy waarop die JavaScript-kode uitgevoer word eenvoudig vries. Dit gebeur as die while-lus nie 'n beëindigingsvoorwaarde het nie.

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

U kan die probleem soos volg oplos:

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

Ontfouting van oneindige lusse en rekursies

As jy 'n oneindige lusprobleem het, moet jy die oortjie in Chrome of Edge toemaak en die blaaiervenster in Firefox toemaak. Hierna moet u die kode noukeurig ontleed. As jy nie die probleem kan vind nie, is dit die moeite werd om 'n debugger-opdrag by jou lus of funksie te voeg en die waardes van die veranderlikes na te gaan. As die resultaat nie ooreenstem met wat verwag is nie, vervang ons dit, dit kan maklik gedoen word.

In die voorbeeld hierbo moet ontfouter bygevoeg word as die eerste reël van die funksie of lus. Dan moet jy die debug-oortjie in Chrome oopmaak en die veranderlikes in omvang ontleed. Deur die volgende knoppie te gebruik, kan jy hul veranderinge met elke iterasie dop. Dit alles is maklik om te doen, en in die meeste gevalle word die probleem gevind.

Jy kan meer hieroor lees (vir chroom) en hier (vir Firefox).

Sintaksfout

Een van die mees algemene foute in JavaScript is SyntaxError. Teksredigeerderuitbreidings sal jou help om dit te vermy. Byvoorbeeld, Bracket Pair Colorizer merk hakies in die kode met verskillende kleure, en Prettier of 'n soortgelyke analise-instrument maak dit moontlik om vinnig foute te vind. Die beste opsie om die waarskynlikheid van 'n SyntaxError te verminder, is minimale nes.

Deel in die opmerkings: wat doen jy om foute te voorkom of dit vinnig op te spoor en uit te skakel?

Skillbox beveel aan:

• Twee-jaar praktiese kursus "Ek is 'n PRO-webontwikkelaar".
• Aanlyn kursus "C# ontwikkelaar vanaf 0".
• Praktiese jaarkursus "PHP-ontwikkelaar van 0 tot PRO".

Bron: will.com