JavaScript est un langage de programmation de classe mondiale qui 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 pour de nombreux nouveaux nouveaux dans le monde de la programmation. Il peut être utilisé pour afficher des boîtes d'invites simples dans le navigateur, ou pour contrôler le robot via Nodebot ou Noderuino. Les développeurs qui peuvent écrire du code JavaScript bien structuré et efficace sont désormais les personnes les plus recherchées sur le marché du recrutement.
Dans cet article, je partagerai quelques conseils JavaScript, conseils et meilleures pratiques. À l'exception de quelques-uns, les deux sont le moteur JavaScript du navigateur et l'interprète JavaScript côté serveur.
L'exemple de code de cet article a réussi le test sur Google Chrome 30 dernière version (V8 3.20.17.15).
1. Assurez-vous d'utiliser le mot clé VAR lors de l'attribution d'une valeur à une variable pour la première fois.
Si une variable n'est pas déclarée et est directement attribuée à la valeur, elle sera utilisée en tant que nouvelle variable globale par défaut. Essayez d'éviter d'utiliser des variables globales.
2. Utiliser === remplacer ==
Les opérateurs == et! = Convertiront automatiquement le type de données si nécessaire. Mais === et! == NE PAS, ils compareront les valeurs et les types de données en même temps, ce qui les rend également plus rapides que == et! =.
La copie de code est la suivante:
[10] === 10 // est faux
[10] == 10 // est vrai
'10' == 10 // est vrai
'10' === 10 // est faux
[] == 0 // est vrai
[] === 0 // est faux
'' == faux // est vrai mais vrai == "A" est faux
'' === faux // est faux
3. Les résultats logiques des cordes sous-alimentées, nuls, 0, false, nan et vides sont toutes fausses
4. Utilisez des demi-colons à la fin de la ligne
En pratique, il est préférable d'utiliser des demi-colons. Il est normal d'oublier de les écrire. Dans la plupart des cas, l'interpréteur JavaScript sera automatiquement ajouté. Pour savoir pourquoi vous souhaitez utiliser un point-virgule, vous pouvez vous référer à la vérité sur les demi-colons dans l'article JavaScript.
5. Utiliser le constructeur d'objets
La copie de code est la suivante:
Personne de fonction (FirstName, LastName) {
this.firstName = FirstName;
this.lastName = lastName;
}
var saad = nouvelle personne ("saad", "Mousliki");
6. Soyez prudent avec le type de type, l'instance et le constructeur
Typeof: JavaScript UNARY Opérateur, utilisé pour renvoyer le type d'origine d'une variable sous la forme d'une chaîne. Notez que le type de null renverra également l'objet, et la plupart des types d'objets (tableau, date d'heure, etc.) renverront également l'objet.
Constructeur: propriétés prototypes internes, qui peuvent être réécrites via le code
instanceOf: l'opérateur JavaScript, recherchera dans le constructeur dans la chaîne prototype, renvoie true si trouvé, sinon renvoie false si faux.
La copie de code est la suivante:
var arr = ["a", "b", "c"];
typeof arr; // retourne "objet"
Arrstance de l'arrêt de l'arrêt // true
arr.constructor (); // []
7. Utilisez les fonctions de Call Auto
Les fonctions sont automatiquement exécutées directement après la création, qui est généralement appelée fonction anonyme auto-invoquée ou expressions de fonction d'appel direct (expression de fonction immédiatement invoquée). Le format est le suivant:
La copie de code est la suivante:
(fonction(){
// Le code placé ici sera exécuté automatiquement
}) ();
(fonction (a, b) {
Var Result = A + B;
Résultat de retour;
}) (10,20)
8. Obtenir au hasard des membres du tableau
La copie de code est la suivante:
var items = [12, 548, «a», 2, 5478, «foo», 8852 ,, «Doe», 2145, 119];
var randritem = items [math.floor (math.random () * items.length)];
9. Obtenez des nombres aléatoires dans la plage spécifiée
Cette fonction est particulièrement numérique lors de la génération de fausses données pour les tests, tels que le nombre de salaires dans une plage spécifiée.
La copie de code est la suivante:
var x = math.floor (math.random () * (max - min + 1)) + min;
10. Générer un tableau de nombres de 0 à des valeurs spécifiées
La copie de code est la suivante:
var nombresArray = [], max = 100;
pour (var i = 1; nombresRray.push (i ++) <max;); // nombres = [1,2,3 ... 100]
11. Générer des cordes alphanumériques aléatoires
La copie de code est la suivante:
Fonction GénéraTandomalphanum (Len) {
var rdmstring = "";
pour (; rdmstring.length <len; rdmstring + = math.random (). toString (36) .substr (2));
return rdmstring.substr (0, len);
12. Perturber l'ordre des tableaux de nombres
La copie de code est la suivante:
nombres VAR = [5, 458, 120, -215, 228, 400, 122205, -85411];
nombres = nombres.sort (function () {return math.random () - 0,5});
/ * Le tableau des numéros sera similaire à [120, 5, 228, -215, 400, 458, -85411, 122205] * /
Ici, nous utilisons la fonction de tri de tableau intégrée de JavaScript. Une meilleure façon consiste à l'implémenter avec un code spécial (comme l'algorithme Fisher-Yates). Vous pouvez vous référer à cette discussion sur Stackoverflow.
13. Retirer les espaces des cordes
Des langues telles que Java, C # et PHP implémentent toutes des fonctions de despace de chaîne spéciales, mais il n'y a rien de tel que JavaScript. Vous pouvez utiliser le code suivant pour faire une fonction de garniture pour la fonction d'objet String:
La copie de code est la suivante:
String.prototype.trim = function () {return this.replace (/ ^ / s + | / s + $ / g, "");};
Le nouveau moteur JavaScript a déjà une implémentation native de TRIM ().
14. Ajout entre les tableaux
La copie de code est la suivante:
var array1 = [12, "foo", {name "Joe"}, -2458];
var array2 = ["Doe", 555, 100];
Array.prototype.push.apply (array1, array2);
/ * La valeur Array1 est [12, "foo", {name "Joe"}, -2458, "Doe", 555, 100] * /
15. Convertir les objets en tableaux
La copie de code est la suivante:
var argarray = array.prototype.slice.call (arguments);
16. Vérifiez si c'est un numéro
La copie de code est la suivante:
fonction isNumber (n) {
return! Isnan (parsefloat (n)) && isfinite (n);
}
17. Vérifiez si c'est un tableau
La copie de code est la suivante:
fonction isArray (obj) {
return object.prototype.tostring.call (obj) === '[Array d'objets]';
}
Mais si la méthode toString () est réécrite, elle ne fonctionnera pas. Vous pouvez également utiliser la méthode suivante:
La copie de code est la suivante:
Array.isArray (OBJ); // c'est une nouvelle méthode de tableau
Si vous n'utilisez pas de trame dans votre navigateur, vous pouvez également utiliser l'instance, mais si le contexte est trop complexe, vous pouvez également faire une erreur.
La copie de code est la suivante:
var myFrame = document.CreateElement ('iframe');
document.body.appendChild (MyFrame);
var myArray = window.frames [window.frames.length-1] .array;
var arr = new MyArray (a, b, 10); // [a, b, 10]
// Le constructeur de MyArray a été perdu, le résultat de l'instance de sera anormal
// Les constructeurs ne peuvent pas être partagés entre les cadres
Arrance de l'arrêt de la table; // FAUX
18. Obtenez les valeurs maximales et minimales dans le tableau
La copie de code est la suivante:
nombres VAR = [5, 458, 120, -215, 228, 400, 122205, -85411];
var maxinnumbers = math.max.apply (mathématiques, nombres);
var mininnumbers = math.min.apply (mathématiques, nombres);
19. Effacer le tableau
La copie de code est la suivante:
var myArray = [12, 222, 1000];
MyArray.length = 0; // MyArray sera égal à [].
20. Ne supprimez pas et ne supprimez pas les éléments directement du tableau
Si vous utilisez la suppression directement sur les éléments du tableau, il n'est pas réellement supprimé, mais définissez simplement l'élément non défini. L'épissure doit être utilisée pour la suppression des éléments du tableau.
Ne le faites pas:
La copie de code est la suivante:
var items = [12, 548, «a», 2, 5478, «foo», 8852 ,, «Doe», 2154, 119];
items.length; // Retour 11
supprimer les éléments [3]; // retourne vrai
items.length; // Retour 11
/ * Le résultat des éléments est [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] * /
Quant à:
La copie de code est la suivante:
var items = [12, 548, «a», 2, 5478, «foo», 8852 ,, «Doe», 2154, 119];
items.length; // Retour 11
Articles.splice (3,1);
items.length; // Retour 10
/ * Le résultat des éléments est [12, 548, "A", 5478, "Foo", 8852, undefined × 1, "Doe", 2154, 119]
Vous pouvez utiliser Supprimer lors de la suppression des propriétés d'un objet.
21. Utilisez l'attribut de longueur pour tronquer le tableau
Dans l'exemple précédent, utilisez l'attribut de longueur pour effacer le tableau, et vous pouvez également l'utiliser pour tronquer le tableau:
La copie de code est la suivante:
var myArray = [12, 222, 1000, 124, 98, 10];
MyArray.Length = 4; // MyArray sera égal à [12, 222, 1000, 124].
Dans le même temps, si l'attribut de longueur est augmenté, la valeur de longueur du tableau augmentera et non défini sera utilisé comme nouvel élément à remplir. La longueur est une propriété écrivative.
La copie de code est la suivante:
MyArray.Length = 10; // La nouvelle durée du tableau est de 10
MyArray [MyArray.length - 1]; // indéfini
22. Utiliser la logique et ou dans des conditions
La copie de code est la suivante:
var foo = 10;
foo == 10 && doSomething (); // est la même chose que si (foo == 10) doSomething ();
foo == 5 || Dosomething (); // est la même chose que si (foo! = 5) DoSomething ();
Logique ou peut également être utilisé pour définir des valeurs par défaut, telles que les valeurs par défaut des paramètres de fonction.
La copie de code est la suivante:
fonction dosomething (arg1) {
arg1 = arg1 || 10; // Arg1 aura 10 comme valeur par défaut si elle n'est pas déjà définie
}
23. Faire la méthode de la fonction map () Loop les données
La copie de code est la suivante:
var carrés = [1,2,3,4] .map (fonction (val) {
retour val * val;
});
// Les carrés seront égaux à [1, 4, 9, 16]
24. Gardez le nombre spécifié de décimales
La copie de code est la suivante:
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 de calcul des points flottants
La copie de code est la suivante:
0,1 + 0,2 === 0,3 // est faux
9007199254740992 + 1 // est égal à 9007199254740992
9007199254740992 + 2 // est égal à 9007199254740994
Pourquoi? Car 0,1 + 0,2 est égal à 0,300000000000000000000004. Les numéros JavaScript sont construits conformément à la norme IEEE 754 et sont représentés en interne par des décimales de point flottantes 64 bits. Pour plus de détails, veuillez vous référer à la façon dont les chiffres en JavaScript sont encodé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 l'empêcher d'entrer dans les propriétés prototypes de l'objet pendant l'itération.
La copie de code est la suivante:
pour (var name dans objet) {
if (object.hasownproperty (name)) {
// faire quelque chose avec le nom
}
}
27. Opérateur de virgule
La copie de code est la suivante:
var a = 0;
var b = (a ++, 99);
console.log (a); // A sera égal à 1
console.log (b); // b est égal à 99
28. Stockage temporaire des variables utilisées pour le calcul et la requête
Dans le sélecteur jQuery, l'ensemble de l'élément DOM peut être stocké temporairement.
La copie de code est la suivante:
var navright = document.QuerySelector ('# droit');
var Navleft = document.QuerySelector ('# Left');
var navup = document.QuerySelector ('# up');
var navown = document.QuerySelector ('# down');
29. Vérifiez à l'avance les paramètres passés dans isfinite ()
La copie de code est la suivante:
isfinite (0/0); // FAUX
isfinite ("foo"); // FAUX
isfinite ("10"); // vrai
isfinite (10); // vrai
isfinite (indéfini); // FAUX
isfinite (); // FAUX
isfinite (nul); // Vrai, portez une attention particulière à cela
30. Évitez d'utiliser des nombres négatifs comme indexation dans les tableaux
La copie de code est la suivante:
var nombresArray = [1,2,3,4,5];
var de = nombresRay.Indexof ("foo"); // de est égal à -1
NumbsArray.splice (de, 2); // reviendra [5]
Notez que le paramètre d'index passé pour épisser n'est pas un nombre négatif. Lorsqu'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
La copie de code est la suivante:
var personne = {nom: 'saad', âge: 26, département: {id: 15, nom: "r & d"}};
var stringFromperson = json.stringify (personne);
/ * STRINGFROMBERSERS Le résultat est "{" Name ":" Saad "," Age ": 26," Department ": {" id ": 15," Name ":" R&D "}}" * /
var personFromString = JSON.Parse (StringFromperson);
/ * La valeur de la personne dustring est la même que celle de l'objet de la personne * /
32. N'utilisez pas d'évaluation () ou du constructeur de fonction
Les frais généraux des constructeurs d'évaluation () et de fonction sont élevés. Chaque fois qu'ils sont appelés, le moteur JavaScript doit convertir le code source en code exécutable.
La copie de code est la suivante:
var func1 = new function (FunctionCode);
var func2 = eval (FunctionCode);
33. Évitez d'utiliser avec ()
Utilisez avec () pour ajouter des variables à la portée globale. Par conséquent, s'il existe d'autres variables du même nom, il est facile d'être confus et la valeur sera également écrasée.
34. Ne pas utiliser pour les tableaux
éviter:
La copie de code est la suivante:
var sum = 0;
for (var i in arrayNumbers) {
sum + = arrayNumbers [i];
}
Plutôt:
La copie de code est la suivante:
var sum = 0;
pour (var i = 0, len = arraynumbers.length; i <len; i ++) {
sum + = arrayNumbers [i];
}
Un autre avantage est que les deux variables I et Len sont dans la première déclaration de la boucle FOR, et les deux ne seront initialisées qu'une seule fois, ce qui est plus rapide que la méthode d'écriture suivante:
La copie de code est la suivante:
for (var i = 0; i <arraynumbers.length; i ++)
35. Utilisez des fonctions au lieu de chaînes lorsque vous passez pour setInterval () et setTimeout ()
Si vous passez une chaîne à setTimeout () et setInterval (), ils se convertiront de la même manière d'évaluer, ce qui sera certainement plus lent, alors n'utilisez pas:
La copie de code est la suivante:
setInterval ('DoSomethingperiodally ()', 1000);
setTimeout ('DosomethingAfterfivesEcondes ()', 5000);
Au lieu de cela, utilisez:
La copie de code est la suivante:
setInterval (dosomethingperiodally, 1000);
setTimeout (dosomethingafterfivesEcondes, 5000);
36. Utilisez l'interrupteur / boîtier au lieu d'une grande pile de si / else
Lorsque vous jugez qu'il y a plus de deux branches, utilisez Switch / Case pour être plus rapide, plus élégant et plus propice à l'organisation du code. Bien sûr, s'il y a plus de 10 succursales, n'utilisez pas l'interrupteur / cas.
37. Utilisez des intervalles numériques dans Switch / Case
En fait, les conditions de cas dans Switch / Case peuvent également être écrites comme ceci:
La copie de code est la suivante:
fonction getCategory (âge) {
var category = "";
switch (true) {
Case Isnan (âge):
catégorie = "pas un âge";
casser;
cas (âge> = 50):
catégorie = "old";
casser;
cas (âge <= 20):
catégorie = "bébé";
casser;
défaut:
catégorie = "jeune";
casser;
};
catégorie de retour;
}
getCategory (5); // retournera "bébé"
38. Utilisez des objets comme prototypes
De cette façon, vous pouvez créer un nouvel objet basé sur cela en tant que paramètre:
La copie de code est la suivante:
Clone de fonction (objet) {
fonction ONeshotConstructor () {};
OneshotConstructor.prototype = objet;
Renvoie un nouveau oneshotConstructor ();
}
clone (tableau) .pototype; // []
39. Fonction de conversion de champ HTML
La copie de code est la suivante:
fonction EscapeHtml (texte) {
var remplacements = {"<": "<", ">": ">", "&": "&", "/": "" "};
return text.replace (/ [<> & "] / g, fonction (caractère) {
Remplacements de retour [caractère];
});
}
40. N'utilisez pas d'essai-capture-fin à l'intérieur de la boucle
La partie Catch dans Try-Gatch-Finally affectera des exceptions à une variable lors de l'exécution, et cette variable sera construite en une nouvelle variable dans la portée d'exécution.
Ne le faites pas:
La copie de code est la suivante:
var objet = ['foo', 'bar'], i;
for (i = 0, len = object.length; i <len; i ++) {
essayer {
// faire quelque chose qui lance une exception
}
catch (e) {
// gérer l'exception
}
}
Plutôt:
La copie de code est la suivante:
var objet = ['foo', 'bar'], i;
essayer {
for (i = 0, len = object.length; i <len; i ++) {
// faire quelque chose qui lance une exception
}
}
catch (e) {
// gérer l'exception
}
41. Faites attention à la définition du délai d'attente lorsque vous utilisez XMLHTTPREQUESTS
Lorsque XMLHTTPREQUESS est exécuté, lorsqu'il n'y a pas de réponse pendant longtemps (comme les problèmes de réseau, etc.), la connexion doit être interrompue. Ce travail peut être effectué par setTimeout ():
La copie de code est la suivante:
var xhr = new xmlHttpRequest ();
xhr.onreadystateChange = function () {
if (this.readystate == 4) {
ClearTimeout (temps mort);
// faire quelque chose avec des données de réponse
}
}
var timeout = setTimeout (function () {
xhr.abort (); // appelle un rappel d'erreur
}, 60 * 1000 / * Timeout après une minute * /);
xhr.open ('get', url, true);
xhr.send ();
Dans le même temps, il convient de noter que plusieurs demandes XMLHTTPRequests ne doivent pas être initiées en même temps.
42. Gérer le délai de WebSocket
D'une manière générale, une fois la connexion WebSocket créée, s'il n'y a pas d'activité dans les 30 secondes, le serveur sera chronométré de la connexion, et le pare-feu peut également chronométrer la connexion qui n'est pas active dans un cycle unitaire.
Pour éviter que cela ne se produise, un message vide peut être envoyé au serveur à un certain moment. Cette exigence peut être obtenue par les deux fonctions suivantes, l'une pour garder la connexion active et l'autre spécifiquement pour mettre fin à cet état.
La copie de code est la suivante:
var timerid = 0;
fonction keepalive () {
Var Timeout = 15000;
if (Websocket.readystate == Websocket.open) {
WebSocket.Send ('');
}
timerid = setTimeout (keepalive, timeout);
}
fonction annuleNheenveLive () {
if (timerid) {
canceltimeout (timerid);
}
}
La fonction keepalive () peut être placée à la fin de la méthode onopen () de la connexion WebSocket, et CancelKeepalive () peut être placé à la fin de la méthode onClose ().
43. Faites attention à l'heure et l'opérateur d'origine est plus rapide que l'appel de fonction. Utilisez Vanillajs
Par exemple, généralement pas comme ceci:
La copie de code est la suivante:
var min = math.min (a, b);
A.push (v);
Cela peut être utilisé à la place:
La copie de code est la suivante:
var min = a <b? R: B;
A [a.Length] = v;
44. Faites attention à la structure du code pendant le développement, vérifiez et compressez le code JavaScript avant d'aller en ligne
Vous pouvez utiliser des outils tels que JSLINT ou JSMIN pour vérifier et compresser le code.