11 One-Liners JavaScript surprenants !

Que feriez-vous si vous vouliez impressionner un développeur professionnel ? C'est simple : utilisez une logique simple et le moins de code possible pour résoudre un problème complexe. Avec l'introduction des fonctions fléchées ES6, il est possible de créer des lignes de code simples et élégantes.

Dans cet article, je partagerai avec vous 11 one-liners rares mais puissants. Es-tu prêt? Commençons par le premier !

1. Obtenir le nombre de caractères dans une chaîne

Obtenir le nombre de caractères est un utilitaire utile qui peut être utile dans de nombreuses situations. Vous pouvez l'utiliser pour obtenir le nombre d'espaces suivi du nombre de mots, ou cela peut être utilisé pour obtenir le nombre d'un certain délimiteur dans une chaîne.

const characterCount = (str, char) => str.split(char).length - 1

L'idée est très simple. Nous divisons la chaîne en utilisant l'argument passé char et obtenons la longueur du tableau renvoyé. Parce que chaque fois que la chaîne est divisée, il y a une chaîne de plus que le séparateur ; donc en soustrayant 1, nous avons une seule ligne CharacterCount.

2. Vérifier si un objet est vide

Vérifier le vide d'un objet est en réalité bien plus difficile qu'il n'y paraît. Chaque vérification pour voir si un objet est égal à {} renvoie false, même si l'objet est vide.

Heureusement, la seule ligne de code ci-dessous fait exactement ce que nous voulons.

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

Dans cette ligne, nous vérifions si la longueur de la clé de l'objet est égale à 0 et si l'argument passé est un objet réel.

3. Attendez un certain temps puis exécutez

Dans cette seule ligne de code, nous serons exposés à une programmation asynchrone. L'idée est simple.

Lors de l'exécution du code, si vous souhaitez attendre un certain temps, voici la ligne d'attente :

const wait = async (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));

Dans la ligne d'attente, nous créons une promesse et la résolvons après un délai donné temps en utilisant la fonction setTimeout.

4. Obtenez la différence en jours entre deux dates

Les dates sont souvent la partie la plus déroutante lors du développement d'applications Web car de nombreux concepts peuvent facilement être mal calculés.

Il s'agit d'un outil puissant pour calculer la différence en jours entre deux dates. Mais il reste encore beaucoup à faire. Comme moi, vous pouvez créer vos propres lignes uniques pour calculer les différences mensuelles, annuelles, etc.

const daysBetween = (date1, date2) => Math.ceil(Math.abs(date1 - date2) / (1000 * 60 * 60 * 24))

La logique derrière ce one-liner est facile à comprendre. Lorsque deux dates sont soustraites, la valeur de retour est la différence en millisecondes. Pour convertir des millisecondes en jours, nous devons les diviser respectivement par millisecondes, secondes, minutes et heures.

5. Redirection vers une autre URL

Si vous avez déjà créé un vrai site Web, je suis sûr que vous avez rencontré une logique d'authentification. Par exemple, les utilisateurs non-administrateurs ne devraient pas pouvoir accéder à la route /admin. Si l'utilisateur essaie, vous devez le rediriger vers une autre URL.

Ce one-liner fonctionne exactement pour la situation que j'ai mentionnée ci-dessus, mais je pense que vous pouvez trouver d'autres cas d'utilisation.

const redirect = url => location.href = url

location est une méthode sur l'objet fenêtre global. La définition de l'attribut href se comporte de la même manière que lorsque l'utilisateur clique sur le lien.

6. Vérifiez la prise en charge tactile sur votre appareil

À mesure que de plus en plus d'appareils peuvent être connectés à Internet, la nécessité de créer des sites Web réactifs devient de plus en plus grande. Il y a vingt ans, les développeurs auraient envisagé une version de bureau de leur site Web, mais aujourd'hui, plus de 50 % du trafic Web provient d'appareils tactiles.

Donc, prendre des mesures en fonction de la prise en charge tactile de votre appareil est un concept très important.

const touchSupported = () => ('ontouchstart' in window || DocumentTouch && document instanceof DocumentTouch)

Dans cette ligne, nous vérifions si le document prend en charge l'événement touchstart.

7. Insérez une chaîne HTML après l'élément

En développant des applications Web, il est très courant d'utiliser JavaScript pour mettre à jour le DOM. Il existe quelques méthodes de base pour accomplir le travail, mais lorsque les choses se compliquent, cela peut être difficile à surmonter.

Il s'agit d'une seule ligne de code qui injecte une chaîne HTML immédiatement après l'élément HTML. Avec quelques minutes de réflexion et de recherche sur Google, je suis sûr que vous pourrez trouver une version précédente de ce one-liner.

const insertHTMLAfter = (html, el) => el.insertAdjacentHTML('afterend', html)

8. Mélanger des tableaux Le mélange d'un ensemble de données pendant le développement est une situation courante que vous pouvez rencontrer à tout moment. Malheureusement, il n'existe pas de méthode de mélange intégrée pour les tableaux en JavaScript. Mais voici un one-liner aléatoire que vous pouvez utiliser tous les jours :

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

它利用数组的排序方法，在数组的前一个元素之前或之后进行随机排序。

9、在网页上获取选定的文本

浏览器在全局 windows 对象上有一个名为 getSelection 的内置方法。

使用此方法，你可以创建一个单行，返回网页上突出显示或选定的文本。

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

10、 获取一个随机布尔值

在编程时，尤其是在编写游戏时，有时你会想要随机采取行动。在这种情况下，下面的单行非常方便。

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

上面的单行有 50/50 的机会返回 true 或 false。因为生成的随机数大于 0.5 的概率等于较小的概率。

但是，例如，如果你想获得一个概率为 70% 错误的随机布尔值，那么，你可以简单地将 0.5 更改为 0.7，依此类推。

11、计算数组的平均值

可以使用多种方法计算数组的平均值。但道理对所有人都是一样的。你必须获得数组及其长度的总和；然后除法给出平均值。

const average = (arr) => arr.reduce((a, b) => a + b) / arr.length

在平均单行中，我们使用 reduce 来获取一行中的数组的总和，而不是使用循环。然后，我们将其除以数组长度，这是数组的平均值。

写在最后

今天的内容，就是这样，现在，我想你已经了解了 11 个简单但功能强大的 JavaScript 单行程序。我试着选择那些不是很受欢迎和知名度的东西，这样你就可以学习新东西。我每天都在使用它们，我想对你也会有所帮助。

感谢你的阅读，如果你喜欢它，一定要点赞，如果你对这篇文章有什么想说的，请在留言区告诉我们。

翻译： 杨小二

英文：

https://betterprogramming.pub/11-rare-javascript-one-liners-that-will-amaze-you-331659832301