Lorsque j'ai commencé à apprendre JavaScript, la première chose que j'ai faite a été de dresser une liste d'astuces qui m'ont aidé à gagner du temps. Je les ai espionnés sur d'autres programmeurs, sur différents sites et dans des manuels.
Dans cet article, je vais vous montrer 12 excellentes façons d'améliorer et d'accélérer votre code JavaScript. Dans la plupart des cas, ils sont universels.
Nous vous rappelons: pour tous les lecteurs de «Habr» - une remise de 10 000 roubles lors de l'inscription à un cours Skillbox en utilisant le code promo «Habr».
Skillbox recommande: Cours pratique "Mobile Developer PRO" .
Filtrage de valeur unique
TABLEAUX
Le type de l'objet Set a été introduit dans ES6, avec ..., l'opérateur de propagation, nous pouvons l'utiliser pour créer un nouveau tableau qui ne contient que des valeurs uniques.
const array = [1, 1, 2, 3, 5, 5, 1] const uniqueArray = [...new Set(array)]; console.log(uniqueArray);
Dans une situation normale, beaucoup plus de code est nécessaire pour effectuer la même opération.
Cette astuce fonctionne pour les tableaux contenant des types primitifs: non définis, null, booléens, chaîne et nombre. Si vous travaillez avec un tableau contenant des objets, des fonctions ou des tableaux supplémentaires, vous aurez besoin d'une approche différente.
La longueur du cache en cycles
CYCLES
Lorsque vous apprenez pour des boucles, vous suivez la procédure standard:
for (let i = 0; i < array.length; i++){ console.log(i); }
Cependant, avec cette syntaxe, la boucle for vérifie à nouveau la longueur du tableau à chaque itération.
Cela peut parfois être utile, mais dans la plupart des cas, il est plus efficace de mettre en cache la longueur du tableau, ce qui nécessitera un seul accès. Nous pouvons le faire en définissant une longueur variable, où définir la variable i, par exemple, comme ceci:
for (let i = 0, length = array.length; i < length; i++){ console.log(i); }
En principe, c'est presque le même que ci-dessus, mais avec une augmentation de la taille du cycle, nous obtiendrons des gains de temps importants.
Indice de court-circuit (indice McCarthy)
OPÉRATEURS CONDITIONNELS
L'opérateur ternaire est un moyen rapide et efficace d'écrire des instructions conditionnelles simples (et parfois pas très simples):
x> 100? «Plus de 100»: «moins de 100»;
x> 100? (x> 200? "plus de 200": "entre 100-200"): "moins de 100";
Mais parfois, même un opérateur ternaire est plus compliqué que nécessaire. Au lieu de cela, nous pouvons utiliser 'et' && et 'ou' || des opérateurs logiques pour évaluer certaines expressions de manière encore plus concise. Elle est souvent appelée «court-circuit» ou «évaluation de court-circuit».
Comment ça marcheSupposons que nous souhaitons renvoyer une seule des deux conditions ou plus.
L'utilisation de && renvoie la première fausse valeur. Si chaque opérande a la valeur true, la dernière expression évaluée sera renvoyée.
let one = 1, two = 2, three = 3; console.log(one && two && three);
Utilisation de || renverra la première vraie valeur. Si chaque opérande est évalué à faux, la dernière valeur calculée sera renvoyée.
let one = 1, two = 2, three = 3; console.log(one || two || three);
Exemple 1Disons que nous voulons renvoyer la longueur à une variable, mais ne connaissons pas son type.
Dans ce cas, vous pouvez utiliser if / else pour vérifier que foo est un type approprié, mais cette méthode peut être trop longue. Par conséquent, il vaut mieux prendre notre "court-circuit".
return (foo || []).length;
Si la variable foo a une longueur appropriée, elle sera retournée. Sinon, nous obtenons 0.
Exemple 2Avez-vous eu des problèmes pour accéder à un objet imbriqué? Vous ne savez peut-être pas s'il existe un objet ou l'une de ses sous-propriétés, ce qui peut entraîner des problèmes.
Par exemple, nous voulions accéder à la propriété data dans this.state, mais les données ne sont pas définies jusqu'à ce que notre programme renvoie une requête pour la sélection.
Selon l'endroit où nous l'utilisons, un appel à this.state.data peut empêcher le démarrage de l'application. Pour résoudre le problème, nous pourrions envelopper cela dans une expression conditionnelle:
if (this.state.data) { return this.state.data; } else { return 'Fetching Data'; }
Une option plus appropriée consisterait à utiliser l'opérateur "ou".
return (this.state.data || 'Fetching Data');
Nous ne pouvons pas changer le code ci-dessus pour utiliser &&. L'instruction 'Fetching Data' && this.state.data renverra this.state.data qu'elle soit indéfinie ou non.
Chaîne en optionVous pouvez suggérer d'utiliser la chaîne facultative lorsque vous essayez de renvoyer une propriété profondément dans une structure arborescente. Alors, un symbole de point d'interrogation? peut être utilisé pour récupérer une propriété uniquement si elle n'est pas nulle.
Par exemple, nous pourrions refactoriser l'exemple ci-dessus en obtenant this.state.data? .. (). Autrement dit, les données ne sont renvoyées que si la valeur n'est pas nulle.
Ou, s'il est important que l'état soit défini ou non, nous pourrions renvoyer this.state? .Data.
Convertir en booléen
CONVERSION DE TYPE
En plus des fonctions logiques habituelles true et false, JavaScript traite également toutes les autres valeurs comme véridiques ou fausses.
Sauf indication contraire, toutes les valeurs en JavaScript sont véridiques, à l'exception de 0, "", null, non défini, NaN et, bien sûr, false. Ces dernières sont fausses.
Nous pouvons facilement basculer entre les deux à l'aide de l'opérateur!, Qui convertit également le type en logique.
const isTrue = !0; const isFalse = !1; const alsoFalse = !!0; console.log(isTrue);
Convertir en chaîne
CONVERSION DE TYPE
Une conversion rapide d'un entier en chaîne peut être effectuée comme suit.
const val = 1 + ""; console.log(val);
Conversion en entier
CONVERSION DE TYPE
Nous effectuons la transformation inverse comme suit.
let int = "15"; int = +int; console.log(int);
Cette méthode peut également être utilisée pour convertir le type de données booléen booléen en valeurs numériques normales, comme indiqué ci-dessous:
console.log(+true);
Il peut y avoir des situations où + sera interprété comme un opérateur de concaténation plutôt que comme un ajout. Pour éviter cela, utilisez des tildes: ~~. Cet opérateur est équivalent à l'expression -n-1. Par exemple, ~ 15 est -16.
L'utilisation de deux tildes d'affilée annule l'opération, car - (- - n - 1) - 1 = n + 1 - 1 = n. En d'autres termes, ~ -16 est 15.
const int = ~~"15" console.log(int);
<Pouvoirs rapides
OPÉRATIONS
À partir d'ES7, vous pouvez utiliser l'opérateur d'exponentiation ** comme abréviation pour les degrés. C'est beaucoup plus rapide que d'utiliser Math.pow (2, 3). Cela semble simple, mais ce moment est inclus dans la liste des réceptions, car il n'est pas mentionné partout.
console.log(2 ** 3);
Ne le confondez pas avec le symbole ^, qui est généralement utilisé pour l'exponentiation. Mais en JavaScript, c'est l'opérateur XOR.
Avant ES7, l'abréviation ** ne pouvait être appliquée que pour les degrés avec la base 2 en utilisant l'opérateur de décalage gauche au niveau du bit <<:
Math.pow(2, n); 2 << (n - 1); 2**n;
Par exemple, 2 << 3 = 16 est équivalent à l'expression 2 ** 4 = 16.
Entier flottant
OPÉRATIONS / TRANSFORMATION DES TYPES
Si vous devez convertir un flottant en entier, vous pouvez utiliser Math.floor (), Math.ceil () ou Math.round (). Mais il existe un moyen plus rapide, pour cela, nous utilisons |, c'est-à-dire l'opérateur OR.
console.log(23.9 | 0);
Comportement | dépend en grande partie si vous avez affaire à des nombres positifs ou négatifs, cette méthode ne convient donc que si vous avez confiance en ce que vous faites.
n | 0 supprime tout après le séparateur décimal, tronquant le nombre à virgule flottante en entier.
Vous pouvez obtenir le même effet d'arrondi en utilisant ~~. Après une conversion forcée en entier, la valeur reste inchangée.
Nous supprimons les numéros de finL'opérateur OU peut être utilisé pour supprimer n'importe quel nombre de chiffres d'un numéro. Cela signifie que nous n'avons pas besoin de convertir les types, comme ici:
let str = "1553"; Number(str.substring(0, str.length - 1));
Au lieu de cela, nous écrivons simplement:
console.log(1553 / 10 | 0)
Lien automatique
CLASSES
Les pointes de flèche ES6 peuvent être utilisées dans les méthodes de classe et la liaison est implicite. Grâce à cela, vous pouvez dire au revoir aux expressions dupliquées telles que this.myMethod = this.myMethod.bind (this)!
import React, { Component } from React; export default class App extends Compononent { constructor(props) { super(props); this.state = {}; } myMethod = () => {
Coupe de tableau
TABLEAUX
Si vous devez supprimer des valeurs d'un tableau, il existe des méthodes plus rapides que splice ().
Par exemple, si vous connaissez la taille du tableau d'origine, vous pouvez remplacer sa propriété length comme suit:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; array.length = 4; console.log(array);
Mais il existe une autre méthode, et plus rapide. Si la vitesse vous tient à cœur, voici notre choix:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; array = array.slice(0, 4); console.log(array);
Afficher les dernières valeurs de tableau
TABLEAUX
Cette technique nécessite l'utilisation de la méthode slice ().
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log(array.slice(-1));
Formatage du code JSON
Json
Vous avez peut-être déjà utilisé JSON.stringify. Savez-vous que cela aide à formater votre JSON?
La méthode stringify () accepte deux paramètres facultatifs: la fonction de remplacement, qui peut être utilisée pour filtrer le JSON affiché, et l'espace de valeurs.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));
C'est tout, j'espère que toutes ces astuces ont été utiles. Et quelles astuces connaissez-vous? Écrivez-les dans les commentaires.
Skillbox recommande: