33 codes JavaScript sur une ligne très pratiques, il est recommandé de les collecter !

Cet article vous propose 33 codes JavaScript monoligne très pratiques, organisés et partagés avec vous. Ces méthodes utilisent certaines API pour simplifier le fonctionnement, mais certaines méthodes ne sont pas très élégantes pour écrire une seule ligne, nous nous concentrons donc ici principalement sur l'apprentissage des API. Conseils d'utilisation ! J'espère que cela aide tout le monde.

1. Traitement de la date

1 Vérifiez si la date est valide

Cette méthode est utilisée pour vérifier si la date donnée est valide :

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());
isDateValid("December 17, 1995 03:24:00");  // true

2. Intervalle de deux dates

Cette méthode est utilisée pour calculer l'intervalle entre deux dates :

const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
dayDif(new Date("2021-11-3"), new Date("2022-2-1"))  // 90

3 Trouver le jour de l'année où se trouve une date

Cette méthode est utilisée pour détecter que la date donnée est. le jour de l'année Jours :

const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
dayOfYear(new Date());   // 307

2021 est passé

4. Formatage de l'heure

Cette méthode peut être utilisée pour convertir l'heure au format heure : minutes : secondes :

const timeFromDate = date => date.toTimeString().slice(0, 8);
    
timeFromDate(new Date(2021, 11, 2, 12, 30, 0));  // 12:30:00
timeFromDate(new Date());  // 返回当前时间 09:00:00

2. traitement

1. Mettre en majuscule la première lettre d'une chaîne

Cette méthode est utilisée pour mettre en majuscule la première lettre d'une chaîne anglaise :

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
capitalize("hello world")  // Hello world

2. Retourner une chaîne

Cette méthode est utilisée pour retourner une opération de chaîne, renvoie la chaîne inversée :

const reverse = str => str.split('').reverse().join('');
reverse('hello world');   // 'dlrow olleh'

3. Chaîne aléatoire

Cette méthode est utilisée pour générer une chaîne aléatoire :

const randomString = () => Math.random().toString(36).slice(2);
randomString();

4. Tronquer la chaîne à :

const truncateString = (string, length) => string.length < length ? string : `${string.slice(0, length - 3)}...`;
truncateString(&#39;Hi, I should be truncated because I am too loooong!&#39;, 36)   // &#39;Hi, I should be truncated because...&#39;

5. Supprimer le HTML de la chaîne

Cette méthode est utilisée pour supprimer les éléments HTML de la chaîne :

const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';

3. Traitement du tableau

1. Depuis le tableau Supprimer les doublons du tableau

Cette méthode est utilisée pour supprimer les doublons du tableau :

const removeDuplicates = (arr) => [...new Set(arr)];
console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6]));

2 Déterminer si le tableau est vide

Cette méthode est utilisée pour déterminer si un tableau est un tableau vide, il le fera. renvoie une valeur booléenne :

const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;
isNotEmpty([1, 2, 3]);  // true

3. Fusionner deux tableaux

Vous pouvez utiliser les deux méthodes suivantes pour fusionner deux tableaux :

const merge = (a, b) => a.concat(b);
const merge = (a, b) => [...a, ...b];

4. Opérations numériques

1. Nombres impairs ou pairs

Cette méthode est utilisée pour déterminer si un nombre est impair ou pair :

const isEven = num => num % 2 === 0;
isEven(996);

2 Obtenez la moyenne d'un ensemble de nombres

const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4, 5);   // 3

3 Obtenez un entier aléatoire entre deux entiers

.

Cette méthode Utilisée pour obtenir un entier aléatoire entre deux entiers

const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
random(1, 50);

4 Arrondi par chiffres spécifiés

Cette méthode est utilisée pour arrondir un nombre selon les chiffres spécifiés :

const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)
round(1.005, 2) //1.01
round(1.555, 2) //1.56

5.

1. Convertir RVB en mécanisme hexadécimal

Cette méthode peut convertir une valeur de couleur RVB en valeur hexadécimale :

const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
rgbToHex(255, 255, 255);  // &#39;#ffffff&#39;

2. Obtenez une couleur hexadécimale aléatoire

Cette méthode est utilisée pour obtenir une couleur hexadécimale aléatoire. valeur de couleur :

const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
randomHex();

6. Opérations du navigateur

1. Copier le contenu dans le presse-papiers

Cette méthode utilise navigator.clipboard.writeText pour copier le texte dans le presse-papiers :

const copyToClipboard = (text) => navigator.clipboard.writeText(text);
copyToClipboard("Hello World");

2. cookies

Cette méthode peut accéder aux cookies et effacer tous les cookies stockés dans la page Web en utilisant document.cookie :

const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));

3 Obtenir le texte sélectionné

La méthode obtient le texte sélectionné par l'utilisateur via le construit- dans l'attribut getSelection :

const getSelectedText = () => window.getSelection().toString();
getSelectedText();

4. Détecter s'il s'agit du mode sombre

Cette méthode est utilisée pour détecter si l'environnement actuel est en mode sombre, c'est une valeur booléenne :

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

5 .Faites défiler vers le haut de la page

Cette méthode est utilisée pour revenir en haut de la page :

const goToTop = () => window.scrollTo(0, 0);
goToTop();

6. Déterminer si l'onglet actuel est activé

Cette méthode est utilisée pour détecter si l'onglet actuel est activé :

const isTabInView = () => !document.hidden;

7 . Déterminer si l'appareil actuel est un appareil Apple

Cette méthode est utilisée pour détecter si l'appareil actuel est un appareil Apple :

const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);
isAppleDevice();

8 S'il faut faire défiler vers le bas de la page

Cette méthode. est utilisé pour déterminer si la page a atteint le bas :

const scrolledToBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;

9. Redirection vers une URL

Cette méthode est utilisée pour rediriger vers une nouvelle URL :

const redirect = url => location.href = url
redirect("https://www.google.com/")

10. Ouvrez la boîte d'impression du navigateur

. Cette méthode est utilisée pour ouvrir la boîte d'impression du navigateur :

const showPrintDialog = () => window.print()

7. Autres opérations

1. Valeur booléenne aléatoire

Cette méthode peut renvoyer une valeur booléenne aléatoire. un nombre aléatoire de 0 à 1, et comparez-le à 0,5, il y a une demi-probabilité d'obtenir une vraie valeur ou une fausse valeur.

const randomBoolean = () => Math.random() >= 0.5;
randomBoolean();

2. Échange de variables

Vous pouvez utiliser le formulaire suivant pour échanger les valeurs de deux variables lorsque la troisième variable n'est pas applicable :

[foo, bar] = [bar, foo];

3. Obtenez le type de variable

Ceci. La méthode est utilisée. Obtenez le type d'une variable :

const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
trueTypeOf('');     // string
trueTypeOf(0);      // number
trueTypeOf();       // undefined
trueTypeOf(null);   // null
trueTypeOf({});     // object
trueTypeOf([]);     // array
trueTypeOf(0);      // number
trueTypeOf(() => {});  // function

4 Conversion entre Fahrenheit et Celsius

.

该方法用于摄氏度和华氏度之间的转化：

const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;
celsiusToFahrenheit(15);    // 59
celsiusToFahrenheit(0);     // 32
celsiusToFahrenheit(-20);   // -4
fahrenheitToCelsius(59);    // 15
fahrenheitToCelsius(32);    // 0

5. 检测对象是否为空

该方法用于检测一个JavaScript对象是否为空：

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;

【相关推荐：javascript学习教程】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!