A volte scrivere codice JavaScript è difficile, a volte addirittura spaventoso, cosa che molti sviluppatori conoscono bene. Nel corso del lavoro, inevitabilmente si verificano errori, alcuni dei quali si ripetono spesso. Questo articolo, pensato per gli sviluppatori alle prime armi, affronta questi errori e come risolverli. Per chiarezza, i nomi di funzioni, proprietà e oggetti sono tratti da Tutto ciò ti aiuta a ricordare rapidamente come correggere gli errori più 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 sopra restituisce l'errore Uncaught TypeError: Cannot read property 'lucky' of undefined. Il problema è che l'oggetto girl non ha una proprietà denominata, sebbene abbia una proprietà name. E poiché la proprietà girl.named non è definita, non è possibile accedervi, perché formalmente non esiste. Ma se si sostituisce girl.named.lucky con girl.name, tutto funzionerà e il programma restituirà Lucky.
Maggiori dettagli sulle proprietà possono essere trovati .
Modi per risolvere i problemi TypeErrors
Gli errori TypeError si verificano quando un programmatore tenta di eseguire un'azione su dati che non sono di un tipo definito. Alcuni esempi includono l'utilizzo di .bold(), la query di una proprietà non definita o la chiamata di una funzione che in realtà non è una funzione.
Quindi, se provi a chiamare girl(), otterrai l'errore Uncaught TypeError: yourVariable.bold non è una funzione e girl non è una funzione, poiché in realtà viene chiamato un oggetto, non una funzione.
Per risolvere i problemi, è necessario esaminare le variabili. Quindi, cos'è girl? E cos'è girl.named? Puoi scoprirlo analizzando il codice, visualizzando le variabili tramite console.log, il comando debugger o chiamando la variabile name nella console. Devi assicurarti di poter operare sul tipo di dati contenuto nella variabile. Se non è compatibile, modificalo, ad esempio aggiungendo una condizione o un blocco try..catch, e ottieni il controllo sull'esecuzione dell'operazione.
Overflow dello stack
Se crediamo ai testi della canzone "Baby One More Time" (Britney Spears, sì), allora la parola "hit" in questo contesto indica il desiderio della cantante di essere chiamata di nuovo (ecco una spiegazione del contesto della canzone stessa, — ndt). È possibile che questo desiderio porti a un aumento del numero di chiamate nella vita reale. Ma nella programmazione, questa è ricorsione, che può causare un errore in caso di overflow dello stack delle chiamate.
Gli errori si presentano così:
Errore: spazio nello stack insufficiente (Edge)
InternalError: troppa ricorsione (Firefox)
RangeError: dimensione massima dello stack di chiamate superata (Chrome)
Uno stack overflow si verifica quando lo sviluppatore non ha preso in considerazione il caso base nella ricorsione o quando il codice non affronta 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 valutato come falso, quindi oneMoreTime verrà chiamato ogni volta, ma la funzione non verrà mai completata.
Se inizi a contare su due amici, la solitudine si ridurrà e non dovrai più aspettare una chiamata.
function oneMoreTime(stillBelieve=true, loneliness=0) {
if (!stillBelieve && loneliness < 0) return
loneliness--
stillBelieve = false
return oneMoreTime(stillBelieve, loneliness)
}Un esempio potrebbero essere i casi di loop infiniti, in cui il sistema non visualizza alcun messaggio di errore, ma la pagina in cui viene eseguito il codice JavaScript si blocca semplicemente. Questo 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")
}Il problema può essere risolto come segue:
let worldEnded = false
while (worldEnded !== true) {
console.log("Keep on dancin' till the world ends")
worldEnded = true
}Debug di cicli infiniti e ricorsioni
Se riscontri un problema con un ciclo infinito, devi chiudere la scheda in Chrome o Edge e la finestra del browser in Firefox. Dopodiché, analizza attentamente il codice. Se non riesci a individuare il problema, dovresti aggiungere il comando del debugger al ciclo o alla funzione e controllare il valore delle variabili. Se il risultato non corrisponde a quello atteso, sostituiscilo; questa operazione può essere eseguita facilmente.
Nell'esempio precedente, debugger dovrebbe essere aggiunto come prima riga della funzione o del ciclo. Quindi è necessario aprire la scheda debug in Chrome, analizzando le variabili nell'ambito. Utilizzando il pulsante successivo, è possibile monitorare le modifiche a ogni iterazione. È tutto facile da fare e, nella maggior parte dei casi, il problema viene individuato.
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 possono aiutare a evitarli. Ad esempio, Bracket Pair Colorizer contrassegna le parentesi nel codice con colori diversi, mentre Prettier o uno strumento di analisi simile consente di individuare rapidamente gli errori. L'opzione migliore per ridurre la probabilità di SyntaxError è l'annidamento minimo.
Condividi nei commenti: cosa fai per evitare gli errori o per individuarli ed eliminarli rapidamente?
Skillbox consiglia:
- Corso pratico di due anni .
- Corso online .
- Corso pratico annuale .
Fonte: habr.com
