9 éléments JavaScript/Node.js à connaître

Javascript One Liner Featured
⏱️ 9 min read

À mesure que le Web et les applications deviennent plus complexes, JavaScript et Node.js deviennent de plus en plus des exigences courantes dans le répertoire d’un développeur. Pour améliorer votre code-foo et minimiser les maux de tête que vous rencontrez, vous pouvez définir certaines fonctions au début de votre code qui accomplissent rapidement des tâches simples.

Accélérer Wordpresss Elementor
Accélérer Wordpresss Elementor

Notez que Javascript n’est pas la même chose que Java. Découvrez les différences ici.

1. Mélangez les valeurs dans un tableau

Tout comme si vous mélangez un jeu de cartes, vous pouvez également mélanger les valeurs d’un tableau aussi souvent que vous le souhaitez en JavaScript avec ce one-liner :

const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());

En gardant l’analogie du jeu de cartes, voici à quoi cela ressemblerait si je voulais mélanger 52 valeurs :

let myarray = Array.from({length:52},(v,k)=>k+1);
 
console.log(shuffleArray(myarray));

Le code devrait révéler des valeurs mélangées au hasard dans la sortie de votre console.

Tableau aléatoire Javascript

2. Vérifiez si une date est un week-end ou un jour de semaine

En utilisant un simple opérande de reste, vous pouvez facilement vérifier si un jour tombe un week-end en JavaScript :

const isWeekend = (date) => date.getDay() % 6 == 0;

Si vous souhaitez modifier cela pour vérifier si le jour en question tombe un jour de semaine, inversez simplement la dernière comparaison :

const isWeekday = (date) => date.getDay() % 6 !== 0;

Dans le code suivant, je vérifie si aujourd’hui est un week-end :

console.log(isWeekend(new Date()));

Au lieu de définir séparément isWeekday ou isWeekend variables, vous pouvez simplement utiliser les NOT opérande tout en exprimant un if-then-else déclaration pour l’une ou l’autre des deux variables comme suit :

if(!isWeekend(new Date())) {
    console.log("Today falls on a weekday.");
 
} else {
    console.log("Today falls on a weekend.");
}
Week-end Javascript

3. Couper un nombre à un point décimal spécifique

La sortie que vous donnez à vos utilisateurs doit être aussi simple que possible et rien ne rend votre site ou votre application plus attrayant que de voir une énorme chaîne de chiffres brouillés. Pour supprimer les décimales moins significatives dans un nombre et l’afficher ainsi à l’utilisateur, saisissez cette définition astucieuse :

const decimalFormat = (n, places) => ~~(Math.pow(10, places) * n) / Math.pow(10, places);

Pour tester cela, je définis une valeur numérique avec un nombre ridicule de décimales et j’appelle cette fonction rapide pour la réduire à deux décimales.

let deciwow = 299.39542014592
 
console.log(decimalFormat(deciwow, 2));

Le résultat devrait être moins bluffant.

Décimales Javascript

4. Convertir les températures

En JavaScript, il n’y a pas de moyen standardisé de convertir Celsius en Fahrenheit, mais avec deux simples lignes, vous pouvez créer votre propre standard.

Pour Celsius en Fahrenheit :

const cToF = (celsius) => celsius * 9/5 + 32;

Et pour Fahrenheit en Celsius :

const fToC = (fahrenheit) => (fahrenheit - 32) * 5/9;

Dans ma ville, la température est de -2 degrés Celsius. En utilisant la conversion de Celsius en Fahrenheit, nous pouvons découvrir ce que cela signifie pour quelqu’un vivant aux États-Unis :

cToF(-2);

Cette expression donne une température de 28,4 degrés Fahrenheit.

Javascript Température

5. Vérifiez si quelqu’un utilise le mode sombre

Si vous souhaitez que le contenu que vous affichez respecte le schéma de couleurs de la personne utilisant votre code, JavaScript inclut un moyen de détecter si quelqu’un utilise le mode sombre afin que vous puissiez ajuster les couleurs en conséquence. La méthode est un peu compliquée à écrire, mais vous pouvez la raccourcir en utilisant ce one-liner :

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

Voici un exemple de vérification utilisant cette variable :

if (isDarkMode) {
    console.log("This screen is in dark mode.");
} else {
    console.log("This screen is not using dark mode.");
}

Notez que ce code ne fonctionne qu’en JavaScript pour les navigateurs. Node.js n’implémente pas la prise en charge de window.

6. Obtenir la moyenne d’un tableau de nombres

Lorsqu’il s’agit d’ensembles de données, JavaScript a une fonction pratique attachée aux tableaux qui vous permet d’effectuer l’arithmétique nécessaire pour obtenir la somme totale de toutes les valeurs d’une table particulière, puis de diviser ces nombres par la longueur de la table. Pour le faire élégamment en une seule ligne de code, il vous suffit de faire ceci :

const getAverage = (arr) => arr.reduce((a, b) => a + b, 0) / arr.length;

Ici, je crée un ensemble de données et pompe la moyenne de toutes ses valeurs via la console :

let dataset = [2, 14, 88, 204, 1515, 1294, 12, 144];
 
console.log(getAverage(dataset));

En utilisant ce code, votre sortie devrait être 409.125.

Moyenne Javascript

7. Générer un UUID

Si vous souhaitez collecter des statistiques et des données auprès des personnes utilisant votre application (par exemple, en générant un cookie), l’un des meilleurs moyens de le faire sans être invasif est de générer un identifiant universel unique (UUID). JavaScript n’inclut pas un moyen simple de générer des UUID conformes à RFC4122 (bien que Node.js ait le uuid paquet npm qui fournit cette fonctionnalité prête à l’emploi).

Dans JS, vous pouvez afficher un UUID fraîchement créé pour vos utilisateurs avec cette expression d’une ligne :

const genUUID = (a) => (a ? (a ^ ((Math.random() * 16) >> (a / 4))).toString(16) : ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, genUUID));

Ici, je teste la sortie:

console.log(genUUID());
Uuid Javascript

8. Obtenez le nombre de jours entre deux dates

Lors de la détermination de l’âge d’une certaine valeur (comme le compte d’un utilisateur), vous devrez calculer le nombre de jours qui se sont écoulés depuis un certain point. Voici un simple one-liner qui fait cela:

const ageDays = (old, recent) => Math.ceil(Math.abs(old - recent) / (1000 * 60 * 60 * 24));

Pour un exemple de cas d’utilisation, supposons que nous évaluons l’âge d’un utilisateur qui a créé son compte le 28 décembre 2012 et utilisons cette déclaration pour obtenir le nombre de jours entre cette date et aujourd’hui :

console.log(ageDays(new Date('2012-12-28'), new Date()));

Au moment d’écrire ces lignes, cela devrait donner un résultat de 3298 jours.

Journées Javascript

9. Générer un nombre aléatoire dans une plage

Parfois, il ne suffit pas de générer un nombre aléatoire. Vous devrez peut-être simplement limiter les conditions avec lesquelles il est généré. Avec ce one-liner, vous allez générer des nombres dans une certaine plage spécifiée :

const rangeRandom = (low, high) => Math.floor(Math.random() * (high - low + 1)) + low;

Tester cela devrait être facile:

console.log(rangeRandom(400, 20000));
Plage aléatoire Javascript

Questions fréquemment posées

1. Pourquoi utiliser des UUID dans les cookies ?

Étant donné que les cookies sont par nature intrusifs et occupent de l’espace sur la machine d’un utilisateur, vous devez vous efforcer d’être aussi efficace et non invasif que possible lorsque vous utilisez ces instruments pour collecter des données. L’utilisation d’un UUID offre un double avantage. Tout d’abord, il minimise l’espace occupé sur le stockage basé sur le client car l’identifiant n’a qu’une longueur de 128 bits. Deuxièmement, cela dépend de toutes les données personnelles appartenant à l’utilisateur.

2. J’obtiens une erreur “la fenêtre n’est pas définie” dans Node.js lors de la détection du mode sombre. Que fais-je?

Node.js ne peut pas appeler les modules côté client car il n’a pas la même relation intrinsèque client-serveur que JavaScript. Le one-liner de détection du mode sombre dans cet article est spécifiquement destiné au JavaScript basé sur un navigateur.

3. Ce code est-il universel pour tous les navigateurs ?

Le code JavaScript utilise un interpréteur censé fonctionner de manière universelle. Bien que cela fonctionne théoriquement sur tous les navigateurs, la façon dont ils interprètent votre code peut différer légèrement, en particulier avec des logiciels très anciens. Dans le cas de tous les one-liners exprimés ici, ils devraient tous renvoyer les mêmes résultats quel que soit le navigateur sur lequel votre utilisateur exécute le code. Sachez cependant que certaines fonctionnalités que vous utilisez dans JavaScript en général peuvent ne pas fonctionner sur des navigateurs tels que Pale Moon, Internet Explorer ou les versions des navigateurs du début des années 2000 qui sont actuellement activement développées.

Crédit image : Vue latérale du profil d’un gentil barbu par 123RF

Join our Newsletter and receive offers and updates! ✅

0 0 votes
Article Rating
Avatar of Routech

Routech

Routech is a website that provides technology news, reviews and tips. It covers a wide range of topics including smartphones, laptops, tablets, gaming, gadgets, software, internet and more. The website is updated daily with new articles and videos, and also has a forum where users can discuss technology-related topics.

Vous aimerez aussi...

S’abonner
Notification pour
guest
0 Comments
Commentaires en ligne
Afficher tous les commentaires
0
Nous aimerions avoir votre avis, veuillez laisser un commentaire.x