0

0

11个令人惊讶的JavaScript One-Liner!

藏色散人

藏色散人

发布时间:2021-12-06 15:15:26

|

3170人浏览过

|

来源于Web前端开发

转载

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

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

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

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

a134a024da57a8b24377776026aac96.png

立即学习Java免费学习笔记(深入)”;

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

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

2、 检查对象是否为空

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

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

89ff1e01da3af75acf9675395506f5f.png

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

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

3、等待一定时间后执行

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

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

a2e71ae9bcccd86a3d401dca60c90eb.png

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

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

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

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

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

9d9c11423ac8ed07674598c4c216c43.png

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

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

5、重定向到另一个 URL

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

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

a6e106966ede6d21b4a70a77d6ee5e7.png

const redirect = url => location.href = url

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

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

Replit Ghostwrite
Replit Ghostwrite

一种基于 ML 的工具,可提供代码完成、生成、转换和编辑器内搜索功能。

下载

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

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

f2634c06626b948df81650414903456.png

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

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

7、在元素后插入一串 HTML

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

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

c3c900ed14ed162ff74fe681d0434cd.png

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

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

ee2ba0b38a19f4a6db5e5635f0a5058.png

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

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

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

浏览器在全局 windows 对象上有一个名为 getSelection 的内置方法。

使用此方法,你可以创建一个单行,返回网页上突出显示或选定的文本。

5d0357e480c244ee2b3af7e7c72df0b.png

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

10、 获取一个随机布尔值

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

6f1b3108c8221a92526bbb48bd3c100.png

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

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

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

11、计算数组的平均值

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

b29f2bccb3273ea58d72f216370a7ce.png

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

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

106

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

196

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

231

2025.12.24

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

638

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

219

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1560

2023.10.24

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

645

2023.11.24

java读取文件转成字符串的方法
java读取文件转成字符串的方法

Java8引入了新的文件I/O API,使用java.nio.file.Files类读取文件内容更加方便。对于较旧版本的Java,可以使用java.io.FileReader和java.io.BufferedReader来读取文件。在这些方法中,你需要将文件路径替换为你的实际文件路径,并且可能需要处理可能的IOException异常。想了解更多java的相关内容,可以阅读本专题下面的文章。

1088

2024.03.22

Golang 测试体系与代码质量保障:工程级可靠性建设
Golang 测试体系与代码质量保障:工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

6

2026.02.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.2万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号