Top 10 des raccourcis JavaScript pour les débutants

Raccourcis JavaScript non seulement accélérer le processus de codage, mais également raccourcir les scripts, par conséquent conduire à chargements de page plus rapides. Les codes de raccourci sont aussi valables que leurs versions longues. ils essentiellement représenter la même chose-seulement dans un format plus compact. Ce sont l'une des techniques les plus simples d'optimisation de code.

Il existe plusieurs raccourcis JavaScript, mais ils ne pas avoir de guide de référence officiel. Certains sont vraiment simples, alors que d'autres sont assez intimidants, même pour les développeurs expérimentés. Dans cet article, vous pouvez trouver 10 raccourcis JavaScript pour les débutants avec lequel vous pouvez commencer avec l'optimisation du code et écrire un code plus concis.

1. Nombres décimaux

Si vous régulièrement travailler avec de grandes décimales cette sténographie peut être une aubaine, puisque vous n’aurez plus à taper tous les zéros, remplacez-les simplement par le e notation. Par exemple, 1e8 signifie l'ajout de huit zéros après la 1 chiffre, il est égal à 100000000.

Le nombre après la lettre e indique le nombre de zéros qui viennent après le (s) chiffre (s) avant e. également, 16e4 est le raccourci pour 160000, etc.

 / * Raccourci * / var myVar = 1e8; / * Longhand * / var myVar = 100000000;

2. Incrément, décrément

le incrément de raccourci est composé de deux + signes, cela signifie que la valeur d'une variable doit être incrémenté de un. De même, le décrémenter la sténographie se compose de deux - signes, et cela signifie que la variable doit être décrémenté par un.

Ces deux raccourcis peuvent être utilisés uniquement sur les types de données numériques. Ils jouent un rôle indispensable dans les boucles; leur cas d'utilisation le plus fréquent est le pour boucle.

 / * Raccourci * / i ++; j--; / * Longhand * / i = i + 1; j = j-1;

3. Ajouter, distraire, multiplier, diviser

Il y a un raccourci pour chacun des quatre opérations mathématiques de base: addition, distraction, multiplication et division. Ils fonctionnent de la même manière que les opérateurs d’incrémentation et de décrémentation, ici vous pouvez changer la valeur d’une variable. par n'importe quel nombre (pas seulement par un).

Dans l'exemple ci-dessous, le je la variable est incrémentée de 5, j est décrémenté par 3, k est multiplié par dix, et l est divisé par 2.

 / * Sténographie * / i + = 5; j- = 3; k * = 10; l / = 2; / * Longhand * / i = i + 5; j = j-3; k = k * 10; l = l / 2;

4. Déterminer la position du personnage

le charAt () méthode est l’une des méthodes de chaîne les plus fréquemment utilisées, elle retourne le caractère à une position spécifiée (par exemple, le 5^th caractère d'une chaîne). Vous pouvez utiliser un raccourci simple à la place: vous ajoutez le position des caractères entre crochets après la ficelle.

Faites attention que le charAt () la méthode est base zéro. Donc, myString [4] retournera le 5^th caractère dans la chaîne ("y" dans l'exemple).

 var myString = "Joyeux anniversaire"; / * Raccourci * / myString [4]; / * Longhand * / myString.charAt (4);

5. Déclarez les variables en bloc

Si vous voulez créer plus d'une variable à la fois vous n'avez pas à les taper un par un. Il suffit d'utiliser le var (ou laisser) mot-clé juste une fois, alors vous pouvez simplement lister les variables que vous voulez créer, séparés par une virgule.

Avec ce raccourci, vous pouvez déclarer les deux variables non définies et variables avec une valeur.

 / * Sténographie * / var i, j = 5, k = "bonjour", l, m = faux; / * Longhand * / var i; var j = 5; var k = "bonjour"; var l; var m = faux;

6. Déclarer un tableau associatif

Déclarer un tableau en JavaScript est une tâche relativement simple, en utilisant le var myArray = ["pomme", "poire", "orange"] syntaxe. toutefois, déclarer un tableau associatif est un peu plus compliqué, car ici, il ne suffit pas de définir les valeurs mais aussi les clés (dans le cas de tableaux classiques, les clés sont 0, 1, 2, 3, etc..).

Un tableau associatif est un collection de paires clé-valeur. La méthode la plus longue consiste à déclarer le tableau, puis à ajouter chaque élément un par un. Cependant, avec le raccourci ci-dessous, vous pouvez également déclarer le tableau associatif plus tous ses éléments en même temps.

Dans l'exemple ci-dessous, le mon tableau tableau associatif attribue son lieu de naissance (valeurs) à des personnages célèbres (clés).

 / * Shorthand * / var myArray = "Grace Kelly": "Philadelphie", "Clint Eastwood": "San Francisco", "Humphrey Bogart": "New York", "Sophia Loren": "Rome", "Ingrid Bergman ":" Stockholm " / * Longhand * / var myArray = new Array (); myArray ["Grace Kelly"] = "Philadelphie"; myArray ["Clint Eastwood"] = "San Francisco"; myArray ["Humphrey Bogart"] = "La ville de New York"; myArray ["Sophia Loren"] = "Rome"; myArray ["Ingrid Bergman"] = "Stockholm";

7. Déclarer un objet

Le raccourci pour déclaration d'objet fonctionne de la même manière que celui des tableaux associatifs. Cependant, ici, il n'y a pas de paires clé-valeur mais paires propriété-valeur que vous devez placer entre les accolades .

La seule différence dans la syntaxe abrégée est que les propriétés d'objet ne sont pas entre guillemets (prénom, lieu de naissance, âge, wasJamesBond dans l'exemple ci-dessous).

 / * Shorthand * / var myObj = nom: "Sean Connery", lieuOfBirth: "Edinburgh", âge: 86 ans, wasJamesBond: true; / * Longhand * / var myObj = nouvel objet (); myObj.name = "Sean Connery"; myObj.placeOfBirth = "Edinburgh"; myObj.age = 86; myObj.wasJamesBond = true;

8. Utiliser l'opérateur conditionnel

le opérateur conditionnel (ternaire) est fréquemment utilisé comme raccourci pour le sinon déclaration. Cela consiste en trois parties:

la état
qu'advient-il si le la condition est vraie (si)
qu'advient-il si le la condition est fausse (autre)

Dans l'exemple ci-dessous, nous envoyons un message simple (à l'intérieur du message variable) aux personnes qui veulent entrer dans un club. En utilisant le raccourci, c’est juste une ligne de code pour lancer l'évaluation.

 âge var = 17; / * Shorthand * / var message = age> = 18? "Autorisé": "refusé"; / * Longhand * / if (age> = 18) var message = "Autorisé";  else var message = "Refusé";

Si vous voulez tester juste copier le code dans la console Web (F12 dans la plupart des navigateurs) et modifiez la valeur de la âge variable quelques fois.

9. Vérifier la présence

Il arrive souvent que vous deviez vérifier si une variable est présent ou non. le “si présence” sténographie vous aide à le faire avec beaucoup moins de code.

Attention, la plupart des articles sur les raccourcis JavaScript ne donnent pas la forme à la main appropriée, si (myVar) la notation ne vérifie pas simplement si la variable n'est pas fausse, mais aussi une poignée d'autres choses. À savoir, la variable ne peut pas être indéfini, vide, nul ou faux.

 var myVar = 99; / * Raccourci * / if (myVar) console.log ("La variable myVar est définie ET elle n'est pas vide ET non nulle ET non fausse.");  / * Longhand * / if (typeof myVar! == "undefined" && myVar! == "" && myVar! == null && myVar! == 0 && myVar! == false) console.log ("Le myVar la variable est définie ET elle n'est pas vide ET non nulle ET non fausse. ");

Vous pouvez tester comment le “si présence” raccourci fonctionne en insérant l'extrait de code suivant dans la console Web et changer la valeur de maVar parfois.

Pour comprendre comment fonctionne ce raccourci, il convient de le tester avec les valeurs de "" (chaîne vide), faux, 0, vrai, une chaîne non vide (par exemple. "Salut"), un nombre (par exemple. 99), et quand la variable est indéfinie (simplement var myVar;).

10. Vérifier l'absence

le “si présence” sténographie peut être utilisé pour vérifier l'absence d'une variable en plaçant un point d'exclamation devant. Le point d'exclamation est le pas d'opérateur logique en JavaScript (et dans la plupart des langages de programmation).

Par conséquent, avec le si (! myVar) notation, vous pouvez vérifier si le maVar variable n'est pas indéfini, vide, nul ou faux.

 var myVar; / * Raccourci * / if (! MyVar) console.warn ("La variable myVar est indéfinie (OR) vide (OR) null (OU) false.");  / * Longhand * / if (typeof myVar === "undefined" || myVar === "" || myVar === null || myVar === 0 || myVar === false) console.warn ("La variable myVar est indéfinie (OR) vide (OR) null (OR) false.");