惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

G
Google Developers Blog
阮一峰的网络日志
阮一峰的网络日志
博客园 - 聂微东
F
Fortinet All Blogs
H
Help Net Security
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
D
DataBreaches.Net
MyScale Blog
MyScale Blog
B
Blog
I
InfoQ
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
GbyAI
GbyAI
Google DeepMind News
Google DeepMind News
IT之家
IT之家
The GitHub Blog
The GitHub Blog
有赞技术团队
有赞技术团队
博客园_首页
L
LangChain Blog
V
V2EX
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
T
The Blog of Author Tim Ferriss
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Microsoft Azure Blog
Microsoft Azure Blog
博客园 - Franky

韩小韩博客

你还在用真实邮箱注册网站?等等,你真的想清楚了吗? IPFS星际文件系统 最新二合一收款码 - 物理合并版 从Hexo到Astro博客1分钟迁移指南 Astro 添加 Waline 评论组件 腾讯云 EdgeOne Pages 实测对比:能否成为国内开发者的 Cloudflare Pages 最佳平替? Astro 中使用 Lenis 增加鼠标滚动阻尼感 一组手机和电脑动态壁纸分享【分享】 Astro 添加 Twikoo 评论组件 Astro主题-优雅的vhAstro-Theme【使用文档】 Fetch的GET、POST简单HTTP请求封装 一些实拍的手机壁纸 大理And威海【图】 很喜欢西湖的水【转自:狮子狮子鱼】 Tarot-塔罗牌占卜 Web Watermark 图片添加水印在线小助手 HanAnalytics访问分析Web统计托管于(Cloudflare Pages) 基于AI的微博动态心情分析 阿里云免费用9年ecs教程【适合轻量化服务如frp】 Cloudflare优选IP➕DnsPod的DDNS自动切换 混沌神器Clash全家桶 卷王都在用的变态休息法 NodeJs文本相似度去重脚本 骤雨重山无限存储图床托管于(Cloudflare Pages) 分享好看的天空和云(长期更新) Typecho转到Hexo(主题由Typecho-Joe-Theme转Butterfly主题) Typecho评论导出为Hexo的Valine、Twikoo等评论所支持的JSON文件 Safari浏览器内容被地址栏、菜单栏或工具栏遮挡导致的兼容问题 拼夕夕快速提现100元攻略 2024 平安喜乐
最实用的JavaScript一行代码
.𝙃𝙖𝙣 · 2026-04-11 · via 韩小韩博客

前些年的段子里,总有一些主考官的思想格局打不开,抛出这样的问题:让我在10秒钟内记住你。于是就有了,被打耳光的,被亲的,被扒衣服的,摔手机的······但作为程序员,要怎么用代码震惊的别人呢? Talk is cheap, show me the code! 很简单:用简单的逻辑和尽可能少的代码行来解决一个复杂的问题。随着 ES6 箭头函数的引入,可以创建看起来优雅而简单的单行代码。 在今天的文章中,我将与你一起来学习 11 个罕见但功能强大的单行代码。现在,准备好,让我们开始吧!

文字复制到剪贴板

const copyText = async (text) => await navigator.clipboard.writeText(text);
copyText("单行代码 前端世界");

Clipboard API 它的所有操作都是异步的,返回 Promise 对象,不会造成页面卡顿。而且,它可以将任意内容(比如图片)放入剪贴板。

获取字符串中的字符数

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

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

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

检查对象是否为空

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

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

幸运的是,下面的单行代码正是我们想要的。 在这一行中,我们检查对象的键长度是否等于 0,以及传递的参数是否为实际对象。

等待一段时间再执行

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

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

在等待单行中,我们创建一个承诺并在给定的时间后使用 setTimeout 函数解决它。

获取两个日期之间的日差

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

在开发 Web 应用程序时,日期通常是实现起来最令人困惑的部分,因为有许多概念很容易被误算。

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

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

检查设备上的触摸支持

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

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

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

在元素后插入 HTML 字符串

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

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

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

随机排列数组

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

在开发中打乱一组数据是一个常见的情况,你可以随时遇到,不幸的是,JavaScript 中没有内置数组的 shuffle 方法。

但是,这里有一个你可以每天使用的 shuffle one-liner 它利用数组的排序方法,在数组的前一个元素之前或之后随机排序。

获取随机布尔值

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

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

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

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

计算数组的平均值

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

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

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

查询某天是否为工作日

const isWeekday = (date) => date.getDay() % 6 !== 0;
isWeekday(new Date(2023, 02, 01));
// true

我们自己写日历组件时经常会用到,判断某个日期是否为工作日;周一至周五为工作日:

转换华氏/摄氏

// 将华氏温度转换为摄氏温度
const fahrenheitToCelsius = (fahrenheit) => ((fahrenheit - 32) * 5) / 9;
fahrenheitToCelsius(50);
// 10

// 将摄氏温度转华氏温度
const celsiusToFahrenheit = (celsius) => (celsius * 9) / 5 + 32;
celsiusToFahrenheit(100);
// 212

处理温度有时会晕头转向。这两个函数则能帮助大家将华氏温度转换为摄氏温度,以及将摄氏温度转换为华氏温度。

每隔4个空1格美团卷码

[..."088896520132"].reduce(
  (res, itm, idx) => (res += idx % 4 === 1 ? `${itm} ` : itm),
  "",
);
// 08 8896 5201 32

检查当前选项卡是否在后台

const isTabActive = () => !document.hidden;

isTabActive();
// true|false

检查设备类型

const judgeDeviceType = () =>
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(
    navigator.userAgent,
  )
    ? "Mobile"
    : "PC";

judgeDeviceType(); // PC | Mobile

END

JS Javascript