Maison > interface Web > js tutoriel > 20 compétences JavaScript pratiques à partager_javascript skills

20 compétences JavaScript pratiques à partager_javascript skills

WBOY
Libérer: 2016-05-16 16:29:55
original
1390 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.

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


13. Ajouter un tableau

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

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...


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
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal