Oi, padariau tai dar kartą: „JavaScript“ dažniausiai pasitaikančių klaidų derinimas

„JavaScript“ kodo rašymas gali būti sudėtingas ir kartais tiesiog bauginantis, kaip žino daugelis kūrėjų. Darbo procese neišvengiamai atsiranda klaidų, o kai kurios jų kartojasi dažnai. Šiame straipsnyje, skirtame pradedantiesiems kūrėjams, kalbama apie šias klaidas ir kaip jas išspręsti. Aiškumo dėlei funkcijų, savybių ir objektų pavadinimai paimti iš populiari daina. Visa tai padeda greitai prisiminti, kaip ištaisyti įprastas klaidas.

Primename: visiems „Habr“ skaitytojams – 10 000 rublių nuolaida užsiregistravus į bet kurį „Skillbox“ kursą naudojant „Habr“ reklamos kodą.

„Skillbox“ rekomenduoja: Praktinis kursas „Mobile Developer PRO“.

Tipo klaida: ypatybė neapibrėž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)

Aukščiau pateiktas pavyzdinis kodas pateikia klaidą Uncaught TypeError: Neįmanoma nuskaityti undefined ypatybės „lucky“. Problema ta, kad mergaitės objektas neturi pavadinimo nuosavybės, nors turi pavadinimą. O kadangi mergina.vardas turtas neapibrėžtas, prie jo prieiti negalite, nes formaliai jo nėra. Bet jei mergina.vardas.laimingas pakeisi mergina.vardas, tada viskas veiks ir programa grąžins Lucky.

Galite sužinoti daugiau apie savybes skaitykite čia.

Kaip išspręsti tipo klaidas

Tipo klaidos atsiranda, kai programuotojas bando atlikti veiksmus su duomenimis, kurie neatitinka konkretaus tipo. Pavyzdžiai: .bold(), neapibrėžtos ypatybės prašymas arba funkcijos, kuri iš tikrųjų nėra funkcija, iškvietimas.

Taigi, jei bandysite iškviesti girl(), gausite klaidą Uncaught TypeError: yourVariable.bold nėra funkcija, o mergina nėra funkcija, nes iš tikrųjų tai yra iškviečiamas objektas, o ne funkcija.

Norėdami pašalinti klaidas, turite ištirti kintamuosius. Taigi, kas yra mergina? Kas yra mergina.vardas? Tai galite sužinoti analizuodami kodą, rodydami kintamuosius naudodami console.log, derinimo komandą arba iškvietę kintamojo pavadinimą konsolėje. Turite įsitikinti, kad galima dirbti su duomenų tipu, esančiu kintamajame. Jei netinka, pakeiskite, pvz., pridėkite sąlygą arba pabandykite..pagauti bloką – ir įgykite operacijos vykdymo kontrolę.

Stack Overflow

Jei tikėti dainos „Baby One More Time“ žodžių autoriais (tai Britney Spears, taip), tai žodis „hitas“ šiame kontekste reiškia dainininkės norą vėl būti pašauktam (čia paaiškinamas pats dainos kontekstas). daina – vertėjo pastaba). Gali būti, kad šis noras padidins skambučių skaičių realiame gyvenime. Tačiau programuojant tai yra rekursija, kuri gali sukelti klaidą, jei skambučių krūva persipildo.

Klaidos atrodo taip:

Klaida: trūksta vietos krūvoje (kraštas)
Vidinė klaida: per daug rekursijos („Firefox“)
RangeError: viršytas maksimalus skambučių krūvos dydis („Chrome“)

Krūvos perpildymas įvyksta, jei kūrėjas neatsižvelgia į bazinį atvejį rekursijoje arba jei kodas neapima numatyto atvejo.

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

Šiuo atveju stillBelieve niekada negali būti klaidinga, todėl oneMoreTime bus iškviečiamas kiekvieną kartą, bet funkcija niekada nebus baigta.

Jei pradėsite pasikliauti dviem draugais, tai sumažins vienatvę ir jums nereikės laukti skambučio.

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

Pavyzdys – atvejai su begaliniais ciklais, kai sistema negeneruoja klaidos pranešimo, bet puslapis, kuriame vykdomas JavaScript kodas, tiesiog užšąla. Taip atsitinka, jei ciklas while neturi nutraukimo sąlygos.

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

Galite išspręsti problemą taip:

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

Begalinių kilpų ir rekursijų derinimas

Jei turite begalinio ciklo problemą, turite uždaryti skirtuką „Chrome“ arba „Edge“ ir uždaryti naršyklės langą „Firefox“. Po to turite atidžiai išanalizuoti kodą. Jei negalite rasti problemos, verta pridėti derinimo komandą prie ciklo ar funkcijos ir patikrinti kintamųjų reikšmes. Jei rezultatas neatitinka to, ko tikėtasi, mes jį pakeičiame, tai galima padaryti nesunkiai.

Aukščiau pateiktame pavyzdyje derinimo priemonė turėtų būti įtraukta kaip pirmoji funkcijos arba ciklo eilutė. Tada turite atidaryti „Chrome“ derinimo skirtuką ir analizuoti kintamuosius. Naudodami kitą mygtuką galite stebėti jų pokyčius kiekvienos iteracijos metu. Visa tai lengva padaryti, ir daugeliu atvejų problema randama.

Daugiau apie visa tai galite paskaityti čia (skirta Chrome) ir čia (skirtas Firefox).

Sintaksės klaida

Viena iš dažniausiai pasitaikančių JavaScript klaidų yra SyntaxError. Teksto rengyklės plėtiniai padės jų išvengti. Pavyzdžiui, Bracket Pair Colorizer žymi kode skliaustus skirtingomis spalvomis, o Prettier ar panašus analizės įrankis leidžia greitai rasti klaidas. Geriausias būdas sumažinti „SyntaxError“ tikimybę yra minimalus įdėjimas.

Pasidalinkite komentaruose: ką darote, kad išvengtumėte klaidų arba greitai jas pastebėtumėte ir pašalintumėte?

„Skillbox“ rekomenduoja:

• Dvejų metų praktinis kursas "Aš esu PRO žiniatinklio kūrėjas".
• Internetinis kursas „C# kūrėjas nuo 0“.
• Praktinių metų kursas „PHP kūrėjas nuo 0 iki PRO“.

Šaltinis: www.habr.com