点击上方 前端瓶子君,关注公众号

回复算法,加入前端编程面试算法每日一题群

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

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

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

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

3、等待一定时间后执行

在这个单行代码中,我们将接触一些异步编程。这个想法很简单。

在运行代码时,如果你想等待一定的时间,这里是wait one-liner:

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

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

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

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

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

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

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

5、重定向到另一个 URL

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

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

const redirect = url => location.href = url

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

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

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

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

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

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

7、在元素后插入一串 HTML

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

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

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

8、打乱数组在开发中混洗一组数据是你随时可能遇到的常见情况,不幸的是,JavaScript 中没有内置数组的混洗方法。但是,这是你可以每天使用的 shuffle one-liner:

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 单行程序。我试着选择那些不是很受欢迎和知名度的东西,这样你就可以学习新东西。我每天都在使用它们,我想对你也会有所帮助。

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

翻译 | 杨小二

来自:Web前端开发

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

最后

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」,加入前端编程源码算法群,每日一道面试题(工作日),第二天瓶子君都会很认真的解答哟!

回复「交流」,吹吹水、聊聊技术、吐吐槽!

回复「阅读」,每日刷刷高质量好文!

如果这篇文章对你有帮助,「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

11 个让你惊叹的罕见 JavaScript One-Liner相关推荐

  1. 11个你不应该错过的JavaScript库

    11个你不应该错过的JavaScript库 近年来,我们大家都看到JavaScript像野火一样传播,设法进入编程的每个领域,成为世界上最常用的语言之一. 同样,JavaScript框架和库的数量呈指 ...

  2. Node.js 11.12.0 发布,服务器端的 JavaScript 运行环境

    Node.js 11.12.0 发布了.Node.js 是一个基于 Chrome V8 引擎的 JavaScript runtime,使用高效.轻量级的事件驱动.非阻塞 I/O 模型. 新版本更新亮点 ...

  3. Node.js 11.14.0 发布,服务器端的 JavaScript 运行环境

    Node.js 11.14.0 发布了.Node.js 是一个基于 Chrome V8 引擎的 JavaScript runtime,使用高效.轻量级的事件驱动.非阻塞 I/O 模型. 新版本更新亮点 ...

  4. LeetCode题库11:盛最多水的容器——JavaScript解答

    题目描述: 给定 n 个非负整数 a1,a2,-,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0).找出其中的 ...

  5. 《JavaScript权威指南第7版》第11章 JavaScript标准库

    第11章 JavaScript标准库 11.1 Set和Map 11.1.1 Set类 11.1.2 Map类 11.1.3 WeakMap和WeakSet 11.2 类型数组和二进制数据 11.2. ...

  6. JavaScript权威指南 第11章JavaScript标准库

    JavaScript权威指南 第11章JavaScript标准库 第11章 JavaScript标准库 11.1 集合与映射 11.1.1 Set类 11.1.2 Map类 11.1.3 WeakMa ...

  7. JavaScript 中的函数式编程实践

    为什么80%的码农都做不了架构师?>>>    基础知识 函数式编程简介 说到函数式编程,人们的第一印象往往是其学院派,晦涩难懂,大概只有那些蓬头散发,不修边幅,甚至有些神经质的大学 ...

  8. 问题11:web前端开发规范手册(转)

    一.规范目的 1.1  概述 ..................................................................................... ...

  9. 未找到beta版怎么解决_刚刚,谷歌正式发布Android 11 Beta版,带来多项重磅更新...

    作者 | 安卓开发者博客 译者 | 核子可乐 策划 | 小智 转发链接:https://mp.weixin.qq.com/s/gp2XZGe69KDMAtsOeu56YA 前言 今日,谷歌安卓开发者博 ...

最新文章

  1. 线段树分裂与合并 ---- 树上差分 P4556 [Vani有约会]雨天的尾巴 /【模板】线段树合并
  2. ngx_lua 金山项目 黄雀
  3. 这就是你在妈妈肚子里尿尿的样子 | 今日最佳
  4. 软件工程——个人课程总结
  5. python中格式化字符串
  6. javascript 中面向对象实现 如何继承
  7. 美女DBA带你了解PostgreSQL用户及角色
  8. 数字思维:改变世界的4个方程
  9. 如何搭建测试平台?理清思路很重要
  10. Python基础:内置异常(未完待续)
  11. Nginx 作为Http代理服务器配置
  12. 线切割软件测试工资,线切割自动编程软件可以得到免费测试版
  13. ffmpeg百度云下载地址(最新版)
  14. java集合试题_Java练习题 - 集合
  15. STM32F205 STM32F207 STM32F215 STM332F217 用户手册,使用手册,编程手册三合一下载地址
  16. fastboot与fastbootd介绍
  17. SharedPreferences in credential encrypted storage are not available until after user is unlocked
  18. scratch 好玩的大鱼吃小鱼
  19. R语言——ggplot2的绘图逻辑
  20. 10个类脑计算最值得关注玩家 |量子位智库报告(附下载)

热门文章

  1. 两分钟速览谷歌2023IO大会:AI军备竞争,全线出击
  2. 世界杯对阵表 mysql_求世界杯对阵表
  3. 阿里云 龙珠机器学习训练营Task1:机器学习算法(一): 基于逻辑回归的分类预测
  4. 高端大气上档次的网站
  5. 2021年中国阴极铜产量及重点企业对比分析:江西铜业vs铜陵有色vs云南铜业[图]
  6. 快速沃尔什变换(FWT)讲解 解决集合卷积的方法
  7. 菜鸟网络业务支撑平台
  8. windows7更换系统时间服务器,Windows7系统更改时间同步服务器
  9. 万达文旅重起炉灶 王健林瞄准红色文旅
  10. CMU 15-445/645-Note4-执行篇-Sort