Expérience pratique JavaScript

Chaque personne écrit JavaScript d'une manière différente. Mais il y a encore beaucoup de points communs, voici un ensemble de directives et de conseils simples pour l'écriture de JavaScript qui devraient vous éviter bien des détours.

Évitez les variables globales

Réduisez au minimum l'utilisation des variables globales. Cela inclut tous les types de données, les objets et les fonctions.

Les variables globales et les fonctions peuvent être couvertes par d'autres scripts. Donc, utilisez plutôt des variables locales.

Les variables locales doivent être utiliséeslet,constetvarles mots-clés de déclaration, sinon elles deviendront des variables globales.

Déclarez toujours les variables

Lors de la déclaration de variables et de constantes, utilisezletetconstles mots-clés, plutôt quevar.

　　//　Recommandé:
　　let myAge =　22;
　　const myName = "oldtoolbag.com";
　　
　　//　Non recommandé:
　　var myAge =　22;
　　var myName = "oldtoolbag.com";

Il y a de nombreuses raisons suffisantes pour cela-Par exemple, cela évite les problèmes dus à la réaffectation accidentelle et évite les améliorations qui pourraient affecter la lisibilité.

Il est une bonne pratique de placer toutes les déclarations en haut de chaque script ou fonction.

Ci-dessous est fourni un code plus concis, avec un endroit pour rechercher tous les variables au début du code.

　　//　Déclarez les déclarations au début
　　let firstName, lastName, price, discount, fullPrice;
　　
　　//　Utilisez
　　firstName = "oldtoolbag.com";
　　lastName = "Choudhary";
　　
　　price =　26.90;
　　discount =　1.25;
　　
　　fullPrice = price　*　100　/　discount;

Utilisez la syntaxe étendue

Pour maximiser la lisibilité, nous utilisons la syntaxe étendue, en mettant chaque ligne de JS en ligne.

　　//　Recommandé:
　　function myFunc() {
　　console.log("Parrot Tutorial");
　　}
　　
　　//　Non recommandé:
　　function myFunc() { console.log("Parrot Tutorial"); }

Utilisez des espaces entre les opérateurs, les opérandes, les paramètres, etc. :

　　//　Cela est plus lisible
　　if(dayOfWeek ===　7　&& weather === "sunny") {
　　/*　Some code　*/
　　}
　　
　　//　La lisibilité est médiocre
　　if(dayOfWeek ===7&& weather === "sunny"){
　　/*　Some code　*/
　　}

Ne pas déclarer les nombres, les chaînes de caractères ou les valeurs booléennes en tant qu'objets

Toujours considérez les nombres, les chaînes de caractères ou les valeurs booléennes comme des valeurs primitives. Ne pas les traiter comme des objets.

Déclarer ces types en tant qu'objets réduira la vitesse d'exécution et produira des résultats inattendus.

var str1　=== "New Delhi";
var str2　=== new String("New Delhi");
document.write(str1　=== str2);　//　Retourne false car str1　et str2　ont des types différents

Il est impossible de comparer les objets :

var str1　=== new String("New Delhi");
var str2　=== new String("New Delhi");
document.write(str1　=== str2);　//　Retourne false car str1et str2Est un objet différent
document.write(str1　=== str2);　//　Retourne false car str1et str2Est un objet différent

Ne pas utiliser new Object()

• Utilisez {} à la place de new Object()

• Utilisez "" à la place de new String()

• Utilisez 0 à la place de new Number()

• Utilisez false à la place de new Boolean()

• Utilisez [] à la place de new Array()

• Utilisez/()}/Remplacez new RegExp() par

• Utilisez function (){} à la place de new Function()

let x1　=== {};
let x2　=== "";
let x3　=== 0;
let x4　=== false;
let x5　=== [];
let x6　=　/()}/;
let x7　= function(){};

Attention aux conversions de type automatiques

JavaScript est un langage de type faible ou dynamique. Les variables JavaScript ne sont pas directement associées à un type de valeur spécifique et peuvent être assignées (et réassignées) tous les types de valeurs.

var x =　20;　//　x est maintenant un Number
x = "oldtoolbag.com";　　　//　x est maintenant un String
x = true;　　　//　x est maintenant un Boolean

Lors des opérations mathématiques, JavaScript peut convertir les nombres en chaînes :

num =　50　+　10;//　Retourne　60, typeof num est un nombre
num =　50　+　"10";　　//　Retourne "5010", typeof num est une chaîne
num = "50"　+　10;　　//　Retourne "5010", typeof num est une chaîne
num = "50"　-　10;　　//　Retourne "40", typeof num est un nombre

Notez que les nombres peuvent être convertis accidentellement enNaN（non numérique）：

num =　50　*　"Parrot";　　//　Retourne "NaN", typeof num est un nombre

Utilisez des comparaisons strictes

L'opérateur == de comparaison compare toujours avant la conversion (pour correspondre au type).

L'opérateur === de comparaison forcé compare la valeur et le type.

　　1　== ";1";　　　//　true
　　1　== true;　　//　true
　　
　　1　=== ";1";　　//　false
　　1　=== true;　　　//　false

Utilisation des constantes de modèle

Pour insérer une valeur dans une chaîne, utilisezConstantes de modèle（` `）。

　　//　Recommandé:
　　let myName = 'oldtoolbag.com';
　　console.log(`Hi!　I'm ${myName}!`);
　　
　　//　Non recommandé:
　　let myName = 'oldtoolbag.com';
　　console.log('Hi!　I\'m'　+　myName　+　'!');

Boucle générique

Lorsque vous utilisezfor,for...inoufor...ofBoucle, assurez-vous de définir correctement l'initialisation, en utilisantletMots-clés.

　　let fruits = ["Apple", "Mango", "Banana"];
　　
　　//　Recommandé:
　　for(let i of fruits) {
　　　console.log(i);
　　}
　　
　　//　Non recommandé:
　　for(i of fruits) {
　　　console.log(i);
　　}

N'oubliez pas :

• Il ne devrait pas y avoir d'espace entre le mot-clé de boucle et la parenthèse ouvranteEspace.

• Il doit y avoir de l'espace entre les parenthèses et les accoladesUn espace.

Nom de la fonction

Pour le nom de la fonction, utilisez lowerCamelCasing et utilisez des noms sémantiques clairs et compréhensibles à l'endroit approprié.

　　//　Recommandé:
　　function　sayHello()　{
　　alert('Hello!');
　　}
　　
　　//　Non recommandé:
　　function　sayhello()　{
　　alert('Hello!');
　　}

Terminer le switch avec une valeur par défaut

switchToujours terminer par default:. Même si vous ne le pensez pas nécessaire.

var　day;
switch　(new　Date().getDay())　{
case　0:　day　=　"Sunday";
break;
case　1:　day　=　"Monday";
break;
case　2:　day　=　"Tuesday";
break;
case　3:　day　=　"Wednesday";
break;
case　4:　day　=　"Thursday";
break;
case　5:　day　=　"Friday";
break;
case　6:　day　=　"Saturday";
break;
default:　day　=　"Undefined　Day";
}

Gestion des erreurs

Si certains états du programme génèrent des erreurs non capturées, elles arrêteront l'exécution et pourraient réduire l'utilité de l'exemple.

Par conséquent, vous devriez utilisertry...catchBloc pour capturer les erreurs.

　　try　{
　　console.log(results);
　　}
　　catch(e)　{
　　console.error(e);
　　}