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 permis de gagner du temps. Je les ai repérés auprès 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 rappelons: pour tous les lecteurs de "Habr" - une remise de 10 000 roubles lors de l'inscription à n'importe quel cours Skillbox en utilisant le code promotionnel "Habr".
Skillbox vous recommande : Cours pratique .
Filtrage des valeurs uniques
TABLEAUX
Le type d'objet Set a été introduit dans ES6, avec l'opérateur spread..., nous pouvons l'utiliser pour créer un nouveau tableau qui contient uniquement des valeurs uniques.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]Dans une situation normale, beaucoup plus de code est nécessaire pour effectuer la même opération.
Cette technique fonctionne pour les tableaux contenant des types primitifs : non défini, nul, booléen, 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.
Longueur du tableau de cache en cycles
CYCLES
Lorsque vous apprenez les boucles for, 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 à plusieurs reprises la longueur du tableau à chaque itération.
Parfois, cela peut ê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 variable de longueur où nous définissons la variable i, comme ceci :
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}En principe, c'est presque la même chose que ci-dessus, mais en augmentant la taille de la boucle, nous obtiendrons un gain de temps important.
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 moins 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 l’opérateur ternaire est plus compliqué que nécessaire. Nous pouvons utiliser 'et' && et 'ou' à la place || Opérateurs booléens pour évaluer certaines expressions de manière encore plus concise. On l'appelle souvent « court-circuit » ou « indice de court-circuit ».
Comment ça marche
Disons que nous souhaitons renvoyer une seule condition parmi deux ou plusieurs.
L'utilisation de && renverra la première valeur fausse. Si chaque opérande est évalué à vrai, alors la dernière expression évaluée sera renvoyée.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Utiliser || renverra la première vraie valeur. Si chaque opérande est évalué à faux, alors la dernière valeur évaluée sera renvoyée.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullExemple 1
Disons que nous voulons renvoyer la longueur d'une variable, mais que nous ne connaissons pas son type.
Dans ce cas, vous pouvez utiliser if/else pour vérifier que foo est le bon type, mais cette méthode peut être trop longue. Il vaut donc mieux prendre notre « circuit court ».
return (foo || []).length;Si la variable foo a une longueur appropriée, elle sera renvoyée. Sinon, nous obtiendrons 0.
Exemple 2
Avez-vous rencontré des problèmes pour accéder à un objet imbriqué ? Vous ne savez peut-être pas si un objet ou l'une de ses sous-propriétés existe, 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 définies que lorsque notre programme renvoie une demande d'extraction.
Selon l'endroit où nous l'utilisons, l'appel de 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 meilleure option serait d'utiliser l'opérateur "ou".
return (this.state.data || 'Fetching Data');Nous ne pouvons pas modifier le code ci-dessus pour utiliser &&. L'opérateur 'Fetching Data' && this.state.data renverra this.state.data, qu'il soit indéfini ou non.
Chaîne en option
On pourrait suggérer d’utiliser le chaînage facultatif lorsque l’on tente de renvoyer une propriété profondément dans une structure arborescente. Alors, le symbole du 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 pour obtenir 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 TYPES
En plus des fonctions booléennes normales 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, indéfini, NaN et, bien sûr, false. Ces derniers sont faux.
Nous pouvons facilement basculer entre les deux en utilisant l'opérateur !, qui convertit également le type en booléen.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Convertir en chaîne
CONVERSION DE TYPES
Une conversion rapide d'un entier en chaîne peut être effectuée comme suit.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Convertir en entier
CONVERSION DE TYPES
Nous effectuons la transformation inverse comme celle-ci.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Cette méthode peut également être utilisée pour convertir le type de données booléen en valeurs numériques régulières, comme indiqué ci-dessous :
console.log(+true); // Return: 1
console.log(+false); // Return: 0Il peut y avoir des situations où + sera interprété comme un opérateur de concaténation plutôt que comme un opérateur d'addition. Pour éviter cela, vous devez utiliser les tildes : ~~. Cet opérateur est équivalent à -n-1. Par exemple, ~15 est égal à -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 égal à 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
OPÉRATIONS
À partir d'ES7, vous pouvez utiliser l'opérateur d'exponentiation ** comme raccourci pour les puissances. C'est beaucoup plus rapide que d'utiliser Math.pow(2, 3). Cela semble simple, mais ce point est inclus dans la liste des techniques, puisqu'il n'est pas évoqué partout.
console.log(2 ** 3); // Result: 8Il ne faut pas le confondre avec le symbole ^, couramment utilisé pour l'exponentiation. Mais en JavaScript, il s'agit de l'opérateur XOR.
Avant ES7, le raccourci ** ne pouvait être utilisé que pour les puissances de 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 équivaut à 2 ** 4 = 16.
Flottant en entier
OPÉRATIONS / CONVERSION DE TYPE
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); // Result: 23
console.log(-23.9 | 0); // Result: -23Comportement | Cela dépend en grande partie du fait que vous ayez 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 ce qui se trouve après le séparateur décimal, tronquant le flottant en un nombre entier.
Vous pouvez obtenir le même effet d’arrondi en utilisant ~~. Après conversion forcée en nombre entier, la valeur reste inchangée.
Suppression des numéros de fin
L'opérateur OR peut être utilisé pour supprimer n'importe quel nombre de chiffres d'un nombre. 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) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Liaison automatique
CLASSES
Les notations fléchées ES6 peuvent être utilisées dans les méthodes de classe et la liaison est implicite. Cela signifie que vous pouvez dire adieu aux expressions répétitives comme this.myMethod = this.myMethod.bind(this) !
import React, { Component } from React;
export default class App extends Compononent {
constructor(props) {
super(props);
this.state = {};
}
myMethod = () => {
// This method is bound implicitly!
}
render() {
return (
<>
<div>
{this.myMethod()}
</div>
</>
)
}
};Découpage du 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); // Result: [0, 1, 2, 3]Mais il existe une autre méthode, et plus rapide. Si la vitesse est ce qui compte pour vous, voici nos choix :
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
console.log(array); // Result: [0, 1, 2, 3]Impression de la ou des dernières valeurs d'un 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)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]Formatage du code JSON
JSON
Vous avez peut-être déjà utilisé JSON.stringify. Saviez-vous que cela aide à formater votre JSON ?
La méthode stringify() prend deux paramètres facultatifs : une fonction de remplacement, qui peut être utilisée pour filtrer le JSON affiché, et une valeur d'espace.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'C'est tout, j'espère que toutes ces techniques ont été utiles. Quelles astuces connaissez-vous ? Écrivez-les dans les commentaires.
Skillbox vous recommande :
- Cours pratique de deux ans .
- Cours en ligne .
- Cours pratique de l'année .
Source: habr.com