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 !=.
[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
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
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 :
(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
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.
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
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
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
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 :
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
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
var argArray = Array.prototype.slice.call(arguments);
16. Vérifiez s'il s'agit d'un numéro
la fonction estNuméro(n){
Retour !isNaN(parseFloat(n)) && isFinite(n);
>
17. Vérifiez s'il s'agit d'un tableau
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 :
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.
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
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
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 :
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 :
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
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é
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
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.
for (nom de la variable dans l'objet) {
Si (object.hasOwnProperty(name)) {
// fait quelque chose avec le nom
}
>
27. Opérateur virgule
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.
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()
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
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
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.
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 :
var somme = 0;
pour (var i dans arrayNumbers) {
somme = tableauNombres[i];
>
A la place :
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 :
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 :
setInterval('doSomethingPeriodically()', 1000);
setTimeout('doSomethingAfterFiveSeconds()', 5000);
Utilisez plutôt :
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 :
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 :
fonction clone (objet) {
Fonction OneShotConstructor(){};
OneShotConstructor.prototype = objet
Renvoie le nouveau OneShotConstructor();
}
clone(Array).prototype; // []
39. Fonction de conversion de champ HTML
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 :
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 :
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
Lorsque XMLHttpRequests est exécuté, lorsqu'il n'y a pas de réponse pendant une longue période (comme des problèmes de réseau, etc.), la connexion doit être terminée. Ce travail peut être terminé via setTimeout() :
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
