20 compétences JavaScript pratiques à partager_javascript skills-js tutoriel-php.cn

20 compétences JavaScript pratiques à partager_javascript skills

WBOY

Libérer： 2016-05-16 16:29:55

original

1346 Les gens l'ont consulté

Comme nous le savons tous, JavaScript est un langage de programmation très populaire. Les développeurs peuvent l'utiliser non seulement pour développer des programmes Web éblouissants, mais également pour développer certaines applications mobiles (telles que PhoneGap ou Appcelerator). , comme NodeJS, Wakanda et d'autres implémentations. De plus, de nombreux développeurs choisissent JavaScript comme langage d'entrée de gamme et l'utilisent pour créer de petites choses telles que des fenêtres contextuelles.

Dans cet article, l'auteur partagera avec vous des conseils de développement JavaScript, des bonnes pratiques et d'autres contenus très pratiques. Que vous soyez un développeur front-end ou un développeur côté serveur, vous devriez jeter un œil à ces conseils. ils vous seront certainement utiles.

Les extraits de code fournis dans cet article ont été testés avec la dernière version de Chrome 30, qui utilise le moteur JavaScript V8 (V8 3.20.17.15).

1. Lorsque vous attribuez une valeur à une variable pour la première fois, n'oubliez pas le mot-clé var

Attribuez une valeur à une variable non déclarée et la variable sera automatiquement créée en tant que variable globale. Dans le développement JS, vous devez éviter d'utiliser des variables globales.

2. Utilisez === pour remplacer ==

Et n'utilisez jamais = ou ! =.

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. Utilisez le point-virgule comme terminateur de ligne

C'est une bonne pratique d'utiliser des points-virgules là où se terminent les lignes. Même si le développeur oublie d'ajouter un point-virgule, le compilateur n'en aura aucune idée car dans la plupart des cas, l'analyseur JavaScript l'ajoutera automatiquement.

4. Créer un constructeur

Copier le code Le code est le suivant :

function Personne(prénom, nom){ 

This.firstName = firstName; 

This.lastName = nom de famille 

} 

var Saad = new Person("Saad", "Mousliki");

5. Typeof, instanceof et constructeur doivent être utilisés avec précaution

Copier le code Le code est le suivant :

var arr = ["a", "b", "c"];
typeof arr; // renvoie "objet" 

arr instanceof Array // vrai 

arr.constructor(); //[] 

6. Créer une fonction d'auto-appel

On parle souvent de fonction anonyme auto-appelante ou d'expression de fonction immédiatement appelée (LLFE). Lorsque la fonction est créée, elle sera exécutée automatiquement, comme suit :

Copier le code Le code est le suivant :

(fonction(){ 

// du code privé qui sera exécuté automatiquement 

})(); 

(fonction(a,b){ 

var résultat = un b 

Retourner le résultat ; 

})(10,20)

7. Créez un élément aléatoire pour le 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)]

8. Obtenez un nombre aléatoire dans une plage spécifique

Le code suivant est très polyvalent lorsque vous devez générer de fausses données à des fins de test, comme obtenir une valeur aléatoire avant le salaire minimum et le salaire maximum.

Copier le code Le code est le suivant :

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

9. Générez un ensemble de nombres aléatoires entre le nombre 0 et le nombre maximum

Copier le code Le code est le suivant :

var nombresArray = [] , max = 100 

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

10. Générer un ensemble aléatoire de caractères alphanumériques

Copier le code Le code est le suivant :

function generateRandomAlphaNum(len) { 

var rdmstring = ""; 

for( ; rdmString.length < len; rdmString = Math.random().toString(36).substr(2));
Renvoie rdmString.substr(0, len); 

}

11. Brouillez le réseau numérique

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} 
);
/* les numéros du tableau seront égaux par exemple à [120, 5, 228, -215, 400, 458, -85411, 122205] */ 

12. Fonction de synchronisation de chaîne

La fonction trim peut supprimer les caractères d'espacement d'une chaîne et peut être utilisée en Java, C#, PHP et d'autres langages.

Copier le code Le code est le suivant :

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

13. Ajouter un tableau

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); 

/* array1 sera égal à [12, "foo", {name "Joe"}, -2458, "Doe", 555, 100] */ 

14. Convertir l'objet paramètre en tableau

Copier le code

Le code est le suivant : var argArray = Array.prototype.slice.call(arguments);

15. Vérifier si un paramètre donné est un nombre

Copier le code

Le code est le suivant : la fonction estNombre(n){ Retour !isNaN(parseFloat(n)) && isFinite(n); }

16. Vérifier qu'un paramètre donné est un tableau

Copier le code

Le code est le suivant : fonction isArray(obj){ Return Object.prototype.toString.call(obj) === '[object Array]' }

Notez que si la méthode toString() est remplacée, vous n'obtiendrez pas les résultats attendus. 

Ou vous pouvez écrire comme ceci : 

Copier le code

Le code est le suivant : Array.isArray(obj); // c'est une nouvelle méthode Array

De même, si vous utilisez plusieurs frames, vous pouvez utiliser des instancesof. S'il y a trop de contenu, le résultat sera également erroné. 

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] 

// instanceof ne fonctionnera pas correctement, myArray perd son constructeur 

// le constructeur n'est pas partagé entre les frames 

arr instanceof Array; // faux

17. Obtenez les valeurs maximales et minimales du tableau numérique

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 
)

18. Effacer le tableau

Copier le code Le code est le suivant :

var monTableau = [12, 222, 1000]; 

myArray.length = 0; // myArray sera égal à [ 

19. N'utilisez pas delete pour supprimer des éléments d'un tableau

Les développeurs peuvent utiliser split au lieu de delete pour supprimer des éléments du tableau. Au lieu de supprimer des éléments non définis dans un tableau, utilisez plutôt delete.

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 

/* les éléments seront égaux à [12, 548, "a", non défini × 1, 5478, "foo", 8852, non défini × 1, "Doe", 2154, 119] */ 

Vous pouvez également...

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 

/* les éléments seront égaux à [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */ 

La méthode delete doit supprimer une propriété d'objet.

20. Utilisez l'attribut length pour raccourcir le tableau

Comme mentionné ci-dessus pour effacer le tableau, les développeurs peuvent également utiliser l'attribut length pour raccourcir 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].

Si la valeur de longueur du tableau que vous définissez est trop élevée, la longueur du tableau changera et certaines valeurs non définies seront remplies dans le tableau. La propriété length du tableau n'est pas en lecture seule. 

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