11 überraschende JavaScript-Einzeiler!

Was würden Sie tun, wenn Sie einen professionellen Entwickler beeindrucken wollten? Es ist ganz einfach: Verwenden Sie einfache Logik und so wenig Code wie möglich, um ein komplexes Problem zu lösen. Mit der Einführung von ES6-Pfeilfunktionen ist es möglich, einzelne Codezeilen zu erstellen, die elegant und einfach aussehen.

In diesem Artikel werde ich 11 seltene, aber wirkungsvolle Einzeiler mit Ihnen teilen. Sind Sie bereit? Beginnen wir mit dem ersten!

1. Ermitteln Sie die Anzahl der Zeichen in einer Zeichenfolge.

Ermitteln Sie die Anzahl der Zeichen. ist ein nützliches Dienstprogramm, das in vielen Situationen nützlich sein kann. Sie können damit die Anzahl der Leerzeichen gefolgt von der Anzahl der Wörter ermitteln oder die Anzahl eines bestimmten Trennzeichens in einer Zeichenfolge ermitteln.

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

Die Idee ist ganz einfach. Wir teilen den String mit dem übergebenen Argument char auf und erhalten die Länge des zurückgegebenen Arrays. Da jedes Mal, wenn die Zeichenfolge geteilt wird, eine Zeichenfolge mehr als die Teilung vorhanden ist, erhalten wir nach Subtraktion von 1 eine einzelne Zeichenanzahl.

2. Überprüfen, ob ein Objekt leer ist

Die Überprüfung, ob ein Objekt leer ist, ist tatsächlich viel schwieriger, als es scheint. Jede Prüfung, ob ein Objekt gleich {} ist, gibt „false“ zurück, auch wenn das Objekt leer ist.

Glücklicherweise macht die einzelne Codezeile unten genau das, was wir wollen.

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

In dieser Zeile prüfen wir, ob die Länge des Objektschlüssels gleich 0 ist und ob das übergebene Argument ein tatsächliches Objekt ist.

3. Warten Sie eine bestimmte Zeit und führen Sie dann

In dieser einzelnen Codezeile werden wir einer asynchronen Programmierung ausgesetzt. Die Idee ist einfach.

Wenn Sie beim Ausführen des Codes eine bestimmte Zeit warten möchten, finden Sie hier den Einzeiler „Wartezeit“:

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

Im Einzeiler „Wartezeit“ erstellen wir ein Versprechen und lösen es nach einer gegebenen Zeit auf Zeit mit der setTimeout-Funktion it.

4. Ermitteln Sie die Differenz in Tagen zwischen zwei Datumsangaben. Datumsangaben sind oft der verwirrendste Teil bei der Entwicklung von Webanwendungen, da es viele Konzepte gibt, die leicht falsch berechnet werden können.

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

Die Logik hinter diesem Einzeiler ist leicht zu verstehen. Wenn zwei Datumsangaben subtrahiert werden, ist der Rückgabewert die Differenz in Millisekunden. Um Millisekunden in Tage umzurechnen, müssen wir sie jeweils durch Millisekunden, Sekunden, Minuten und Stunden dividieren.

5. Weiterleitung zu einer anderen URL

Wenn Sie jemals eine echte Website erstellt haben, bin ich sicher, dass Sie auf Authentifizierungslogik gestoßen sind. Beispielsweise sollten Benutzer ohne Administratorrechte nicht auf die Route /admin zugreifen können. Wenn der Benutzer es versucht, müssen Sie ihn auf eine andere URL umleiten.

const redirect = url => location.href = url

location ist eine Methode für das globale Fensterobjekt, die sich genauso verhält wie wenn der Benutzer auf den Link klickt.

6. Überprüfen Sie, ob Ihr Gerät Touch-Unterstützung bietet

Da immer mehr Geräte mit dem Internet verbunden werden können, wird die Notwendigkeit, responsive Websites zu erstellen, immer größer. Vor zwanzig Jahren hätten Entwickler über eine Desktop-Version ihrer Website nachgedacht, doch heute kommen mehr als 50 % des Web-Traffics von Touch-Geräten.

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

In dieser Zeile prüfen wir, ob das Dokument das Touchstart-Ereignis unterstützt.

7. Fügen Sie nach dem Element eine HTML-Zeichenfolge ein.

Bei der Entwicklung von Webanwendungen wird häufig JavaScript zum Aktualisieren des DOM verwendet. Es gibt einige grundlegende Möglichkeiten, die Arbeit zu erledigen, aber wenn die Dinge kompliziert werden, kann es schwierig sein, sie zu überwinden.

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

8. Arrays mischen

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