4 déclarations JavaScript utiles à connaître

Les déclarations JavaScript nous donnent le pouvoir de implémenter différents types de logique dans notre code. JavaScript nous en fournit plusieurs, qui ont tous leur propre but et syntaxe. Parmi les exemples les plus connus, nous pouvons trouver des expressions, des itérations, des instructions conditionnelles, etc.

Dans le post d'aujourd'hui, nous verrons quatre déclarations JavaScript moins courantes vous ne le saviez peut-être pas auparavant, mais vous pouviez approfondir votre connaissance de JavaScript et vous permettre d'écrire un meilleur code.

1. Déclaration vide

À la place de toute instruction JavaScript, vous pouvez ajouter une instruction vide, écrite sous la forme d'un simple point-virgule. ;. Lorsque l'interprète JavaScript interprète une instruction vide, aucun code n'est exécuté, donc ils peuvent être utiles pour remplacer les sous-instructions que vous ne voulez pas exécuter.

Par exemple, supposons qu’il existe une variable appelée tournesol avec la valeur par défaut neutre. Basé sur la valeur d'une autre variable appelée pH, tournesol changements à soit acide quand pH < 7 or de base quand pH> 7.

Si la valeur de pH s'avère invalide, une erreur est renvoyée. Pour un état comme ceci, les instructions conditionnelles suivantes s'appliquent:

 var litmus = 'neutre'; var pH; si (pH> 0 && pH<7) litmus = 'acidic'; else if(pH>7 && pH<15) litmus = 'basic'; else throw "Invalid pH value"; 

Cependant, l'ensemble d'instructions ci-dessus génère une erreur lorsque pHLa valeur de est 7, ce qui ne devrait pas être le cas.

Quand pH est 7, tournesol devrait conserver sa valeur par défaut, c'est-à-dire neutre. Donc, pour un cas comme celui-ci, ajoutez une condition lorsque pH est 7 avec une déclaration de fin vide.

 var litmus = 'neutre'; var pH; si (pH> 0 && pH<7) litmus = 'acidic'; else if(pH===7) ; /* empty statement */ else if(pH>7 && pH<15) litmus = 'basic'; else throw "Invalid pH value";

Maintenant, quand pH est 7, l'interprète n'exécute aucune instruction et tournesol conserve sa valeur par défaut, neutre.

Les instructions vides peuvent également être utilisées pour remplir un tableau à l’aide du pour boucle.

 varaire = []; pour (var i = 0; i < 5; ary[i++] = i) ; /* empty statement */ console.log(ary); // [1, 2, 3, 4, 5]

Typiquement, un pour L'instruction de boucle est suivie d'une sous-instruction composée d'une seule instruction, ou d'une instruction block (celle incluse dans accolades) à exécuter. En utilisant une instruction vide à la place de la sous-instruction, l'interpréteur n'aura plus rien à exécuter après chaque boucle. seulement le en boucle se produit et les conditions de bouclage sont exécutées.

Dans l'exemple ci-dessus, ary [i ++] = i s’exécute pour chaque itération de boucle dans le cadre de la condition de bouclage, et le tableau ary est instancié avec des valeurs de je.

2. Le débogueur Déclaration

Dans les outils de débogage, nous pouvons ajouter des marqueurs appelé points d'arrêt à n'importe quelle ligne du code source marquer les lignes à partir desquelles l'outil de débogage commencera le débogage.

En JavaScript, le débogueur déclaration fonctionne de la même manière qu'un point d'arrêt, sauf que c'est ajouté directement dans le code source, plutôt que dans un outil. Tout débogueur en cours d'exécution arrêter l'exécution du script quand il atteint le débogueur déclaration afin de vous aider à déboguer le code.

Rappelez-vous que le débogage sera déclenché uniquement si le script s'exécute en mode débogage, c'est-à-dire qu'un programme de débogage est déjà en cours d'exécution sur l'exécution du script. Si aucun programme de débogage n’exécute actuellement pendant l’interprétation de la débogueur déclaration, l'interprète poursuivra son travail comme si de rien n'était.

Pour effectuer un test rapide, exécutez le code suivant dans Codepen tout en maintenant l’outil de débogage du navigateur ouvert:

 console.log ('tesing'); débogueur; console.log ('instruction de débogage');

Vous verrez un point d'arrêt à côté du débogueur comme indiqué ci-dessous dans l'outil de débogage du navigateur.

3. Déclaration étiquetée

En JavaScript, vous pouvez également ajouter des étiquettes à certaines instructions. Ce faisant, vous pouvez plus tard sauter à la déclaration étiquetée en utilisant son étiquette dans votre code, genre de comme le aller à déclaration fonctionne dans d'autres langues.

Les instructions étiquetées ne peuvent être utilisées qu'avec le Pause et continuer déclarations, comme dans JavaScript, il n'y a pas de littéral aller à déclaration.

Tous les deux Pause et continuer ne peut être utilisé que dans des instructions en boucle, telles que pour boucle (à une exception près, Pause peut être utilisé dans le commutateur déclaration aussi bien). Nous pouvons donc étiqueter les boucles et utiliser Pause et continuer contrôler leur exécution.

le syntaxe des instructions étiquetées est simple, il vous suffit d’ajouter le nom de l’étiquette avec le signe deux-points, comme vous pouvez le voir dans l’exemple ci-dessous, où boucle est le nom de l'étiquette que nous ajoutons à la pour boucle.

 boucle: pour (var i = 0; i<5; i++) if(i===2) continue loop; console.log(i); // 0, 1, 3, 4 

Quand la valeur de je est 2, l'exécution revient à la boucle au lieu de continuer et empêche donc la sortie de la console de “2”.

Voyons maintenant un autre exemple avec le Pause déclaration. Il suffit de remplacer le continuer mot clé avec Pause dans l'exemple ci-dessus, et vous remarquerez qu'au lieu de revenir à la boucle comme il l'a fait avec continuer, la boucle se termine / se casse complètement.

 boucle: pour (var i = 0; i<5; i++) if(i===2) break loop; console.log(i); // 0, 1 

Les exemples ci-dessus étaient assez simples pour vous permettre de comprendre rapidement le fonctionnement des instructions étiquetées, mais dans le codage réel, les étiquettes sont plus fréquemment utilisées dans les boucles composées, lorsqu'il est nécessaire de distinguer les différentes boucles, comme dans l'exemple suivant:

 boucle: pour (var i = 0; i<4; i++)  for(var j=0; j<2; j++)  if(i===2 && j===1) break loop; console.log(i+"-"+j); 

Ici le boucle extérieure pauses à la valeur 2 pour variable je et à 1 pour j, et la console renvoie la sortie suivante:

 0-0 0-1 1-0 1-1 2-0

4. Le avec Déclaration

Quand l'interprète JS rencontre un nom non qualifié qui ne spécifie pas l'objet ou la fonction à laquelle l'appel est associé, il recherche dans la chaîne de l'oscilloscope pour tout objet ou fonction approprié (e), l'appel peut faire référence à.

En utilisant le avec déclaration, nous pouvons ajouter un objet au sommet de la chaîne de la portée, et spécifier l'objet auquel l'appel est associé.

Dans l'exemple suivant, vous pouvez voir que les propriétés du la personne objet sont appelés en utilisant leurs noms seuls à l'intérieur du avec déclaration.

 var person = prénom: "Jean", nom: "biche", âge: "18", pays: "Groenland"; avec (personne) console.log ("Bonjour, mon nom est" + prénom + "" + nom + ". J'ai" + âge + "ans et je vis dans" + pays + ".);  // "Bonjour, je m'appelle John Doe. J'ai 18 ans et je vis au Groenland."

Comparez le code ci-dessus sans utiliser le code. avec déclaration:

 var person = prénom: "Jean", nom: "biche", âge: "18", pays: "Groenland"; console.log ("Bonjour, je m'appelle" + personne.firstName + "" + personne.nom + + ". J'ai" + person.age + ans "et j'habite" + personne.pays + "." ) // "Bonjour, je m'appelle John Doe. J'ai 18 ans et j'habite au Groenland."

Tu peux voir le avec instruction peut être un excellent raccourci si vous travaillez avec plusieurs propriétés du même objet.

Notez cependant que l’utilisation de la avec déclaration en mode strict n'est pas autorisé, car il peut causer une certaine confusion portée.

De plus, il est seulement conseillé d’utiliser le avec déclaration si ses déclarations internes utilisent l'objet associé à la avec sinon l'interprète perdra du temps à chercher dans l'objet mentionné par avec d'abord, pour tous les noms de propriété non qualifiés, il se trouve plus tard à l'intérieur du avec bloc.