Maison  >  Article  >  interface Web  >  Apprenez ces 20+ one-liners JavaScript pour vous aider à écrire du code comme un pro

Apprenez ces 20+ one-liners JavaScript pour vous aider à écrire du code comme un pro

青灯夜游
青灯夜游avant
2021-05-14 10:51:032058parcourir

Cet article vous présente plus de 20 codes JavaScript sur une ligne qui peuvent vous aider à écrire du code comme un professionnel. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Apprenez ces 20+ one-liners JavaScript pour vous aider à écrire du code comme un pro

JavaScript continue de croître,

car c'est l'un des langages les plus faciles à démarrer, ouvrant ainsi la porte à de nouveaux langages sur le marché . (Visage de point d'interrogation ?) 成为技术怪才

En effet, JavaScript peut faire beaucoup de choses merveilleuses ! Il y a encore beaucoup à apprendre.

Et, que vous soyez nouveau dans JavaScript ou plutôt développeur professionnel, apprendre quelque chose de nouveau est toujours une bonne chose.

Cet article a compilé quelques one-liners très utiles (20+) qui peuvent vous aider à améliorer votre efficacité de travail et à déboguer votre code.

Qu'est-ce qu'un one-liner ?

One-liner est une pratique de codage dans laquelle nous exécutons certaines fonctions avec une seule ligne de code.
01 - Obtenez une valeur booléenne aléatoire

Cette fonction renverra une valeur booléenne (vrai ou faux) en utilisant la méthode

. Math.random()
Créons un nombre aléatoire entre 0 et 1, puis on vérifie s'il est supérieur ou inférieur à 0,5. Math.randomCela signifie qu'il y a 50/50 de chances de réussir ou de se tromper.

Apprenez ces 20+ one-liners JavaScript pour vous aider à écrire du code comme un pro

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

console.log(getRandomBoolean());
// a 50/50 chance of returning true or false

02 - Vérifier si une date est un week-end

Avec cette fonctionnalité, vous pourrez vérifier si une date fournie est un jour de la semaine ou un week-end.


Apprenez ces 20+ one-liners JavaScript pour vous aider à écrire du code comme un pro

const isWeekend = (date) => [0, 6].indexOf(date.getDay()) !== -1;

console.log(isWeekend(new Date(2021, 4, 14)));
// false (Friday)
console.log(isWeekend(new Date(2021, 4, 15)));
// true (Saturday)

03 - Vérifiez si un nombre est pair ou impair

Fonction utilitaire simple pour vérifier si un nombre est pair ou impair.


Apprenez ces 20+ one-liners JavaScript pour vous aider à écrire du code comme un pro

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

console.log(isEven(5));
// false
console.log(isEven(4));
// true

04 - Obtenir des valeurs uniques dans un tableau (déduplication de tableau)

Un moyen très simple de supprimer toutes les valeurs en double du tableau . Cette fonction convertit un tableau en Set puis renvoie un tableau.


Apprenez ces 20+ one-liners JavaScript pour vous aider à écrire du code comme un pro

const uniqueArr = (arr) => [...new Set(arr)];

console.log(uniqueArr([1, 2, 3, 1, 2, 3, 4, 5]));
// [1, 2, 3, 4, 5]

05 - Vérifier si une variable est un tableau

Un moyen propre et simple de vérifier si une variable est un tableau.

Bien sûr, il peut y avoir d'autres méthodes


Apprenez ces 20+ one-liners JavaScript pour vous aider à écrire du code comme un pro

const isArray = (arr) => Array.isArray(arr);

console.log(isArray([1, 2, 3]));
// true
console.log(isArray({ name: 'Ovi' }));
// false
console.log(isArray('Hello World'));
// false

06-Générer un nombre aléatoire entre deux nombres

Cela permettra prenez deux nombres comme arguments et générerez un nombre aléatoire entre ces deux nombres !

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

console.log(random(1, 50));
// could be anything from 1 - 50

07 - Générer une chaîne aléatoire (ID unique ?)

Peut-être avez-vous besoin d'un identifiant unique pour

, voici une astuce que vous pouvez utiliser pour générer des chaînes aléatoires en déplacement. 临时

Apprenez ces 20+ one-liners JavaScript pour vous aider à écrire du code comme un pro

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

console.log(randomString());
// could be anything!!!

08-Faites défiler vers le haut de la page

La méthode

décrite fait défiler les coordonnées window.scrollTo() et X à. YSi nous les définissons sur zéro et zéro, nous ferons défiler vers le haut de la page.

Apprenez ces 20+ one-liners JavaScript pour vous aider à écrire du code comme un pro

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

scrollToTop();

09 - Changement de booléen

Le changement de booléen est l'un des problèmes de programmation les plus élémentaires qui peuvent être résolus de nombreuses manières différentes.

Au lieu d'utiliser une instruction if pour déterminer la valeur à laquelle définir un booléen, vous pouvez utiliser une fonction ! Retournez la valeur actuelle.
opérateur.

Apprenez ces 20+ one-liners JavaScript pour vous aider à écrire du code comme un pro

// bool is stored somewhere in the upperscope
const toggleBool = () => (bool = !bool);
//or
const toggleBool = b => !b;

10-Échanger deux variables

Le code ci-dessous consiste à échanger deux variables sans utiliser la troisième variable et en utilisant simplement une ligne de code L'une des façons les plus simples d'utiliser une variable.


Apprenez ces 20+ one-liners JavaScript pour vous aider à écrire du code comme un pro

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

11- Calculer le nombre de jours entre deux dates

Pour calculer le nombre de jours entre deux dates,

on commence par Trouvez la valeur absolue entre les deux dates, puis divisez-la par 86400000 (égal au nombre de millisecondes dans une journée), et enfin arrondissez le résultat et renvoyez-le.

1Apprenez ces 20+ one-liners JavaScript pour vous aider à écrire du code comme un pro

const daysDiff = (date, date2) => Math.ceil(Math.abs(date - date2) / 86400000);

console.log(daysDiff(new Date('2021-05-10'), new Date('2021-11-25')));
// 199

12 - Copier le texte dans le presse-papiers

PS : Vous devrez peut-être ajouter une vérification pour voir si

navigator.clipboard.writeText

1Apprenez ces 20+ one-liners JavaScript pour vous aider à écrire du code comme un pro

const copyTextToClipboard = async (text) => {
  await navigator.clipboard.writeText(text);
};

13- Différentes façons de fusionner plusieurs tableaux

Il existe deux façons de fusionner des tableaux. L’une d’elles consiste à utiliser la méthode

. L'autre utilise l'opérateur spread (concat).

PS : Nous pouvons également utiliser l'objet "settings" pour copier n'importe quoi du tableau final.


1Apprenez ces 20+ one-liners JavaScript pour vous aider à écrire du code comme un pro

// Merge but don't remove the duplications
const merge = (a, b) => a.concat(b);
// Or
const merge = (a, b) => [...a, ...b];

// Merge and remove the duplications
const merge = [...new Set(a.concat(b))];
// Or
const merge = [...new Set([...a, ...b])];

14-获取javascript语言的实际类型

人们有时会使用库来查找JavaScript中某些内容的实际类型,这一小技巧可以节省你的时间(和代码大小)。

1Apprenez ces 20+ one-liners JavaScript pour vous aider à écrire du code comme un pro

const trueTypeOf = (obj) => {
  return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
};

console.log(trueTypeOf(''));
// string
console.log(trueTypeOf(0));
// number
console.log(trueTypeOf());
// undefined
console.log(trueTypeOf(null));
// null
console.log(trueTypeOf({}));
// object
console.log(trueTypeOf([]));
// array
console.log(trueTypeOf(0));
// number
console.log(trueTypeOf(() => {}));
// function

15-在结尾处截断字符串

需要从头开始截断字符串,这不是问题!

1Apprenez ces 20+ one-liners JavaScript pour vous aider à écrire du code comme un pro

const truncateString = (string, length) => {
  return string.length < length ? string : `${string.slice(0, length - 3)}...`;
};

console.log(
  truncateString(&#39;Hi, I should be truncated because I am too loooong!&#39;, 36),
);
// Hi, I should be truncated because...

16-从中间截断字符串

从中间截断字符串怎么样?

该函数将一个字符串作为第一个参数,然后将我们需要的字符串大小作为第二个参数,然后从第3个和第4个参数开始和结束需要多少个字符

Apprenez ces 20+ one-liners JavaScript pour vous aider à écrire du code comme un pro

const truncateStringMiddle = (string, length, start, end) => {
  return `${string.slice(0, start)}...${string.slice(string.length - end)}`;
};

console.log(
  truncateStringMiddle(
    &#39;A long story goes here but then eventually ends!&#39;, // string
    25, // 需要的字符串大小
    13, // 从原始字符串第几位开始截取
    17, // 从原始字符串第几位停止截取
  ),
);
// A long story ... eventually ends!

17-大写字符串

好吧,不幸的是,JavaScript没有内置函数来大写字符串,但是这种解决方法可以实现。

1Apprenez ces 20+ one-liners JavaScript pour vous aider à écrire du code comme un pro

const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);

console.log(capitalize(&#39;hello world&#39;));
// Hello world

18-检查当前选项卡是否在视图/焦点内

此简单的帮助程序方法根据选项卡是否处于视图/焦点状态而返回truefalse

1Apprenez ces 20+ one-liners JavaScript pour vous aider à écrire du code comme un pro

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

isTabInView();
// true/false

19-检查用户是否在Apple设备上

如果用户使用的是Apple设备,则返回true

1Apprenez ces 20+ one-liners JavaScript pour vous aider à écrire du code comme un pro

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

console.log(isAppleDevice);
// true/false

20-三元运算符

当你只想在一行中编写if..else语句时,这是一个很好的代码保护程序。

Apprenez ces 20+ one-liners JavaScript pour vous aider à écrire du code comme un pro

// Longhand
const age = 18;
let greetings;

if (age < 18) {
  greetings = &#39;You are not old enough&#39;;
} else {
  greetings = &#39;You are young!&#39;;
}

// Shorthand
const greetings = age < 18 ? &#39;You are not old enough&#39; : &#39;You are young!&#39;;

21-短路评估速记

在将变量值分配给另一个变量时,可能要确保源变量不为null,未定义或为空。
可以编写带有多个条件的long if语句,也可以使用短路评估。

2Apprenez ces 20+ one-liners JavaScript pour vous aider à écrire du code comme un pro

// Longhand
if (name !== null || name !== undefined || name !== &#39;&#39;) {
  let fullName = name;
}

// Shorthand
const fullName = name || &#39;buddy&#39;;

希望对你有所帮助!

英文原文地址:https://dev.to/ovi/20-javascript-one-liners-that-will-help-you-code-like-a-pro-4ddc

更多编程相关知识,请访问:编程入门!!

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer