11 个让你惊叹的罕见 JavaScript One-Liner

系统管理员 2022-09-06 04:56 10阅读 0赞

![7d2b2571786fcc7eb523a8411393919d.png][]英文 | https://betterprogramming.pub/11-rare-javascript-one-liners-that-will-amaze-you-331659832301

翻译 | 杨小二

如果你想给专业开发人员留下深刻印象，你会怎么做？很简单：用简单的逻辑和尽可能少的代码来解决一个复杂的问题。随着 ES6 箭头函数的引入，可以创建看起来优雅和简单的单行代码。

在本文中，我将与你分享11 种罕见但功能强大的 one-liner。你准备好了吗？让我们从第一个开始吧！

**1、获取字符串中的字符数**

获取字符数是一个有用的实用程序，在许多情况下都很有用。你可以使用它来获取空格数和随后的单词数，或者这可用于获取字符串中某个分隔符的计数。

![b27acb136432dd91db8c81b417bc1a1a.png][]

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

这个想法非常简单。我们使用传递的参数 char 拆分字符串并获得返回数组的长度。因为每一次分割字符串，都会比分割器多一根；所以减去 1，我们有一个 characterCount 单行。

**2、 检查对象是否为空**

检查对象的空性实际上比看起来要困难得多。每次检查对象是否等于 \{\} 都会返回 false，即使该对象为空。

幸运的是，下面的单行代码正是我们想要的。

![02cf63597602a419a3049c1649902108.png][]

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

在这一行中，我们检查对象的键的长度是否等于 0，以及传递的参数是否为实际对象。

**3、等待一定时间后执行**

在这个单行代码中，我们将接触一些异步编程。这个想法很简单。在运行代码时，如果你想等待一定的时间，这里是wait one-liner：

![f8a434f077611f61d6eb55a5066c4a59.png][]

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

在wait one-liner中，我们创建一个promise并在给定的时间后使用setTimeout函数解决它。

**4、获取两个日期之间的天差**

在开发 Web 应用程序时，日期通常是最容易混淆的部分，因为有许多概念很容易被误算。

这是一个强大的单行程序来计算两个日期之间的天差。但还有更多的事情要做。和我一样，你可以创建自己的单线来计算月、年差等。

![23c6fe4eab42e60ecb2ed5caff00617f.png][]

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

这种单行背后的逻辑很容易理解。当两个日期相减时，返回值是以毫秒为单位的差值。要将毫秒转换为天，我们必须将其分别除以毫秒、秒、分钟和小时。

**5、重定向到另一个 URL**

如果你曾经创建过一个真实的网站，我敢肯定你会遇到身份验证逻辑。例如，非管理员用户不应该能够访问 /admin 路由。如果用户尝试，那么，你必须将其重定向到另一个 URL。

这种单线正好适用于我上面提到的情况，但我认为你可以找到更多的用例。

![adbccaaa70efa9f49446ef2e8ea14a86.png][]

const redirect = url => location.href = url

location 是全局 window 对象上的一个方法，设置 href 属性的行为与用户点击链接的行为相同。

**6、检查设备上的触摸支持**

随着可以连接到互联网的设备越来越多，创建响应式网站的必要性也越来越高。20 年前，开发者应该考虑过桌面版网站，但今天超过 50% 的网络流量来自触摸设备。

因此，基于设备的触摸支持采取一些行动是一个如此重要的概念。

![4a1b92862ec5378d6b473203e75e12ae.png][]

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

在这一行中，我们正在检查文档是否支持 touchstart 事件。

**7、在元素后插入一串 HTML**

开发 Web 应用程序，使用 JavaScript 更新 DOM 是一件很常见的事情。有一些基本的方法可以完成工作，但是当情况变得复杂时，就很难克服。

这是在 HTML 元素之后立即注入一串 HTML 的单行代码。通过几分钟的思考和谷歌搜索，我相信你可以找到这个单行的之前版本。

![39684ca52156846c6a53acfee091a6f0.png][]

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

**8、打乱数组**

在开发中混洗一组数据是你随时可能遇到的常见情况，不幸的是，JavaScript 中没有内置数组的混洗方法。

但是，这是你可以每天使用的 shuffle one-liner：

![389ea89cfe12b614cbd0e20768b7e0ff.png][]

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

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

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

浏览器在全局 windows 对象上有一个名为 getSelection 的内置方法。使用此方法，你可以创建一个单行，返回网页上突出显示或选定的文本。

![6d28a4ee7dc6131384b39c601aba7af6.png][]

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

**10、 获取一个随机布尔值**

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

![e628214ccc79636b0f3cf9e097d831bb.png][]

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

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

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

**11、计算数组的平均值**

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

![cdea1fa6bffe3ac8626ef7fe98e36b55.png][]

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

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

**写在最后**

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

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

#  #

**学习更多技能**

**请点击下方公众号**

![b534033275f8a709c2ef60c37b80f6ab.gif][]

![8e610f5a7a88db5809654d3ef9eb8299.png][]

![2eab18c7a30073aabb9fc5448fc6751e.png][]

[7d2b2571786fcc7eb523a8411393919d.png]: /images/20220829/17dd258f12da4f36ad1338a5293178df.png
[b27acb136432dd91db8c81b417bc1a1a.png]: /images/20220829/84765a2f7f754f9a93019196357c9adb.png
[02cf63597602a419a3049c1649902108.png]: /images/20220829/46cd04ca68474a939c73836377b4f962.png
[f8a434f077611f61d6eb55a5066c4a59.png]: /images/20220829/dbe7efce066f476c925dbd0800534522.png
[23c6fe4eab42e60ecb2ed5caff00617f.png]: /images/20220829/247d259bf6b642e5821cfd41a4973a3e.png
[adbccaaa70efa9f49446ef2e8ea14a86.png]: /images/20220829/48a9270ade52480d8a16cb39d1e1c314.png
[4a1b92862ec5378d6b473203e75e12ae.png]: /images/20220829/be420ea7019a4a8eb8ee9d74dd8d4ac8.png
[39684ca52156846c6a53acfee091a6f0.png]: /images/20220829/0d0113aaada247fbaabf3b0938b4964a.png
[389ea89cfe12b614cbd0e20768b7e0ff.png]: /images/20220829/31f6f23a50ea41c7bd2ff48b24fe1290.png
[6d28a4ee7dc6131384b39c601aba7af6.png]: /images/20220829/ad90d4f86e81486f855c4947447e2442.png
[e628214ccc79636b0f3cf9e097d831bb.png]: /images/20220829/b21693348c4647f582d827e31864e11a.png
[cdea1fa6bffe3ac8626ef7fe98e36b55.png]: /images/20220829/dcae2aae9eb547fd8e442292a2061c58.png
[b534033275f8a709c2ef60c37b80f6ab.gif]: /images/20220829/de4fa6de7fd247f8a9414e06ed63a377.png
[8e610f5a7a88db5809654d3ef9eb8299.png]: /images/20220829/b1f9fb906e0d4f33858d55fc28987f03.png
[2eab18c7a30073aabb9fc5448fc6751e.png]: /images/20220829/cf7f54e638864a82a454375ab8e8547d.png