Ой, мен мұны қайтадан жасадым: JavaScript-тегі жалпы қателерді түзету

Ой, мен мұны қайтадан жасадым: JavaScript-тегі жалпы қателерді түзету

JavaScript кодын жазу қиын және кейде қорқытуы мүмкін, өйткені көптеген әзірлеушілер жақсы біледі. Жұмыс барысында қателіктер сөзсіз туындайды, олардың кейбіреулері жиі қайталанады. Жаңадан әзірлеушілерге арналған бұл мақалада осы қателер және оларды шешу жолдары туралы айтылады. Түсінікті болу үшін функциялардың, қасиеттердің және нысандардың атаулары алынған танымал ән. Мұның бәрі жиі кездесетін қателерді қалай түзетуге болатынын тез есте сақтауға көмектеседі.

Біз еске саламыз: «Хабрдың» барлық оқырмандары үшін - «Habr» жарнамалық кодын пайдаланып кез келген Skillbox курсына жазылу кезінде 10 000 рубль көлемінде жеңілдік.

Skillbox ұсынады: Практикалық курс «Мобильді әзірлеуші ​​PRO».

TypeError: сипат анықталмаған

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)

Жоғарыдағы мысал коды Uncaught TypeError қатесін шығарады: анықталмағанның "бақытты" сипатын оқу мүмкін емес. Мәселе мынада, қыз нысанында атау сипаты болса да, аталған сипат жоқ. Ал girl.namemed сипаты анықталмағандықтан, оған қол жеткізе алмайсыз, себебі ол ресми түрде жоқ. Бірақ girl.namemed.lucky файлын girl.name деп ауыстырсаңыз, онда бәрі жұмыс істейді және бағдарлама Lucky қайтарады.

Сіз қасиеттер туралы көбірек біле аласыз мұнда оқыңыз.

TypeErrors қалай шешуге болады

TypeErrors бағдарламашы белгілі бір түрге сәйкес келмейтін деректерде әрекеттерді орындауға әрекет жасағанда пайда болады. Мысалдар: .bold() функциясын пайдалану, анықталмаған сипатты сұрау немесе нақты функция емес функцияны шақыру.

Сонымен, girl() функциясына қоңырау шалуға әрекеттенсеңіз, Uncaught TypeError қатесін аласыз: yourVariable.bold функция емес және қыз функция емес, себебі ол шын мәнінде функция емес, шақырылатын нысан.

Қателерді жою үшін айнымалыларды зерттеу керек. Сонымен, қыз деген не? girl.name деген не? Кодты талдау, console.log арқылы айнымалы мәндерді көрсету, отладчик пәрмені немесе консольдегі айнымалы атын шақыру арқылы білуге ​​болады. Айнымалы мәнде қамтылған деректер түрімен жұмыс істеу мүмкіндігі бар екеніне көз жеткізу керек. Егер ол сәйкес келмесе, оны өзгертіңіз, мысалы, шарт қосыңыз немесе көріңіз..catch блогы - және операцияның орындалуын бақылауға ие болыңыз.

Стек толып кетуі

Егер сіз Baby One More Time әнінің мәтінінің авторларына сенсеңіз (бұл Бритни Спирс, иә), онда бұл контексте хит сөзі әншінің қайта шақырылуын қалайтынын білдіреді (мұнда әннің контекстінің түсіндірмесі берілген. ән – аудармашының жазбасы). Бәлкім, бұл тілек шынайы өмірде қоңыраулар санының артуына әкелуі мүмкін. Бірақ бағдарламалауда бұл қоңыраулар стегі толып кетсе, қате тудыруы мүмкін рекурсия.

Қателер келесідей көрінеді:

Қате: стек кеңістігі жоқ (жиегі)
Ішкі қате: тым көп рекурсия (Firefox)
RangeError: қоңыраулар стекінің максималды өлшемінен асып кетті (Chrome)

Егер әзірлеуші ​​рекурсияда негізгі жағдайды қарастырмаса немесе код жоспарланған жағдайды қарастырмаса, стектің толып кетуі орын алады.

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

Бұл жағдайда stillBelieve ешқашан жалған бола алмайды, сондықтан oneMoreTime әр жолы шақырылады, бірақ функция ешқашан аяқталмайды.

Егер сіз екі досыңызға сене бастасаңыз, бұл жалғыздықты азайтады және қоңырауды күтудің қажеті жоқ.

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

Мысал ретінде жүйе қате туралы хабарды жасамайтын, бірақ JavaScript коды орындалатын бет жай ғана қатып қалатын, шексіз циклдары бар жағдайларды келтіруге болады. Бұл while циклінде тоқтату шарты болмаған жағдайда орын алады.

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

Мәселені келесідей шешуге болады:

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

Шексіз циклдар мен рекурсияларды жөндеу

Егер сізде шексіз цикл мәселесі болса, Chrome немесе Edge қойындысын жабуыңыз керек, ал Firefox-та шолғыш терезесін жабу керек. Осыдан кейін сіз кодты мұқият талдауыңыз керек. Егер сіз мәселені таба алмасаңыз, циклге немесе функцияға отладчик пәрменін қосып, айнымалы мәндерді тексерген жөн. Егер нәтиже күткенге сәйкес келмесе, біз оны ауыстырамыз, мұны оңай жасауға болады.

Жоғарыдағы мысалда отладчик функцияның немесе циклдің бірінші жолы ретінде қосылуы керек. Содан кейін ауқымдағы айнымалы мәндерді талдай отырып, Chrome жүйесінде жөндеу қойындысын ашу керек. Келесі түймешікті пайдаланып, олардың әр итерациядағы өзгерістерін бақылай аласыз. Мұның бәрін жасау оңай, көп жағдайда мәселе табылды.

Мұның бәрі туралы толығырақ мына жерден оқи аласыз (Chrome үшін) және мұнда (Firefox үшін).

Синтаксистік қате

JavaScript-те жиі кездесетін қателердің бірі - SyntaxError. Мәтіндік редактор кеңейтімдері оларды болдырмауға көмектеседі. Мысалы, Bracket Pair Colorizer кодтағы жақшаларды әртүрлі түстермен белгілейді және Prettier немесе ұқсас талдау құралы қателерді жылдам табуға мүмкіндік береді. Синтаксистік қатенің ықтималдығын азайтудың ең жақсы нұсқасы - ең аз кірістіру.

Түсініктемелерде бөлісіңіз: қателерді болдырмау немесе оларды тез анықтау және жою үшін не істейсіз?

Skillbox ұсынады:

Ақпарат көзі: www.habr.com

пікір қалдыру