45 précautions de programmation JavaScript et compétences skills_javascript

JavaScript est le langage de programmation le plus populaire au monde et peut être utilisé pour le développement Web, le développement d'applications mobiles (PhoneGap, Appcelerator), le développement côté serveur (Node.js et Wakanda), etc. JavaScript est également le premier langage permettant à de nombreux novices d'entrer dans le monde de la programmation. Il peut être utilisé pour afficher une simple boîte de dialogue dans le navigateur ou pour contrôler le robot via nodebot ou nodruino. Les développeurs capables d'écrire du code JavaScript avec une structure claire et des performances élevées sont désormais les personnes les plus recherchées sur le marché du recrutement.

Dans cet article, je partagerai quelques astuces, secrets et bonnes pratiques JavaScript qui, à quelques exceptions près, s'appliquent à la fois au moteur JavaScript du navigateur et à l'interpréteur JavaScript côté serveur.

L'exemple de code présenté dans cet article a réussi le test sur la dernière version de Google Chrome 30 (V8 3.20.17.15).

1. Assurez-vous d'utiliser le mot-clé var lorsque vous attribuez une valeur à une variable pour la première fois

Si une variable est affectée directement sans être déclarée, elle sera utilisée par défaut comme nouvelle variable globale. Essayez d'éviter d'utiliser des variables globales.

2. Utilisez === au lieu de ==

Les opérateurs

== et != convertissent automatiquement les types de données si nécessaire. Mais === et !== ne le font pas, ils comparent les valeurs et les types de données en même temps, ce qui les rend également plus rapides que == et !=.

Copier le code Le code est le suivant :

[10] === 10 // est faux
[10] == 10 // est vrai
'10' == 10 // est vrai
'10' === 10 // est faux
[] == 0 // est vrai
[] === 0 // est faux
'' == false // est vrai mais vrai == "a" est faux
'' === faux // est faux

3. Les résultats logiques des chaînes sous-finisées, nulles, 0, fausses, NaN et vides sont tous faux
4. Utilisez le point-virgule à la fin de la ligne

En pratique, il est préférable d'utiliser des points-virgules. Peu importe si vous oubliez de les écrire. Dans la plupart des cas, l'interpréteur JavaScript les ajoutera automatiquement. Pour plus d'informations sur les raisons pour lesquelles les points-virgules sont utilisés, veuillez consulter l'article La vérité sur les points-virgules en JavaScript.

5. Utiliser le constructeur d'objet

Copier le code Le code est le suivant :

fonction Personne (prénom, nom) {
This.firstName = firstName;
This.lastName = lastName;
>
var Saad = new Person("Saad", "Mousliki");

6. Utilisez typeof, instanceof et constructeur avec précaution
typeof : opérateur unaire JavaScript, utilisé pour renvoyer le type d'origine de la variable sous la forme d'une chaîne. Notez que typeof null renverra également un objet (array Array, time Date, etc.). objet
constructeur : propriété de prototype interne, peut être remplacée via le code
instanceof : opérateur JavaScript, recherchera dans le constructeur dans la chaîne de prototypes et retournera vrai s'il est trouvé, sinon retournera faux

Copier le code Le code est le suivant :

var arr = ["a", "b", "c"];
typeof arr; // Renvoie "objet"
arr instanceof Array // vrai
arr.constructor(); //[]

7. Utilisez les fonctions d'appel automatique
La fonction est automatiquement exécutée directement après la création, généralement appelée fonction anonyme auto-invoquée (Self-Invoked Anonymous Function) ou directement appelée expression de fonction (Immediately Invoked Function Expression). Le format est le suivant :

Copier le code Le code est le suivant :

(fonction(){
//Le code placé ici sera exécuté automatiquement
})();
(fonction(a,b){
var résultat = a b;
Résultat de retour ;
})(10,20)

Obtenez aléatoirement des membres du tableau

Copier le code Le code est le suivant :

var items = [12, 548, 'a', 2, 5478, 'foo', 8852, , 'Doe', 2145, 119];
var randomItem = items[Math.floor(Math.random() * items.length)];

9. Obtenez des nombres aléatoires dans la plage spécifiée
Cette fonction est particulièrement utile lors de la génération de fausses données à des fins de test, telles que les salaires dans une fourchette spécifiée.

Copier le code Le code est le suivant :

var x = Math.floor(Math.random() * (max - min 1)) min;

10. Générer un tableau numérique de 0 à la valeur spécifiée

Copier le code Le code est le suivant :

var nombresArray = [] , max = 100;
for( var i=1; numberArray.push(i ) < max;); // nombres = [1,2,3 ... 100]

11. Générer des chaînes alphanumériques aléatoires

Copier le code Le code est le suivant :

fonction generateRandomAlphaNum(len) {
var rdmString = "";
for( ; rdmString.length < len; rdmString = Math.random().toString(36).substr(2));
Renvoie rdmString.substr(0, len);

12. Perturber l'ordre du tableau de nombres

Copier le code Le code est le suivant :

nombres var = [5, 458, 120, -215, 228, 400, 122205, -85411];
nombres = nombres.sort(function(){ return Math.random() - 0.5});
/* Le tableau de nombres ressemblera à [120, 5, 228, -215, 400, 458, -85411, 122205] */

La fonction de tri de tableau intégrée de JavaScript est utilisée ici. Une meilleure façon consiste à utiliser un code spécialisé pour l'implémenter (comme l'algorithme de Fisher-Yates).

13. Supprimer les espaces des chaînes

Java, C#, PHP et d'autres langages implémentent tous des fonctions spéciales de suppression d'espace de chaîne, mais une telle fonction n'existe pas en JavaScript. Vous pouvez utiliser le code suivant pour faire fonctionner une fonction de découpage pour l'objet String :

Copier le code Le code est le suivant :

String.prototype.trim = function(){return this.replace(/^s |s $/g, "");};

Le nouveau moteur JavaScript dispose déjà d'une implémentation native de trim().

14. Ajouter entre les tableaux

Copier le code Le code est le suivant :

var array1 = [12, "foo" , {nom "Joe"} , -2458];
var array2 = ["Biche", 555, 100];
Array.prototype.push.apply(array1, array2);
/* La valeur du tableau1 est [12, "foo", {name "Joe"}, -2458, "Doe", 555, 100] */

15. Convertir un objet en tableau

Copier le code Le code est le suivant :

var argArray = Array.prototype.slice.call(arguments);

16. Vérifiez s'il s'agit d'un numéro

Copier le code Le code est le suivant :

la fonction estNuméro(n){
Retour !isNaN(parseFloat(n)) && isFinite(n);
>

17. Vérifiez s'il s'agit d'un tableau

Copier le code Le code est le suivant :

la fonction estArray(obj){
Renvoie Object.prototype.toString.call(obj) === '[object Array]' ;
>

Mais si la méthode toString() est remplacée, cela ne fonctionnera pas. Vous pouvez également utiliser la méthode suivante :

Copier le code Le code est le suivant :

Array.isArray(obj); // c'est une nouvelle méthode Array

Si frame n'est pas utilisé dans le navigateur, instanceof peut également être utilisé, mais si le contexte est trop complexe, des erreurs peuvent survenir.

Copier le code Le code est le suivant :

var monFrame = document.createElement('iframe');
document.body.appendChild(myFrame);
var monArray = window.frames[window.frames.length-1].Array;
var arr = nouveau monTableau(a,b,10); // [a,b,10]
// Le constructeur de myArray a été perdu, et le résultat de instanceof sera anormal
// Le constructeur ne peut pas être partagé entre les frames
arr instanceof Array; // faux

18. Obtenez les valeurs maximales et minimales dans le tableau

Copier le code Le code est le suivant :

nombres var = [5, 458, 120, -215, 228, 400, 122205, -85411]; var maxInNumbers = Math.max.apply(Maths, nombres
var minInNumbers = Math.min.apply(Maths, nombres);

19. Effacer le tableau

Copier le code Le code est le suivant :

var monTableau = [12, 222, 1000];
myArray.length = 0; // myArray sera égal à [].

20. Ne supprimez pas ou ne supprimez pas d'éléments directement du tableau
Si vous utilisez directement delete sur un élément du tableau, il n'est pas supprimé, mais l'élément est défini sur non défini. La suppression des éléments du tableau doit utiliser splice.

À ne pas faire :

Copier le code Le code est le suivant :

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; items.length; // renvoie 11
supprimer les éléments[3] ; // renvoie vrai
items.length; // renvoie 11
/* Le résultat des éléments est [12, 548, "a", non défini × 1, 5478, "foo", 8852, non défini × 1, "Doe", 2154, 119] */

À la place :

Copier le code Le code est le suivant :

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; items.length; // renvoie 11

items.splice(3,1) ;
items.length; // renvoie 10
/* Le résultat des éléments est [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119]


delete peut être utilisé lors de la suppression des propriétés d’un objet.

21. Utilisez l'attribut length pour tronquer le tableau

Dans l'exemple précédent, l'attribut length a été utilisé pour effacer le tableau. Il peut également être utilisé pour tronquer le tableau :

Copier le code Le code est le suivant : var monTableau = [12, 222, 1000, 124, 98, 10]; myArray.length = 4; // myArray sera égal à [12, 222, 1000, 124].

Dans le même temps, si l'attribut length est agrandi, la valeur de longueur du tableau augmentera et undefined sera utilisé comme nouvel élément à remplir. la longueur est une propriété accessible en écriture.

Copier le code

Le code est le suivant : myArray.length = 10; // la nouvelle longueur du tableau est 10 monArray[myArray.length - 1]; // non défini

22. Utiliser ET logique ou dans des conditions

Copier le code

Le code est le suivant : var foo = 10; foo == 10 && doSomething(); // est la même chose que if (foo == 10) doSomething(); foo == 5 || doSomething(); // est la même chose que si (foo != 5) doSomething();

Le OU logique peut également être utilisé pour définir des valeurs par défaut, telles que les valeurs par défaut des paramètres de fonction.

Copier le code

Le code est le suivant :

function doSomething(arg1){
arg1 = arg1 || 10; // arg1 aura 10 comme valeur par défaut si elle n'est pas déjà définie
>

23. Faites boucler la méthode de la fonction map() sur les données

Copier le code Le code est le suivant :

var carrés = [1,2,3,4].map(function (val) {
Retour val * val
});
// les carrés seront égaux à [1, 4, 9, 16]

24. Conserver le nombre de décimales spécifié

Copier le code Le code est le suivant :

var num =2.443242342;
num = num.toFixed(4); // num sera égal à 2,4432

Notez que toFixec() renvoie une chaîne, pas un nombre.

25. Problèmes avec le calcul de la virgule flottante

Copier le code Le code est le suivant :

0,1 0,2 === 0,3 // est faux
9007199254740992 1 // est égal à 9007199254740992
9007199254740992 2 // est égal à 9007199254740994

Pourquoi? Parce que 0,1 0,2 est égal à 0,30000000000000004. Les nombres en JavaScript sont construits conformément à la norme IEEE 754 et sont représentés en interne sous forme de décimales à virgule flottante de 64 bits. Pour plus de détails, voyez comment les nombres en JavaScript sont codés.

.

Ce problème peut être résolu en utilisant toFixed() et toPrecision().

26. Vérifiez les propriétés de l'objet via la boucle for-in
L'utilisation suivante peut empêcher la saisie des propriétés du prototype de l'objet lors de l'itération.

Copier le code Le code est le suivant :

for (nom de la variable dans l'objet) {
Si (object.hasOwnProperty(name)) {
// fait quelque chose avec le nom
}  
>

27. Opérateur virgule

Copier le code Le code est le suivant :

var a = 0;
var b = ( une , 99 );
console.log(a); // a sera égal à 1
console.log(b); // b est égal à 99

28. Stocker temporairement les variables utilisées pour le calcul et la requête
Dans les sélecteurs jQuery, des éléments DOM entiers peuvent être temporairement stockés.

Copier le code Le code est le suivant :

var navright = document.querySelector('#right');
var navleft = document.querySelector('#left');
var navup = document.querySelector('#up');
var navdown = document.querySelector('#down');

29. Vérifiez à l'avance les paramètres transmis à isFinite()

Copier le code Le code est le suivant :

estFinite(0/0); // faux
isFinite("foo"); // faux
estFinite("10"); // vrai
estFinite(10); // vrai
estFinite(indéfini); // faux
estFinite(); // faux
isFinite(null); // true, une attention particulière doit être portée à cela

30. Évitez d'utiliser des nombres négatifs comme index dans les tableaux

Copier le code Le code est le suivant :

var nombresArray = [1,2,3,4,5];
var from = numberArray.indexOf("foo") ; // from est égal à -1
numberArray.splice(from,2); // renverra [5]

Notez que le paramètre index passé à splice ne doit pas être un nombre négatif. S'il s'agit d'un nombre négatif, l'élément sera supprimé de la fin du tableau.

31. Utilisez JSON pour sérialiser et désérialiser

Copier le code Le code est le suivant :

var personne = {nom :'Saad', âge : 26, département : {ID : 15, nom : "R&D"} };
var stringFromPerson = JSON.stringify(person);
/* Le résultat de stringFromPerson est "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */
var personFromString = JSON.parse(stringFromPerson);
/* La valeur de personFromString est la même que celle de l'objet personne */

32. N'utilisez pas eval() ou un constructeur de fonction
eval() et le constructeur de fonctions (Function consturctor) sont relativement chers. À chaque fois qu'ils sont appelés, le moteur JavaScript doit convertir le code source en code exécutable.

Copier le code Le code est le suivant :

var func1 = nouvelle fonction(functionCode);
var func2 = eval(functionCode);

33. Évitez d'utiliser with()
L'utilisation de with() peut ajouter des variables à la portée globale. Par conséquent, s'il existe d'autres variables portant le même nom, il sera facile de les confondre et la valeur sera écrasée.

34. Ne pas utiliser for-in sur les tableaux
Éviter :

Copier le code Le code est le suivant :

var somme = 0;
pour (var i dans arrayNumbers) {
somme = tableauNombres[i];
>

A la place :

Copier le code Le code est le suivant :

var somme = 0;
for (var i = 0, len = arrayNumbers.length; i < len; i ) {
somme = tableauNombres[i];
>

Un autre avantage est que les deux variables i et len ​​sont dans la première instruction de la boucle for, et elles ne seront initialisées qu'une seule fois, ce qui est plus rapide que la manière d'écrire suivante :

Copier le code Le code est le suivant :

pour (var i = 0; i < arrayNumbers.length; i )

35. Utilisez des fonctions au lieu de chaînes lors du passage à setInterval() et setTimeout()
Si vous passez une chaîne à setTimeout() et setInterval(), elles seront converties de la même manière que eval, ce qui sera certainement plus lent, alors n'utilisez pas :

Copier le code Le code est le suivant :

setInterval('doSomethingPeriodically()', 1000);
setTimeout('doSomethingAfterFiveSeconds()', 5000);

Utilisez plutôt :

Copier le code Le code est le suivant :

setInterval(doSomethingPeriodically, 1000);
setTimeout(doSomethingAfterFiveSeconds, 5000);

36. Utilisez switch/case au lieu d'une grosse pile de if/else

Lorsque vous jugez qu'il y a plus de deux branches, l'utilisation de switch/case est plus rapide, plus élégante et plus propice à l'organisation du code. Bien sûr, s'il y a plus de 10 branches, n'utilisez pas switch/case.

37. Utilisez des intervalles numériques dans le commutateur/cas

En fait, la condition du cas dans switch/case peut aussi s'écrire comme ceci :

Copier le code Le code est le suivant :

function getCategory(âge) {
var catégorie = "";
changer (vrai) {
le cas estNaN(âge) :
            catégorie = "pas un âge"
pause;
cas (âge >= 50) :
            catégorie = "Ancien" ;
pause;
cas (âge <= 20) :
            catégorie = "Bébé"
pause;
défaut:             catégorie = "Jeune" ;
pause;
};
Catégorie de retour ;
}
getCategory(5); // renverra "Bébé"

38. Utiliser des objets comme prototypes d'objets

De cette façon, vous pouvez donner un objet en paramètre pour créer un nouvel objet basé sur ce prototype :

Copier le code Le code est le suivant :

fonction clone (objet) {
Fonction OneShotConstructor(){};
OneShotConstructor.prototype = objet
Renvoie le nouveau OneShotConstructor();
}
clone(Array).prototype; // []

39. Fonction de conversion de champ HTML

Copier le code Le code est le suivant :

fonction escapeHTML(texte) {
var remplacements= {"<": "<", ">": ">","&": "&", """: """}; Renvoie text.replace(/[<>&"]/g, function(character) {
          renvoyer les remplacements[caractère] ;
});
>

40. N'utilisez pas try-catch-finally dans une boucle
La partie catch de try-catch-finally attribuera l'exception à une variable pendant l'exécution, et cette variable sera construite en une nouvelle variable dans la portée d'exécution.

À ne pas faire :

Copier le code Le code est le suivant :

var objet = ['foo', 'bar'], i; pour (i = 0, len = object.length; i Essayez {
// fait quelque chose qui lève une exception
}  
 attraper(e) {  
// gérer l'exception
}
>


A la place :

Copier le code Le code est le suivant : var objet = ['foo', 'bar'], i; essayez {

pour (i = 0, len = object.length; i // fait quelque chose qui lève une exception
}
}
attraper(e) {
// gérer l'exception
>




41. Faites attention à la définition du délai d'attente lors de l'utilisation de XMLHttpRequests