厉害的javascript单行线，让你看起来像个专家

学习一些伟大的单口相声，以便在你的下一个项目中使用

Javascript的语法和内置方法使我们能够在代码中减少很多不必要的行数，写出简短、易读的代码。在这篇文章中，我们将把这种简单性又向前推进了一步，看看你在哪里可以写出单行的解决方案来解决你在网络开发中遇到的一些常见用例和问题。不要犹豫，偷用这15个Javascript单行代码，为你的应用程序编写快速和简单的代码。

反转一个字符串

你可以使用split,join, 和reverse 方法在一行中逆转一个字符串。

const stringReverse = str => str.split("").reverse().join("");

stringReverse("Welcome to Javascript")
//tpircsavaJ ot emocleW

获取一个数组的平均数

Javascript reducer允许在一行中计算若干数组的平均数。

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

average([21, 56, 23, 122, 67])
//57.8

在编写一些问题的单行解决方案时，如寻找数组中的总和或最大值，Reduce方法相当有用。

获取一个过去七天的数组

你想在你的程序中使用一个过去七天（包括今天）的数组吗？这段Javascript代码只用一行就轻松地创建了数组。

const pastWeek = [...Array(7).keys()].map(days => new Date(Date.now() - 86400000 * days))

如果你用加号来代替减号，你可以得到一个包含未来七天的数组。而且，它不一定只是上周的日期。你可以通过替换Date.now()来获得任何日期之前/之后的7天的日期。

注意，这里使用的86400000是一天中的毫秒数。

大写字符串

尽管Javascript没有提供一个内置的大写字母方法，但我们自己编写一个字符串的大写字母方法只需一行。

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

capitalize("javascript one-liners are fun")
//Javascript one-liners are fun

删除数组中的重复内容

我们知道，Javascript中的集合只存储唯一的项目。我们可以利用这种行为的优势来删除数组中的重复项。然而，它只适用于存储原始数据的数组。所以你必须写一个多行的解决方案来删除存储对象的数组中的重复项。但是，这仍然是一个相当不错的方法，可以在简单的情况下去除重复的数据。

const removeDuplicates = (arr) => [...new Set(arr)]

removeDuplicates([31, 56, 12, 31, 45, 12, 31])
//[ 31, 56, 12, 45 ]

将小数点舍入到一定的小数位上

在Javascript中，将小数点四舍五入到固定的小数点上是一项棘手的工作。尽管内置的toFixed()方法可以很容易地进行这种转换，但由于浮点运算的工作方式，在某些情况下它会产生奇怪的结果。

Number((2.935).toFixed(2)) //2.94
Number((12.349345).toFixed(4)) //12.2493
Number((2.5398).toFixed(3)) //2.540

Number((1.005).toFixed(2)) //outputs 1 instead of 1.01
Number((1.555).toFixed(2)) //outputs 1.55 instead of 1.56

为了避免在我们的代码中出现这种意外的行为，我们可以用指数符号来表示数字，并使用Math.round()来获得小数点后四舍五入到指定的小数位数的结果。

const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)

round(1.005, 2) //1.01
round(1.555, 2) //1.56

生成一个随机的ID

这个简单的函数使用Math.random()生成了一个随机的ID。由于Math.random()不能保证所有生成的数字都是唯一的，这种方法在生产中使用并不是100%安全的。但在开发过程中使用它来快速获得一个ID以完成执行和测试应用是没有坏处的。

const randomID = Math.random().toString(36).substring(2)

检查用户是否已经滚动到页面底部

如果你想在用户滚动到页面底部时显示/执行一些东西，用这个来查找用户当前是否在底部。

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

切换一个元素的显示

你可以用单行方法在隐藏和显示一个元素之间轻松切换。

const toggle = element => element.style.display = (element.style.display === "none" ? "block" : "none")

生成一个随机的十六进制颜色

这个方法使用Math.random()和padEnd()生成一个随机的十六进制代码。只要你想在你的程序中显示一个随机颜色，就可以使用这个方法。

const hexColor = () => "#" + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0')

滚动到页面顶部

你可以使用scrollTo()方法在Javascript中滚动到页面的顶部。它接受Javascript应该滚动到的位置的X和Y坐标。因此，当我们把0传给X和Y时，它就会滚动到页面的顶部。

const toTop = () => window.scrollTo(0, 0)

获取两日之间的天数

在这个单线实现中，你应该把两天转换成基于时间的表示，然后找出它们的差值。然后你可以用它除以一天中的毫秒数，得到天数。

const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)

dayDif(new Date("2020-09-23"), new Date("2020-10-01"))
//8

清除所有cookies

你可以通过将它们的到期日设置为已经过去的日期来清除应用程序存储的所有cookies。因此，如果你把过期日期设置为Javascript时间系统中的第一个日期，系统就会自动使cookie过期。而你可以随着上一步清除存储在cookie中的数据。

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

从文本中剥离HTML

在接受用户输入和其他使用情况下，你可能想在你处理的文本中剥离任何HTML元素。在DOMParser的帮助下，这只需要一行。

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

检测黑暗模式

最后，如果你想检测用户是否在他们的浏览器中启用了黑暗模式，可以使用这个单行解决方案。

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

最后的话...

在这篇文章中，我们给了你15个单行的Javascript解决方案，以解决我们在前端开发中经常遇到的问题。我希望你觉得这些解决方案很有趣。不要忘记使用它们来减少你的代码行数。甚至是为了看起来很酷

谢谢你的阅读!

15个Javascript单行代码介绍及实例