Comme vous le savez, JavaScript est le langage de programmation numéro un au monde. C'est le langage du Web, le langage des applications mobiles hybrides (comme PhoneGap ou Appcelerator) et le langage côté serveur (comme NodeJS). ou Wakanda), et a de nombreuses autres implémentations. En même temps, c'est aussi un langage d'éveil pour de nombreux novices, car il peut non seulement afficher un simple message d'alerte sur le navigateur, mais peut également être utilisé pour contrôler un robot (à l'aide de nodebot, ou nodruino). Les développeurs qui maîtrisent JavaScript et peuvent écrire du code organisé, standardisé et efficace en termes de performances sont devenus la cible du marché des talents.
Il est à noter que les extraits de code de cet article ont été testés sur le dernier Google Chrome (numéro de version 30), qui utilise le moteur JavaScript V8 (V8 3.20.17.15).
Utiliser des points-virgules à la fin des instructions est une bonne pratique. Vous ne serez pas averti si vous oubliez de l'écrire, car dans la plupart des cas, l'interpréteur JavaScript ajoutera le point-virgule pour vous.
C'est ce qu'on appelle souvent une fonction anonyme auto-invoquée ou une expression de fonction d'appel immédiat (IIFE-Expression de fonction immédiatement invoquée). Il s'agit d'une fonction qui s'exécute automatiquement immédiatement après la création, généralement comme suit :
})();
(function(a,b){
var result = a b;
résultat de retour;
})(10,20)
8- Obtenez un élément aléatoire du tableau var items = [12, 548, 'a', 2, 5478, 'foo', 8852, , 'Doe', 2145, 119];
var randomItem = items[ Math.floor( Math.random() * items.length)];[code]
9 – Obtenez un nombre aléatoire dans une plage spécifique
Cet extrait de code est très utile lorsque vous souhaitez pour générer des données de test utiles, comme une valeur de salaire aléatoire entre les valeurs minimales et maximales.
[code]var x = Math.floor(Math.random() * (max - min 1)) min;
10 – généré entre 0 et la valeur maximale définie Un tableau de nombres
var nombresArray = [], max = 100 ;
for( var i=1;numbersArray.push(i ) < max;); // nombres = [0,1,2,3 ... 100]
11 – Générer une chaîne alphanumérique aléatoire function generateRandomAlphaNum(len) {
var rdmstring = "";
for( ; rdmString.length < len; rdmString = Math.random().toString(36).substr(2));
return rdmString.substr(0, len);
}
12 – brouiller un tableau de nombresnuméros var = [5, 458, 120, -215, 228, 400, 122205, -85411];
numéros = number.sort( function(){ return Math.random() - 0.5});
/* les numéros du tableau seront égaux par exemple à [120, 5, 228, -215, 400, 458, -85411 , 122205] */
13 – Fonction trim de String
Il existe une fonction trim classique en Java, C#, PHP et bien d'autres langages, qui est utilisée pour supprimer les espaces dans les chaînes . Une telle fonction n'existe pas en JavaScript, nous devons donc ajouter cette fonction à l'objet String.
String.prototype.trim = function() {return this .replace(/^s |s $/g, "");};//Supprimer les espaces de début et de fin de la chaîne, à l'exclusion des espaces internes de la chaîne
14 – Ajouter un tableau Aller dans un autre tableau
var array1 = [12, " foo" , {name: "Joe"} , -2458];
var array2 = ["Doe" , 555 , 100];
Array.prototype.push. apply(array1, array2);
/* array1 sera égal à [12, "foo", {name "Joe"}, -2458, "Doe", 555, 100] */
//In en fait, concat peut directement implémenter une connexion à deux tableaux, mais sa valeur de retour est un nouveau tableau. Voici le changement direct vers array1
15 – Convertir l'objet arguments en tableau
var argArray = Array.prototype.slice.call(arguments);
l'objet arguments est un objet de type tableau, mais pas un vrai tableau
16 – Vérifiez si l'argument est un nombre (nombre)fonction isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n);
}
17 – Vérifiez si le paramètre est un tableaufunction isArray(obj){
return Object.prototype. toString.call(obj) === '[object Array ]' ;
}
Remarque : si la méthode toString() est remplacée, vous ne pourrez pas obtenir les résultats souhaités en utilisant cette technique. Ou vous pouvez utiliser :
Array.isArray (obj); // Il s'agit d'une nouvelle méthode de tableau
Si vous n'utilisez pas plusieurs frames, vous pouvez également utiliser la méthode instanceof. Mais si vous disposez de plusieurs contextes, vous obtiendrez de mauvais résultats.
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]
// instanceof ne fonctionnera pas correctement, myArray perd son constructeur
// le constructeur n'est pas partagé entre les frames
arr instanceof Array;
18 – Obtenez la valeur maximale ou minimale dans un tableau de nombres var number = [5, 458, 120, -215, 228, 400, 122205, -85411];
var maxInNumbers = Math.max.apply(Math, nombres);
var minInNumbers = Math.min.apply(Math, nombres);
//Note du traducteur : la technique de transmission de paramètres à l'aide de la méthode Function.prototype.apply est utilisée ici
19 – Effacer un tableau var myArray = [12, 222, 1000];
myArray.length = 0; // myArray sera égal à [].
20 – Ne pas utiliser delete pour supprimer des éléments d'un tableau .
Utilisez splice au lieu de delete pour supprimer un élément d'un tableau. L'utilisation de delete remplace uniquement l'élément d'origine par undefined, mais ne le supprime pas réellement du tableau.
N'utilisez pas cette méthode :
var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];
items.length; // renvoie 11
supprime les éléments[3] ; // renvoie true
items.length; // renvoie 11
/* les éléments seront égaux à [12, 548, "a", non défini × 1, 5478, "foo", 8852, non défini × 1 , "Doe", 2154, 119] */
et utilisez :
var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];
items.length // return; 11
items.splice( 3,1) ;
items.length; // renvoie 10
/* les éléments seront égaux à [12, 548, "a", 5478, "foo", 8852 , undefined × 1, "Doe" , 2154, 119] */
la méthode delete doit être utilisée pour supprimer un attribut d'un objet.
21 – Utiliser la longueur pour tronquer un tableau
De la même manière que pour effacer le tableau ci-dessus, nous utilisons la propriété length pour tronquer un tableau.
var myArray = [12, 222, 1000, 124, 98, 10 ];
myArray.length = 4; // myArray sera égal à [12, 222, 1000, 124].
De plus, si vous définissez la longueur d'un tableau sur une valeur plus grande une par rapport à sa valeur actuelle, la longueur du tableau sera modifiée et de nouveaux éléments non définis seront ajoutés. La longueur d'un tableau n'est pas une propriété en lecture seule.
myArray.length = 10 ; // la nouvelle longueur du tableau est 10
myArray[myArray.length - 1]; // undefined
22 – Utilisez ET/OU logique pour porter des jugements conditionnels
var foo = 10;
foo == 10 && doSomething(); // Équivalent à if (foo == 10) doSomething();
foo == 5 doSomething( ) ; // Équivalent à if (foo != 5) doSomething();
L'ET logique peut également être utilisé pour définir les valeurs par défaut des paramètres de fonction
function doSomething(arg1){
Arg1 = arg1 || 10 ; défini, Arg1 sera défini sur 10 par défaut
}
23 – Utilisez la méthode map() pour parcourir les éléments d'un tableau
var squares = [1,2,3,4].map(function (val) {
return val * val;
});
// les carrés seront égaux à [1, 4, 9, 16]
24 – Arrondir un nombre à N décimal lieux var num =2.443242342;
num = num.toFixed(4); / / num sera égal à 2,4432
25 – Problème en virgule flottante0.1 0.2 === 0.3 // est faux
9007199254740992 1 // est égal à 9007199254740992
9007199254740992 2 // est égal à 9007199254740994
Pourquoi cela se produit-il ? 0,1 0,2 est égal à 0,30000000000000004. Vous devez savoir que tous les nombres JavaScript sont représentés en interne sous forme de nombres à virgule flottante en binaire 64 bits, conformément à la norme IEEE 754. Pour plus d’introduction, vous pouvez lire cet article de blog. Vous pouvez résoudre ce problème en utilisant les méthodes toFixed() et toPrecision().
26 – Lorsque vous utilisez for-in pour parcourir les propriétés internes d'un objet, faites attention à vérifier les propriétés
L'extrait de code suivant peut éviter d'accéder aux propriétés du prototype lors de la traversée des propriétés d'un objet
for (var name in object) {
if (object.hasOwnProperty(name)) {
// faire quelque chose avec name
}
}
27 – Opérateur virgule
var a = 0;
var b = ( a , 99 );
console.log(a); // a sera égal à 1
console.log(b); b est égal à 99
28 – Cacher les variables qui nécessitent un calcul ou une interrogation
Pour les sélecteurs jQuery, il est préférable de mettre en cache ces éléments DOM.
var navright = document.querySelector('#right') ;
var navleft = document.querySelector('#left');
var navup = document.querySelector('#up');
var navdown = document.querySelector('#down');
29 – Valider les paramètres avant d'appeler isFinite() isFinite("10"); // false
isFinite("foo"); // false
isFinite("10"); ); // vrai
isFinite(undifined); // false
isFinite(); // false
isFinite(null);
30 – éviter dans les tableaux Indices négatifs
var numérosArray = [1, 2,3,4,5];
var from =numbersArray.indexOf("foo") ; // from est égal à -1
numbersArray.splice(from,2); retourner [5]
Assurez-vous que l'argument lors de l'appel à indexOf n'est pas négatif.
31 – Sérialisation et désérialisation basées sur JSON
var personne = {nom :'Saad', âge : 26, département : {ID : 15, nom : "R&D"} };
var stringFromPerson = JSON.stringify(person );
/* stringFromPerson est égal à "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */
var personFromString = JSON.parse(stringFromPerson);
/* personFromString est égal à l'objet personne */
32 – Évitez d'utiliser eval() et le constructeur de fonction
Utiliser eval et Function les constructeurs sont des opérations très coûteuses car à chaque fois ils appellent le moteur de script pour convertir le code source en code exécutable.
var func1 = new Function(functionCode);
var func2 = eval(functionCode);
33 – Évitez d'utiliser with()
L'utilisation de with() insérera une variable globale. Par conséquent, les variables portant le même nom verront leurs valeurs écrasées et causeront des problèmes inutiles.
34 – Évitez d'utiliser for-in pour parcourir un tableau
Évitez d'utiliser ceci :
var sum = 0;
for (var i in arrayNumbers) {
sum = arrayNumbers[i];
}
Une meilleure façon est :
var sum = 0 ;
for (var i = 0, len = arrayNumbers.length; i < len; i ) {
sum = arrayNumbers[i];
}
L'avantage supplémentaire est que i et len sont tous les deux La valeur de la variable n'est exécutée qu'une seule fois, ce qui est plus efficace que la méthode suivante :
for (var i = 0; i < arrayNumbers.length; i )
Pourquoi ? Parce que arrayNumbers.length sera calculé à chaque boucle.
35 – Transmettez des fonctions au lieu de chaînes lors de l'appel de setTimeout() et setInterval(). Si vous transmettez une chaîne à setTimeout() ou setInterval(), la chaîne sera analysée comme si vous utilisiez eval, ce qui prend beaucoup de temps.
Ne pas utiliser :
setInterval ('doSomethingPeriodically()', 1000);
setTimeOut('doSomethingAfterFiveSeconds()', 5000)
Et utilisez :
setInterval(doSomethingPeriodically, 1000);
setTimeOut(doSomethingAfterFiveSeconds, 5000);
36 – Utilisez l'instruction switch/case, et au lieu d'une longue liste de if/else, lorsque vous jugez plus de 2 situations, l'utilisation de switch/case est plus efficace et plus élégante (plus facile à organiser le code). Mais n’utilisez pas switch/case lorsqu’il y a plus de 10 situations à juger.
37 – Utilisez switch/case pour juger de la plage numérique
Dans la situation suivante, il est raisonnable d'utiliser switch/case pour juger de la plage numérique :
function getCategory(age) {
varcategory = "";
switch (true) {
case isNaN(age):
category = "pas un âge";< category = "Bébé" ;
pause;
défaut :
catégorie = "Jeune";
pause;
};
retour catégorie;
}
getCategory(5) ; // renverra "Baby"
//Généralement, pour juger la plage numérique, il est plus approprié d'utiliser if/else. switch/case est plus adapté pour juger certaines valeurs
38 – Spécifier l'objet prototype pour l'objet créé
Il est possible d'écrire une fonction pour créer un objet avec des paramètres spécifiés comme prototype :
Copier le codeclone(Array).prototype; // []
39 – une fonction d'échappement HTML
Copier le code au moment de l'exécution, à chaque fois la clause catch est exécutée, l'objet d'exception capturé sera affecté à une variable, et dans la structure try-catch-finally, à chaque fois Cette variable sera créée
.
Évitez d'écrire comme ceci :
Copier le code
Le code est le suivant :var object = [ 'foo' , 'bar'], i;
for (i = 0, len = object.length; i try {
et utiliser :
Copier le code
Le code est le suivant :
var object = ['foo', 'bar'], i;
essayez {
for (i = 0, len = object .length; i
// fait quelque chose qui lève une exception }>catch (e) { // handle exception}
41 – Définir le délai d'attente pour XMLHttpRequests.
Après qu'une requête XHR ait pris beaucoup de temps (par exemple, en raison de problèmes de réseau), vous devrez peut-être abandonner la requête, vous pourrez alors utiliser setTimeout() avec l'appel XHR.
Copier le code
Le code est le suivant :
var xhr = new XMLHttpRequest ();
xhr .onreadystatechange = function () {
if (this.readyState == 4) {
xhr.open('GET' , URL, vrai);
xhr.send();
De plus, vous devez généralement éviter complètement les requêtes Ajax synchrones.
42 - Gestion des délais d'attente WebSocket
Normalement, après la création d'une connexion WebSocket, le serveur expirera votre connexion après 30 secondes si vous n'avez aucune activité. Les pare-feu se déconnectent également après une période d'inactivité.
Pour éviter les problèmes de délai d'attente, vous devrez peut-être envoyer par intermittence des messages vides au serveur. Pour ce faire, vous pouvez ajouter les deux fonctions suivantes à votre code : une pour maintenir la connexion et une pour annuler le maintien de la connexion. Avec cette technique, vous pouvez contrôler le problème de délai d'attente.
Utiliser un timerID :
var timerID = 0;
function keepAlive() {
var timeout = 15000;
if (webSocket.readyState == webSocket.OPEN) {
webSocket.send('');
}
timerId = setTimeout( keepAlive, timeout);
>
function CancelKeepAlive() {
if (timerId) {
CancelTimeout(timerId);
}
}
keepAlive() La méthode doit être ajoutée à la fin de la méthode onOpen() de la connexion webSOcket, et CancelKeepAlive() est ajoutée à la fin de la méthode onClose().
43 – Gardez à l’esprit que les opérateurs primitifs sont toujours plus efficaces que les appels de fonction. Utilisez vanillaJS. Par exemple, n'utilisez pas :
var min = Math.min(a,b);
A.push(v);
et utilisez :
var min = a < b a b;
A[A.length] = v;
44 – lors de l'encodage N'oubliez pas d'utiliser des outils de rangement de code . Utilisez JSLint et les outils de compression de code (minification) (tels que JSMin) avant de vous connecter. "Outil permettant de gagner du temps : outil d'embellissement et de formatage du code"
45 – JavaScript est incroyable.
Résumé
Je sais qu'il existe de nombreux autres conseils, astuces et bonnes pratiques, donc si vous avez autre chose que vous aimeriez ajouter ou si vous avez des commentaires ou des corrections sur ceux que j'ai partagés, n'hésitez pas à le dire dans les commentaires. .
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
