Escriure codi JavaScript pot ser un repte i, de vegades, francament intimidant, com molts desenvolupadors coneixen. En el procés de treball, inevitablement sorgeixen errors, i alguns d'ells es repeteixen amb freqüència. Aquest article, adreçat a desenvolupadors novells, parla d'aquests errors i de com resoldre'ls. Per a més claredat, s'han extret els noms de funcions, propietats i objectes . Tot això us ajuda a recordar ràpidament com corregir els errors habituals.
Recordem: per a tots els lectors de "Habr": un descompte de 10 rubles en inscriure's a qualsevol curs de Skillbox amb el codi promocional "Habr".
Skillbox recomana: Curs pràctic .
TypeError: la propietat no està definida
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)L'exemple de codi anterior mostra l'error Uncaught TypeError: No es pot llegir la propietat 'lucky' de undefined. El problema és que l'objecte noia no té una propietat amb nom, tot i que sí que té una propietat de nom. I com que la propietat girl.named no està definida, no hi podeu accedir, perquè formalment no existeix. Però si substitueix girl.named.lucky per girl.name, tot funcionarà i el programa tornarà Lucky.
Podeu obtenir més informació sobre les propietats .
Com resoldre errors de tipus
Els errors de tipus es produeixen quan un programador intenta realitzar accions sobre dades que no coincideixen amb un tipus específic. Els exemples inclouen l'ús de .bold(), demanar una propietat no definida o cridar una funció que en realitat no és una funció.
Per tant, si intenteu cridar a girl(), obtindreu l'error Uncaught TypeError: yourVariable.bold no és una funció i girl no és una funció, perquè en realitat és un objecte que s'està cridant, no una funció.
Per eliminar errors, cal estudiar les variables. Aleshores, què és una noia? Com es diu girl.name? Podeu esbrinar-ho analitzant el codi, mostrant variables mitjançant console.log, l'ordre del depurador o cridant el nom de la variable a la consola. Heu d'assegurar-vos que és possible operar amb el tipus de dades contingut a la variable. Si no encaixa, canvieu-lo, per exemple, afegiu una condició o try..catch block - i obteniu el control de l'execució de l'operació.
Desbordament de pila
Si creieu els autors de la lletra de la cançó Baby One More Time (aquesta és Britney Spears, sí), aleshores la paraula hit en aquest context significa el desig del cantant de tornar-se a cridar (aquí hi ha una explicació del context mateix de la cançó - nota del traductor). Pot ser que aquest desig condueixi a un augment del nombre de trucades a la vida real. Però en programació, aquesta és una recursivitat que pot provocar un error si la pila de trucades es desborda.
Els errors es veuen així:
Error: sense espai de pila (Edge)
InternalError: massa recursivitat (Firefox)
RangeError: s'ha superat la mida màxima de la pila de trucades (Chrome)
Es produeix un desbordament de pila si el desenvolupador no considera el cas base en la recursivitat, o si el codi no aborda el cas previst.
function oneMoreTime(stillBelieve=true, loneliness=0) {
if (!stillBelieve && loneliness < 0) return
loneliness++
return oneMoreTime(stillBelieve, loneliness)
}En aquest cas, stillBelieve no pot ser mai fals, de manera que es cridarà a oneMoreTime cada vegada, però la funció mai no es completarà.
Si comenceu a confiar en dos amics, això reduirà la soledat i no haureu d'esperar una trucada.
function oneMoreTime(stillBelieve=true, loneliness=0) {
if (!stillBelieve && loneliness < 0) return
loneliness--
stillBelieve = false
return oneMoreTime(stillBelieve, loneliness)
}Un exemple són els casos amb bucles infinits, quan el sistema no genera cap missatge d'error, però la pàgina on s'executa el codi JavaScript simplement es congela. Això passa si el bucle while no té una condició de terminació.
let worldEnded = false
while (worldEnded !== true) {
console.log("Keep on dancin' till the world ends")
}Podeu resoldre el problema de la següent manera:
let worldEnded = false
while (worldEnded !== true) {
console.log("Keep on dancin' till the world ends")
worldEnded = true
}Depuració de bucles i recursivitats infinites
Si teniu un problema de bucle infinit, heu de tancar la pestanya a Chrome o Edge i tancar la finestra del navegador a Firefox. Després d'això, cal analitzar acuradament el codi. Si no trobeu el problema, val la pena afegir una ordre depuradora al vostre bucle o funció i comprovar els valors de les variables. Si el resultat no correspon al que s'esperava, llavors el substituïm, això es pot fer fàcilment.
A l'exemple anterior, el depurador s'ha d'afegir com a primera línia de la funció o bucle. Aleshores, heu d'obrir la pestanya de depuració a Chrome, analitzant les variables de l'abast. Amb el botó següent podeu fer un seguiment dels seus canvis amb cada iteració. Tot això és fàcil de fer, i en la majoria dels casos es troba el problema.
Podeu llegir més sobre tot això aquí () i aquí ().
Error de sintaxi
Un dels errors més comuns a JavaScript és SyntaxError. Les extensions de l'editor de text us ajudaran a evitar-les. Per exemple, Bracket Pair Colorizer marca els claudàtors del codi amb diferents colors, i Prettier o una eina d'anàlisi similar permeten trobar errors ràpidament. La millor opció per reduir la probabilitat d'un SyntaxError és la nidificació mínima.
Comparteix als comentaris: què fas per evitar errors o detectar-los i eliminar-los ràpidament?
Skillbox recomana:
- Curs pràctic de dos anys .
- Curs en línia .
- Curs pràctic de l'any .
Font: www.habr.com