🥇12 techniques de travail avec JavaScript qui ne figurent pas dans la plupart des tutoriels

Quand j'ai commencé à apprendre JavaScript, j'ai d'abord dressé une liste de techniques qui m'ont aidé à gagner du temps. Je les ai prises auprès d'autres développeurs, 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, elles sont universelles.

Rappelons-le : pour tous les lecteurs de « Habr » — une réduction de 10 000 roubles lors de l'inscription à tout cours Skillbox avec le code promo « Habr ».

Skillbox recommande : Cours pratique « Développeur mobile PRO ».

Filtrage des valeurs uniques

TABLEAUX

Le type d'objet Set a été introduit dans ES6, et avec l'opérateur spread, nous pouvons l'utiliser pour créer un nouveau tableau contenant uniquement des valeurs uniques.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
 
console.log(uniqueArray); // Résultat : [1, 2, 3, 5]

Dans une situation normale, il faudrait beaucoup plus de code pour réaliser la même opération.

Cette méthode fonctionne pour les tableaux contenant des types primitifs : undefined, null, boolean, string et number. Si vous travaillez avec un tableau contenant des objets, des fonctions ou des tableaux supplémentaires, vous aurez besoin d'une autre approche.

Longueur du tableau caché dans les boucles

BOUCLES

Lorsque vous étudiez le for pour les 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.

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écessite un seul accès. Nous pouvons le faire en définissant une variable length, par exemple ainsi :

for (let i = 0, length = array.length; i < length; i++) {
  console.log(i);
}

En principe, presque la même chose que ci-dessus, mais en augmentant la taille de la boucle, nous réaliserons des économies de temps significatives.

Évaluation du court-circuit (évaluation de McCarthy)

OPÉRATEURS CONDITIONNELS

L'opérateur ternaire est un moyen rapide et efficace d'écrire des instructions conditionnelles simples (et parfois pas si simples) :

x > 100 ? "plus de 100" : "moins de 100";
x > 100 ? (x > 200 ? "plus de 200" : "entre 100 et 200") : "moins de 100";

Mais parfois, même l'opérateur ternaire est plus compliqué que nécessaire. À la place, nous pouvons utiliser les opérateurs logiques 'and' && et 'or' || pour évaluer certaines expressions d'une manière encore plus concise. On l'appelle souvent « court-circuit » ou « évaluation du court-circuit ».

Comment cela fonctionne

Disons que nous voulons renvoyer juste l'un d'eux parmi deux ou plusieurs conditions.

L'utilisation de && renverra la première valeur false. Si chaque opérande est évalué comme true, l'expression calculée en dernier sera renvoyée.

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Résultat : 3

console.log(0 && null); // Résultat : 0

L'utilisation de || permettra de renvoyer la première valeur true. Si chaque opérande est évalué comme false, la dernière valeur calculée sera renvoyée.

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Résultat : 1

console.log(0 || null); // Résultat : null

Exemple 1

Disons que nous voulons renvoyer la longueur de la variable, mais que nous ne connaissons pas son type.

Dans ce cas, nous pourrions utiliser if/else pour vérifier que foo est du bon type, mais cette méthode peut s'avérer trop lente. Il vaut donc mieux utiliser notre "court-circuit".

return (foo || []).length;

Si la variable foo a la 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 pouvez ne pas savoir si l'objet ou l'une de ses sous-propriétés existe, ce qui peut causer des problèmes.

Par exemple, nous voulions accéder à la propriété data dans this.state, mais data n'est pas défini tant que notre programme n'a pas renvoyé la requête de récupération.

En fonction de l'endroit où nous l'utilisons, l'appel this.state.data peut empêcher le démarrage de l'application. Pour résoudre ce problème, nous pourrions l'entourer d'une expression conditionnelle :

if (this.state.data) {
  return this.state.data;
} else {
  return 'Récupération des données';
}

Une option plus appropriée serait d'utiliser l'opérateur "ou".

return (this.state.data || 'Récupération des données');

Nous ne pouvons pas modifier le code ci-dessus pour utiliser &&. L'opérateur 'Récupération des données' && this.state.data renverra this.state.data, qu'il soit indéfini ou non.

Chaînage optionnel

On peut envisager d'utiliser le chaînage optionnel lors de la tentative de renvoyer une propriété profondément dans une structure arborescente. Ainsi, le signe de point d'interrogation ? peut être utilisé pour extraire la propriété, uniquement si elle n'est pas nulle (null).

Par exemple, nous pourrions refactoriser l'exemple ci-dessus, en obtenant this.state.data?..(). Cela signifie que data n'est renvoyé que si sa valeur n'est pas null.

Ou, s'il est important de savoir si l'état est défini ou non, nous pourrions renvoyer this.state?.data.

Conversion en Boolean

CONVERSION DE TYPE

En plus des fonctions logiques ordinaires true et false, JavaScript considère également toutes les autres valeurs comme truthy ou falsy.

À moins d'indication contraire, toutes les valeurs en JavaScript sont considérées comme véridiques, à l'exception de 0, « », null, undefined, NaN et, bien sûr, false. Ces derniers sont considérés comme faux.

Nous pouvons facilement basculer entre cela et cela en utilisant l'opérateur !, qui convertit également le type en logique.

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
 
console.log(true); // Résultat : true
console.log(typeof true); // Résultat : "boolean"

Conversion en chaîne

CONVERSION DE TYPE

Une conversion rapide d'un entier en chaîne peut être réalisée comme suit.

const val = 1 + "";
 
console.log(val); // Résultat : "1"
console.log(typeof val); // Résultat : "string"

Conversion en entier

CONVERSION DE TYPE

Nous effectuons la conversion inverse de cette manière.

let int = "15";
int = +int;
 
console.log(int); // Résultat : 15
console.log(typeof int); // Résultat : "number"

Cette méthode peut également être utilisée pour convertir des valeurs boolean en valeurs numériques ordinaires, comme montré ci-dessous :

console.log(+true);  // Retour : 1
console.log(+false); // Retour : 0

Il peut y avoir des situations où + sera interprété comme un opérateur de concaténation plutôt que d'addition. Pour éviter cela, il vaut mieux utiliser des tildes : ~~. Cet opérateur équivaut à l'expression -n-1. Par exemple, ~ 15 est égal à -16.

L'utilisation de deux tildes consécutives 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); // Résultat : 15
console.log(typeof int); // Résultat : "number"

<Quick Powers

OPÉRATIONS

Depuis ES7, on peut utiliser l'opérateur d'exponentiation ** comme abréviation pour les puissances. C'est beaucoup plus rapide qu'utiliser Math.pow(2, 3). Cela semble simple, mais cela fait partie des astuces, car cela n'est pas mentionné partout.

console.log(2 ** 3); // Résultat : 8

Ne le confondez pas avec le symbole ^, généralement utilisé pour l'exponentiation. Mais en JavaScript, c'est l'opérateur XOR.

Avant ES7, la notation ** ne pouvait être utilisée que pour les puissances de 2 en utilisant l'opérateur de décalage de bits à gauche << :

Math.pow(2, n);
2 << (n - 1);
2**n;

Par exemple, 2 << 3 = 16 équivaut à 2 ** 4 = 16.

Float en entier

OPÉRATIONS / CONVERSION DE TYPES

Si nécessaire, pour convertir un float en entier, on peut utiliser Math.floor(), Math.ceil() ou Math.round(). Mais il existe aussi un moyen plus rapide, en utilisant |, c'est-à-dire l'opérateur OR.

console.log(23.9 | 0);  // Résultat : 23
console.log(-23.9 | 0); // Résultat : -23

Le comportement dépend en grande partie de votre interaction avec des nombres positifs ou négatifs, donc cette méthode est appropriée uniquement si vous êtes sûr de ce que vous faites.

n | 0 supprime tout ce qui se trouve après le séparateur décimal, tronquant le nombre à virgule flottante à un nombre entier.

Vous pouvez obtenir le même effet de troncature en utilisant ~~. Après la conversion forcée en nombre entier, la valeur reste inchangée.

Retirer les nombres de fin

L'opérateur OR peut être utilisé pour retirer 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, vous écrivez simplement :

console.log(1553 / 10 | 0)  // Résultat : 155
console.log(1553 / 100 | 0)  // Résultat : 15
console.log(1553 / 1000 | 0)  // Résultat : 1

Association automatique

CLASSES

Les flèches ES6 peuvent être utilisées dans les méthodes de classe, ce qui implique un lien. Cela permet de dire adieu aux expressions redondantes comme this.myMethod = this.myMethod.bind(this) !

import React, { Component } from 'react';
 
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
 
  myMethod = () =&gt; {
    // Cette méthode est liée implicitement !
  }
 
  render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

Élagage de tableau

TABLEAUX

Si vous devez retirer 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 redéfinir sa propriété length comme suit :

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;

console.log(array); // Résultat : [0, 1, 2, 3]

Mais il existe une autre méthode, qui est plus rapide. Si la vitesse est importante pour vous, voici notre choix :

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);

console.log(array); // Résultat : [0, 1, 2, 3]

Affichage de la dernière valeur (des valeurs) d'un tableau

TABLEAUX
Cette technique requiert l'utilisation de la méthode slice().

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(array.slice(-1)); // Résultat : [9]
console.log(array.slice(-2)); // Résultat : [8, 9]
console.log(array.slice(-3)); // Résultat : [7, 8, 9]

Formatage du code JSON

JSON

Vous avez peut-être déjà utilisé JSON.stringify. Savez-vous qu'il aide à formater votre JSON ?

La méthode stringify() prend deux paramètres facultatifs : une fonction replacer, que vous pouvez utiliser pour filtrer le JSON affiché, et une valeur space.

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));

// Résultat :
// '{
//     "alpha": A,
//     "beta": B
// }'

C'est tout, j'espère que toutes ces techniques vous ont été utiles. Quelles astuces connaissez-vous ? Partagez-les dans les commentaires.

Skillbox recommande :

Cours pratique de deux ans "Je suis un développeur web PRO".

Cours en ligne "Développeur C# depuis 0".

Cours pratique d'un an «Développeur PHP de 0 à PRO».

Source : habr.com

12 astuces de travail avec JavaScript qui ne figurent pas dans la plupart des tutoriels

Filtrage des valeurs uniques

Longueur du tableau caché dans les boucles

Évaluation du court-circuit (évaluation de McCarthy)

Conversion en Boolean

Conversion en chaîne

Conversion en entier

<Quick Powers

Float en entier

Association automatique

Élagage de tableau

Affichage de la dernière valeur (des valeurs) d'un tableau

Formatage du code JSON