Partager 12 conseils JavaScript très pratiques

Dans cet article, nous partagerons avec vous 12 conseils sur JavaScript. Ces conseils peuvent vous aider à résoudre certains problèmes dans votre travail réel.

Utilisez le !! opérateur pour convertir la valeur booléenne

Parfois, nous devons vérifier si une variable existe ou vérifier si la valeur a une valeur valide, et si elle existe, elle renvoie vrai. Afin de faire une telle vérification, nous pouvons utiliser le !! L'opérateur pour l'implémenter est très pratique et simple. Pour les variables, vous pouvez utiliser !! variable pour la détection. Tant que la valeur de la variable est: 0, null, "", indéfini ou nan, il renverra faux, sinon il renverra vrai. Par exemple, l'exemple suivant:

 Compte de fonction (Cash) {this.Cash = Cash; this.hasmoney = !! Cash; } var compte = nouveau compte (100,50); Console.log (compte.Cash); // 100.50 Console.log (account.hasmoney); // true var videAccount = nouveau compte (0); console.log (videAccount.Cash); // 0 console.log (videAccount.hasmoney); // FAUX

Dans cet exemple, tant que la valeur du compte.Cash est supérieure à 0, la valeur renvoyée par compte.hasmoney est vraie.

Utiliser + pour convertir les chaînes en nombres

Cette astuce est très utile. Il est très simple et peut être converti en nombres par des données de chaîne qui se croisent. Cependant, il ne convient que pour les données de chaîne, sinon NAN sera renvoyé, comme l'exemple suivant:

 fonction tonumber (strNumber) {return + strnumber; } console.log (tonUmber ("1234")); // 1234 console.log (tonUmber ("ACB")); // nan

Cela fonctionne également pour la date, dans ce cas, il renverra un numéro d'horodatage:

Copiez le code comme suit: Console.log (+ nouvelle date ()) // 1461288164385 et symbole conditionnel

Si vous avez un code comme ceci:

 if (congégé) {login (); }

Vous pouvez également abréger les variables et les utiliser et les concaténer ensemble. Par exemple, l'exemple ci-dessus peut être abrégé comme suit:

La copie de code est la suivante: CONECTED && login ();

Si certaines propriétés ou fonctions existent dans un objet, vous pouvez également faire la détection, comme indiqué dans le code suivant:

La copie de code est la suivante: user && user.login ();

Utiliser || opérateur

Il existe une fonction de paramètre par défaut dans ES6. Pour simuler cette fonctionnalité dans des navigateurs plus anciens, le || L'opérateur peut être utilisé et la valeur par défaut sera transmise en deuxième paramètre. Si la valeur renvoyée par le premier paramètre est fausse, la deuxième valeur sera considérée comme une valeur par défaut. Comme dans l'exemple suivant:

 fonction user (nom, âge) {this.name = name || "Oliver Queen"; this.age = Âge || 27 } var user1 = new User (); console.log (user1.name); // Oliver Queen Console.log (user1.age); // 27 var user2 = nouvel utilisateur ("Barry Allen", 25); console.log (user2.name); // Barry Allen Console.log (user2.age); // 25

Cache Array.Length en boucle

Cette astuce est très simple, et cela aura un très grand impact sur les performances lorsqu'il s'agit d'une grande boucle de tableau. Fondamentalement, tout le monde écrira un éventail d'itérations synchrones comme ceci:

 for (var i = 0; i <array.length; i ++) {console.log (array [i]); }

S'il s'agit d'un petit tableau, c'est génial, si vous avez affaire à un grand tableau, ce code recalculera la taille du tableau à chaque itération, ce qui entraînera un certain retard. Pour éviter ce phénomène, la longueur peut être utilisée comme cache:

 var longueur = array.length; for (var i = 0; i <length; i ++) {console.log (array [i]); }

Vous pouvez également l'écrire comme ceci:

 pour (var i = 0, longueur = array.length; i <longueur; i ++) {console.log (array [i]); }

Détecter les propriétés dans les objets

Cette astuce est utile lorsque vous devez détecter si certaines propriétés existent et éviter d'exécuter des fonctions ou des propriétés non définies. Si vous prévoyez de personnaliser un code de navigateur inter-compatible, vous pouvez également utiliser cette astuce. Par exemple, vous souhaitez utiliser Document.QuerySelector () pour sélectionner un ID et le rendre compatible avec les navigateurs IE6, mais cette fonction n'existe pas dans les navigateurs IE6, il est donc très utile d'utiliser cet opérateur pour détecter si cette fonction existe, comme l'exemple suivant:

 if ('QueySelector' dans Document) {document.QuerySelector ("# id"); } else {document.getElementById ("id"); }

Dans cet exemple, si la fonction QueySelector n'existe pas dans le document, le document est appelé.

Obtenez le dernier élément du tableau

Array.prototype.slice (Begin, End) est utilisé pour obtenir les éléments du tableau entre Begin and End. Si vous ne définissez pas le paramètre final, la valeur de longueur par défaut du tableau sera considérée comme la valeur finale. Mais certains étudiants peuvent ne pas savoir que cette fonction peut également accepter les valeurs négatives comme paramètres. Si vous définissez une valeur négative comme valeur de début, vous pouvez obtenir le dernier élément du tableau. comme:

 Var Array = [1,2,3,4,5,6]; console.log (array.slice (-1)); // [6] console.log (array.slice (-2)); // [5,6] console.log (array.slice (-3)); // [4,5,6]

Troncature du tableau

Cette astuce est principalement utilisée pour verrouiller la taille du tableau et est très utile si elle est utilisée pour supprimer certains éléments dans le tableau. Par exemple, votre tableau a 10 éléments, mais vous ne voulez avoir que les cinq premiers éléments, alors vous pouvez tronquer le tableau par tableau.length = 5. Comme dans l'exemple suivant:

 Var Array = [1,2,3,4,5,6]; console.log (array.length); // 6 array.length = 3; console.log (array.length); // 3 console.log (array); // [1,2,3]

Remplacer tout

La fonction string.replace () vous permet d'utiliser des chaînes ou des expressions régulières pour remplacer les chaînes. Cette fonction elle-même remplace uniquement la première chaîne. Cependant, vous pouvez utiliser / g dans des expressions régulières pour simuler la fonction RempaceALL ():

 var string = "John John"; console.log (string.replace (/ hn /, "ana")); // "Joana John" Console.log (String.replace (/ hn / g, "ana")); // "Joana Joana"

Fusion des tableaux

Si vous souhaitez fusionner deux tableaux, vous utiliserez généralement la fonction array.concat ():

 var array1 = [1,2,3]; var array2 = [4,5,6]; console.log (array1.concat (array2)); // [1,2,3,4,5,6];

Cette fonction n'est alors pas adaptée pour fusionner deux grandes tableaux, car il consommera beaucoup de mémoire pour stocker des tableaux nouvellement créés. Dans ce cas, vous pouvez utiliser array.pus (). Appliquer (Arr1, Arr2) pour créer un nouveau tableau à la place. Cette méthode n'est pas utilisée pour créer un nouveau tableau, il combine simplement les premier et deuxième nombres ensemble tout en réduisant l'utilisation de la mémoire:

 var array1 = [1,2,3]; var array2 = [4,5,6]; console.log (array1.push.apply (array1, array2)); // [1,2,3,4,5,6];

Convertir Nodelist en un tableau

Si vous exécutez la fonction document.QuerySelectorAll ("P"), il peut renvoyer un tableau d'éléments DOM, c'est-à-dire l'objet Nodelist. Mais cet objet n'a pas les fonctions de fonction des tableaux, tels que tri (), réduction (), map (), filter (), etc. Pour que ces fonctions de fonctions de tableau native soient utilisées sur eux, la liste des nœuds doit être convertie en un tableau. Vous pouvez utiliser [] .slice.Call (Elements) pour implémenter:

 var elements = document.QuerySelectorAll ("p"); // nodelist var arrayelements = [] .slice.call (éléments); // Maintenant, le nodelist est un array var arrayelements = array.from (éléments); // c'est une autre façon de convertir le nodeliste en array

Rétrécissement des éléments du tableau

Pour le remaniement des éléments du tableau, il n'est pas nécessaire d'utiliser des bibliothèques externes, telles que Lodash, faites-le: faites-le:

 var list = [1,2,3]; console.log (list.sort (function () {math.random () - 0,5})); // [2,1,3]

Résumer

Vous avez maintenant appris quelques conseils JavaScript utiles. J'espère que ces conseils pourront vous aider à résoudre des problèmes au travail, ou cet article vous sera utile. Si vous avez d'excellents conseils JavaScript, veuillez les partager avec nous dans les commentaires.