11 个 JavaScript 的单行代码

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

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

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

这个想法很简单,我们使用传递的参数 char 拆分字符串并获取返回数组的长度。由于每次将字符串拆分,都会比拆分器多一个;所以减去 1,我们有一个 characterCount 单行。

2、检查对象是否为空

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

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

console.log(isEmpty({}))    //true
console.log(isEmpty({not: "empty"}))  //false

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

3、等待一段时间再执行

在这一行中,我们将通过一些异步编程来弄脏我们的代码。这个想法很简单,在运行代码时,如果你想等待一定的时间,这里是等待单行:

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


daysBetween(new Date('2019-1-9'),new Date('2021-8-16')) //950

当两个日期相减时,返回值是以毫秒为单位的差值,要将毫秒转换为天,我们必须将其除以毫秒、秒、分钟和小时。

5、重定向到另一个 URL

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

这个单线正是我上面提到的情况,但我认为你可以找到更多的用例。

const redirect = url => location.href = url

redirect("https://www.baidu.com/")

location 是全局窗口对象的方法,设置 href 属性的行为与用户单击链接相同。

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

随着可以连接到互联网的设备越来越多,创建响应式网站的必要性也在增加。20 年前,开发者应该考虑网站的桌面版本,但今天超过 50% 的网络流量来自触摸移动设备。因此,基于设备的触控支持采取一些行动是一个非常重要的概念。

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


console.log(touchSupported())   //true  or false

7、 在元素后插入 HTML 字符串

这是一个在 HTML 元素之后立即注入 HTML 字符串的单行代码。

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


insertHTMLAfter(`<p> Hi, I'am ${name} </p>` , title)

8、随机排列数组

在开发中打乱一组数据是一个常见的情况,这里有一个你可以每天使用的 shuffle one-liner:

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


shuffle([1,2,3,4,5]) //[5,3,2,1,4]

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

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

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

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


console.log(getSelectedText()) //"选定的文本"

10、获取随机布尔值

在开发时,尤其是在写游戏代码时,有时,我们会想随机采取行动。在这些情况下,下面的单行代码非常方便。

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


console.log(getRandomBoolean()) //true or false

上面的单行代码有 50/50 的机会返回真或假。因为生成的随机数大于0.5的概率等于变小的概率。

然而,例如,如果你想得到一个概率为 70% 的随机布尔值,那么你可以简单地将 0.5 更改为 0.7 等等。

11、计算数组的平均值

可以使用多种方法计算数组的平均值。但逻辑对所有人都是一样的,我们必须得到数组及其长度的总和;然后,通过除法给出平均值。

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


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

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

来自微信公众号wed前端开发

这里有时候会分享一些很实用的代码知识,有需要的可以关注学习一下哦

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值