Top 10 des raccourcis JavaScript pour les débutants

Les raccourcis JavaScript non seulement accélèrent le processus de codage, mais raccourcissent également les scripts, ce qui permet d' accélérer le chargement des pages . Les codes raccourcis sont tout aussi valides que leurs versions longues; ils représentent essentiellement la même chose - seulement dans un format plus compact. Ils sont l'une des techniques d'optimisation de code les plus simples.

Il existe plusieurs raccourcis JavaScript, mais ils n'ont pas de guide de référence officiel . Certains sont vraiment simples, tandis 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 lesquels vous pouvez commencer avec l'optimisation du code et écrire un code plus concis.

1. Numéros décimaux

Si vous travaillez régulièrement avec de grandes décimales, ce raccourci peut être une bénédiction, car vous n'avez plus à taper tous les zéros, il suffit de les remplacer par la notation e . Par exemple, 1e8 signifie l'addition de huit zéros après le chiffre 1, cela équivaut à 100000000 .

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

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

2. Incrément, décrément

La sténographie de l'incrément est composée de deux signes +, cela signifie que la valeur d'une variable doit être incrémentée de un . De même, le raccourci de décrément consiste en deux - signes, et cela signifie que la variable doit être décrémentée de un .

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

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

3. Ajouter, distraire, multiplier, diviser

Il y a un raccourci pour chacune 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 modifier la valeur d'une variable par n'importe quel nombre (pas seulement par un).

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

 / * Graphe * / i + = 5; j- = 3; k * = 10; l / = 2; / * Longhand * / i = i + 5; j = j-3; k = k * 10; l = 1/2; 

4. Déterminer la position du personnage

La charAt() est l'une des méthodes de chaîne les plus fréquemment utilisées, elle renvoie le caractère à une position spécifiée (par exemple, le ^cinquième caractère d'une chaîne). Il y a un raccourci simple que vous pouvez utiliser à la place: vous ajoutez la position du caractère entre crochets après la chaîne.

Faites attention à ce que la charAt() soit basée sur zéro . Par conséquent, myString[4] retournera le 5 ^ème caractère de la chaîne ( "y" dans l'exemple).

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

5. Déclarez les variables en vrac

Si vous voulez créer plus d'une variable en même temps, vous n'avez pas besoin de les taper un par un. Il suffit d'utiliser le mot-clé var (ou let ) une seule fois, puis vous pouvez simplement lister les variables que vous voulez créer, séparées par une virgule .

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

 / * Graphe * / 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éclarez un tableau associatif

Déclarer un tableau en JavaScript est une tâche relativement simple, en utilisant la var myArray = ["apple", "pear", "orange"] . Cependant, déclarer un tableau associatif est un peu plus compliqué, car ici, vous n'avez pas seulement à définir les valeurs mais aussi les clés (dans le cas de tableaux réguliers, les clés sont 0, 1, 2, 3, etc. ).

Un tableau associatif est une collection de paires clé-valeur . La façon de procéder est de déclarer le tableau, puis d'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 myArray associatif myArray assigne leur 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 City", "Sophia Loren": "Rome", "Ingrid Bergman ":" Stockholm "} / * Longhand * / var monArray = nouveau Array (); myArray ["Grace Kelly"] = "Philadelphie"; myArray ["Clint Eastwood"] = "San Francisco"; myArray ["Humphrey Bogart"] = "New York City"; myArray ["Sophia Loren"] = "Rome"; myArray ["Ingrid Bergman"] = "Stockholm"; 

7. Déclarer un objet

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

La seule différence dans la syntaxe sténographique est que les propriétés des objets ne sont pas placeOfBirth entre guillemets ( name, placeOfBirth, age, wasJamesBond dans l'exemple ci-dessous).

 / * Shorthand * / var myObj = {nom: "Sean Connery", placeOfBirth: "Edimbourg", âge: 86, wasJamesBond: true}; / * Longhand * / var myObj = nouvel objet (); myObj.name = "Sean Connery"; myObj.placeOfBirth = "Édimbourg"; myObj.age = 86; myObj.wasJamesBond = true; 

8. Utilisez l'opérateur conditionnel

L' opérateur conditionnel (ternaire) est fréquemment utilisé comme raccourci pour l'instruction if-else . Il se compose de trois parties :

1. la condition
2. que se passe-t-il si la condition est vraie ( if )
3. que se passe-t-il si la condition est fausse ( else )

Dans l'exemple ci-dessous, nous envoyons un message simple (à l'intérieur de la variable de message ) aux personnes qui veulent entrer dans un club. En utilisant la forme raccourcie, c'est juste une ligne de code pour exécuter l'évaluation .

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

Si vous voulez le tester il suffit de copier le code dans la console web (F12 dans la plupart des navigateurs) et de modifier la valeur de la variable d' age plusieurs fois.

9. Vérifiez la présence

Il arrive fréquemment que vous deviez vérifier si une variable est présente ou non . La sténographie «si présence» vous aide à le faire avec beaucoup moins de code.

Méfiez-vous que la plupart des articles sur les raccourcis JavaScript ne donnent pas la bonne forme, car la notation if( myVar ) 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éfinie, vide, nulle et false .

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

Vous pouvez tester la manière dont le raccourci «si présence» fonctionne en insérant l'extrait de code suivant dans la console Web et en modifiant la valeur de myVar plusieurs fois.

Pour comprendre comment ce raccourci fonctionne, il vaut mieux le tester avec les valeurs de "" (chaîne vide), false, 0, true, une chaîne non vide (par exemple "Hi" ), un nombre (par exemple 99 ), et quand le La variable est indéfinie (simplement var myVar; ).

10. Vérifier l'absence

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

Par conséquent, avec la notation if( !myVar ), vous pouvez vérifier si la variable myVar n'est pas indéfinie, vide, nulle ou fausse .

 var myVar; / * Shorthand * / if (! MyVar) {console.warn ("La variable myVar n'est pas définie (OU) vide (OR) null (OR) false."); } / * Longhand * / if (typeof myVar === "non défini" || myVar === "" || myVar === null || myVar === 0 || myVar === faux) {console.warn ("La variable myVar est indéfinie (OR) vide (OR) null (OR) false."); } 

50 didacticiels de conception d'icône pour les concepteurs

Les créateurs sont des créatures visuelles qui jugent un livre par sa couverture. Ce n'est pas un secret que les icônes ont un impact énorme dans la conception de sites Web ainsi que dans la conception des applications. Une bonne icône devrait ressortir et être facile à retenir. Il devrait facilement transmettre un message aux utilisateurs et présenter la marque.Concevo

(Conseils techniques et de conception)

Now UI Kit - Bootstrap définitif 4 GUI

Alors que les développeurs frontend attendent avec impatience la sortie officielle de Bootstrap 4, nous parcourons des guides détaillés couvrant les nouvelles fonctionnalités impressionnantes. Cependant, les impatients plongeront directement dans BootStrap 4 et commenceront à apprendre comment cela fonctionne aujourd'hui. C&#

(Conseils techniques et de conception)