Menu avec les différents contenus et commandes

Tous mes articles de blog

Quelques snippets JavaScript utiles en développement
CF

Cuzeac Florin

87 vues

JavaScript est un langage essentiel pour le développement web. Que vous soyez débutant ou développeur expérimenté, les snippets JavaScript peuvent vous aider à résoudre des problèmes courants plus facilement et plus rapidement.

Ces petits morceaux de code réutilisables peuvent vous faire gagner du temps dans vos projets.

Quelques snippets JavaScript utiles en développement

Voici une sélection des 20 meilleurs snippets que tout développeur JavaScript devrait connaître.

1. Date et heure

Ce code JavaScript crée un nouvel objet Date qui représente la date et l'heure actuelles au moment de l'exécution. En utilisant console.log(date), il affiche cette date et heure sous forme d'une chaîne au format ISO 8601 dans la console.

Le résultat affiché 2024-07-21T12:00:00.000Z est un exemple qui montre une date fictive dans ce format ISO :

js

const date = new Date(); console.log(date); // 2024-07-21T12:00:00.000Z

2. Vérifiez si une variable est un tableau

Le code utilise la méthode Array.isArray() en JavaScript pour vérifier si une donnée est un tableau (array).

Voici comment cela fonctionne : Array.isArray(variable) renvoie un booléen (true ou false) selon que variable est un tableau ou non.

Exemple expliqué :

js

Array.isArray(variable); // Exemple const arr = [1, 2, 3]; console.log(Array.isArray(arr)); // true const str = 'Hello'; console.log(Array.isArray(str)); // false

3. Fusionnez deux tableaux

Le code utilise la méthode concat() en JavaScript pour combiner deux tableaux en un seul.

Explication du code : const newArr = arr1.concat(arr2);: Cette ligne crée un nouveau tableau newArr en concaténant (fusionnant) les éléments des tableaux arr1 et arr2. Le tableau original arr1 n’est pas modifié ; et concat() ne change pas arr2 non plus, elle retourne un nouveau tableau.

Exemple expliqué :

js

const newArr = arr1.concat(arr2); // Exemple const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arrMerged = arr1.concat(arr2); console.log(arrMerged); // [1, 2, 3, 4, 5, 6]

4. Supprimez les doublons d'un tableau

js

const uniqueArr = [...new Set(arr)]; // Exemple const arr = [1, 2, 2, 3, 4, 4, 5]; const uniqueArr = [...new Set(arr)]; console.log(uniqueArr); // [1, 2, 3, 4, 5]

Ce code montre comment supprimer les doublons d'un tableau en JavaScript. Voici une explication étape par étape :



En résumé, ce code utilise un Set pour éliminer les doublons du tableau arr et la syntaxe de décomposition pour convertir le Set de retour en un tableau de valeurs uniques.

5. Triez un tableau par ordre croissant

js

arr.sort((a, b) => a - b); // Exemple const arr = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5]; arr.sort((a, b) => a - b); console.log(arr); // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

Ce code utilise la méthode sort sur un tableau en JavaScript pour trier les éléments par ordre croissant.



Dans l'exemple donné, le tableau [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5] est trié pour devenir [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9] après l'application de sort. Le console.log(arr); affiche le tableau trié dans la console.

6. Inversez un tableau

js

arr.reverse(); // Exemple const arr = [1, 2, 3, 4, 5]; arr.reverse(); console.log(arr); // [5, 4, 3, 2, 1]

La méthode reverse en JavaScript inverse l'ordre des éléments d'un tableau.

7. Convertissez la chaîne en nombre

js

const num = parseInt(str, 10); // Exemple const str = '42'; const num = parseInt(str, 10); console.log(num); // 42

Le code utilise la fonction parseInt en JavaScript pour convertir une chaîne de caractères en un entier.

8. Générez un nombre aléatoire entre deux valeurs

js

const randomNum = Math.floor(Math.random() * (max - min + 1)) + min; // Exemple const min = 1; const max = 10; const randomNum = Math.floor(Math.random() * (max - min + 1)) + min; console.log(randomNum); // Un nombre aléatoire entre 1 et 10

Ce code génère un nombre entier aléatoire compris entre les valeurs min et max, incluses.



Dans l'exemple donné, la variable randomNum contient un nombre entier aléatoire variant entre 1 et 10. Le console.log(randomNum); affiche ce nombre aléatoire dans la console.

9. Vérifiez si une chaîne contient une sous-chaîne

js

const isSubstring = str.includes(substring); // Exemple const str = 'Hello, world!'; const substring = 'world'; const isSubstring = str.includes(substring); console.log(isSubstring); // true

Ce code vérifie si une sous-chaîne est présente dans une chaîne principale en utilisant la méthode includes de *JavaScript.

10. Obtenez la longueur d'un objet

js

const objLength = Object.keys(obj).length; // Exemple const obj = { a: 1, b: 2, c: 3 }; const objLength = Object.keys(obj).length; console.log(objLength); // 3

Ce code détermine le nombre de propriétés dans un objet en utilisant Object.keys.

11. Convertir un objet en tableau

js

const arr = Object.entries(obj); // Exemple const obj = { a: 1, b: 2, c: 3 }; const arr = Object.entries(obj); console.log(arr); // [['a', 1], ['b', 2], ['c', 3]]

Ce code convertit un objet en un tableau de paires clé-valeur en utilisant Object.entries.

12. Vérifiez si un objet est vide

js

const array = Object.entries(object); // Exemple const obj = {}; const isEmpty = Object.entries(obj).length === 0 && obj.constructor === Object; console.log(isEmpty); // true

Ce code vérifie si un objet est vide, c'est-à-dire qu'il ne possède aucune propriété.

13. Obtenez l'URL actuelle

js

const url = window.location.href; // Exemple const currentUrl = window.location.href; console.log(currentUrl); // https://example.com/page

Ce code récupère l'URL actuelle de la page web en utilisant l'objet window.location dans le contexte d'un navigateur.



Notez que ce code fonctionne uniquement dans des environnements permettant l'accès à l'objet window, comme les navigateurs web.

14. Redirection vers une nouvelle URL

js

window.location.href = 'https://example.com'; // Exemple window.location.href = 'https://example.com';

Ce code redirige le navigateur vers une nouvelle URL.



Notez que l'utilisation de ce code entraînera une redirection qui interrompra tout script en cours sur la page actuelle.

15. Définissez un cookie

js

document.cookie = 'name=value; expires=Sun, 1 Jan 2025 00:00:00 UTC; path=/'; // Exemple document.cookie = 'name=John Doe; expires=Sun, 1 Jan 2025 00:00:00 UTC; path=/';

Ce code crée ou met à jour un cookie dans le navigateur.

16. Obtenez un cookie

js

const cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)name\s*=\s*([^;]*).*$)|^.*$/, '$1'); // Exemple const cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)name\s*=\s*([^;]*).*$)|^.*$/, '$1'); console.log(cookieValue); // John Doe

Ce code extrait la valeur d'un cookie spécifique nommé name à partir du document cookie.



Dans l'exemple donné, cookieValue contiendra la valeur John Doe si le cookie name est présent et a cette valeur. Le console.log(cookieValue); affichera John Doe dans la console.

17. Vérifiez si un cookie existe

js

const cookieExists = document.cookie.split(';').some((item) => item.trim().startsWith('name='));

Ce code vérifie si un cookie spécifique, nommé name, existe dans le navigateur.



Si un cookie nommé name existe, cookieExists sera true sinon, ce sera false.

18. Supprimer un cookie

js

document.cookie = 'name=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';

Ce code supprime le cookie nommé name dans le navigateur.

19. Obtenez les dimensions actuelles de la fenêtre

js

const windowWidth = window.innerWidth; const windowHeight = window.innerHeight; console.log(windowWidth, windowHeight); // Largeur et hauteur de la fenêtre

Ce code récupère et affiche la largeur et la hauteur de la fenêtre d'affichage visible du navigateur.



Le console.log(windowWidth, windowHeight); affiche ces dimensions (largeur et hauteur) dans la console, permettant de voir la taille actuelle de la fenêtre du navigateur.

20. Copiez le texte dans le presse-papiers

js

navigator.clipboard.writeText(text); // Exemple navigator.clipboard.writeText('Hello, world!');

Ce code copie une chaîne de texte dans le presse-papiers du système en utilisant l'API Clipboard de JavaScript.



Notez que l'utilisation de navigator.clipboard.writeText nécessite que la page soit servie via HTTPS ou en étant en localhost, et l'action doit généralement être initiée par une interaction de l'utilisateur (comme un clic).



Ces 20 snippets JavaScript ne sont que la pointe de l’iceberg des possibilités offertes par ce langage. En incorporant ces snippets dans vos projets, vous pouvez améliorer votre efficacité et la qualité de votre code. Que ce soit pour manipuler des chaînes de caractères, gérer les cookies, ou même améliorer les performances de votre application, ces petits morceaux de code peuvent faire une grande différence. N’hésitez pas à les adapter à vos besoins spécifiques et à explorer davantage les vastes capacités de JavaScript.