Scrivere codice JavaScript può essere impegnativo e talvolta addirittura intimidatorio, come molti sviluppatori sanno bene. Nel processo di lavoro sorgono inevitabilmente errori e alcuni di essi si ripetono frequentemente. Questo articolo, rivolto agli sviluppatori alle prime armi, parla di questi errori e di come risolverli. Per chiarezza, i nomi delle funzioni, delle proprietà e degli oggetti sono presi da . Tutto ciò ti aiuta a ricordare rapidamente come correggere gli errori comuni.
Ti ricordiamo: per tutti i lettori di "Habr" - uno sconto di 10 rubli al momento dell'iscrizione a qualsiasi corso Skillbox utilizzando il codice promozionale "Habr".
Skillbox consiglia: Corso pratico .
TypeError: la proprietà non è definita
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)Il codice di esempio riportato sopra genera l'errore Uncaught TypeError: Cannot read property 'lucky' of unfine. Il problema è che l'oggetto ragazza non ha una proprietà denominata, sebbene abbia una proprietà nome. E poiché la proprietà girl.named non è definita, non è possibile accedervi, perché formalmente non esiste. Ma se sostituisci ragazza.nome.lucky con ragazza.nome, tutto funzionerà e il programma restituirà Lucky.
Puoi saperne di più sulle proprietà .
Come risolvere TypeErrors
Gli errori di tipo si verificano quando un programmatore tenta di eseguire azioni su dati che non corrispondono a un tipo specifico. Gli esempi includono l'utilizzo di .bold(), la richiesta di una proprietà non definita o la chiamata di una funzione che in realtà non è una funzione.
Quindi, se provi a chiamare girl(), riceverai l'errore Uncaught TypeError: yourVariable.bold non è una funzione e girl non è una funzione, perché in realtà è un oggetto chiamato, non una funzione.
Per eliminare gli errori è necessario studiare le variabili. Allora, cos'è una ragazza? Come si chiama Girl.Name? Puoi scoprirlo analizzando il codice, visualizzando le variabili utilizzando console.log, il comando del debugger o chiamando il nome della variabile nella console. È necessario assicurarsi che sia possibile operare sul tipo di dato contenuto nella variabile. Se non va bene, modificalo, ad esempio, aggiungi una condizione o un blocco try..catch e ottieni il controllo sull'esecuzione dell'operazione.
Stack overflow
Se credi agli autori del testo della canzone Baby One More Time (questa è Britney Spears, sì), allora la parola hit in questo contesto significa il desiderio del cantante di essere chiamato di nuovo (ecco una spiegazione del contesto stesso della canzone canzone - nota del traduttore). Può darsi che questo desiderio porti ad un aumento del numero di chiamate nella vita reale. Ma nella programmazione, questa è una ricorsione che può causare un errore se lo stack di chiamate va in overflow.
Gli errori appaiono così:
Errore: spazio nello stack esaurito (bordo)
Errore interno: troppa ricorsione (Firefox)
RangeError: dimensione massima dello stack di chiamate superata (Chrome)
Si verifica un overflow dello stack se lo sviluppatore non considera il caso base nella ricorsione o se il codice non risolve il caso previsto.
function oneMoreTime(stillBelieve=true, loneliness=0) {
if (!stillBelieve && loneliness < 0) return
loneliness++
return oneMoreTime(stillBelieve, loneliness)
}In questo caso, stillBelieve non può mai essere false, quindi oneMoreTime verrà chiamato ogni volta, ma la funzione non verrà mai completata.
Se inizi a fare affidamento su due amici, questo ridurrà la solitudine e non dovrai aspettare una chiamata.
function oneMoreTime(stillBelieve=true, loneliness=0) {
if (!stillBelieve && loneliness < 0) return
loneliness--
stillBelieve = false
return oneMoreTime(stillBelieve, loneliness)
}Un esempio sono i casi con cicli infiniti, quando il sistema non genera un messaggio di errore, ma la pagina su cui viene eseguito il codice JavaScript si blocca semplicemente. Ciò accade se il ciclo while non ha una condizione di terminazione.
let worldEnded = false
while (worldEnded !== true) {
console.log("Keep on dancin' till the world ends")
}Puoi risolvere il problema nel modo seguente:
let worldEnded = false
while (worldEnded !== true) {
console.log("Keep on dancin' till the world ends")
worldEnded = true
}Debug di cicli e ricorsioni infiniti
Se riscontri un problema di loop infinito, devi chiudere la scheda in Chrome o Edge e chiudere la finestra del browser in Firefox. Successivamente, è necessario analizzare attentamente il codice. Se non riesci a trovare il problema, vale la pena aggiungere un comando debugger al tuo ciclo o funzione e controllare i valori delle variabili. Se il risultato non corrisponde a quanto previsto, lo sostituiamo, questo può essere fatto facilmente.
Nell'esempio precedente, il debugger dovrebbe essere aggiunto come prima riga della funzione o del ciclo. Successivamente è necessario aprire la scheda debug in Chrome, analizzando le variabili in ambito. Utilizzando il pulsante successivo è possibile tenere traccia delle modifiche ad ogni iterazione. Tutto questo è facile da fare e nella maggior parte dei casi il problema viene trovato.
Puoi leggere di più su tutto questo qui () e qui ().
Errore di sintassi
Uno degli errori più comuni in JavaScript è SyntaxError. Le estensioni dell'editor di testo ti aiuteranno a evitarli. Ad esempio, Bracket Pair Colorizer contrassegna le parentesi nel codice con colori diversi e Prettier o uno strumento di analisi simile consente di trovare rapidamente gli errori. L'opzione migliore per ridurre la probabilità che si verifichi un SyntaxError è l'annidamento minimo.
Condividi nei commenti: cosa fai per prevenire gli errori o rilevarli ed eliminarli rapidamente?
Skillbox consiglia:
- Corso pratico di due anni .
- Corso online .
- Corso pratico annuale .
Fonte: habr.com