当前位置:首页 > 技术分析 > 正文内容

20 个让人惊叹的 JavaScript 单行代码技巧,效率瞬间提升

ruisui8818小时前技术分析2

掌握一些简洁有力的单行代码技巧可以大幅提高编码效率,让JavaScript代码更加优雅。分享 20 个实用且令人惊叹的 JavaScript 单行代码,可能为你的工作带来便利。

1. 数组去重

const uniqueArray = [...new Set([1, 2, 3, 3, 4, 4, 5])]; // [1, 2, 3, 4, 5]

利用 ES6 的 Set 对象和扩展运算符,轻松实现数组去重,比传统的循环方法更简洁高效。

2. 快速交换两个变量

[a, b] = [b, a];

使用数组结构赋值,无需临时变量即可交换两个值,告别传统的三步交换法。

3. 检查对象是否为空

const isEmpty = obj => Object.keys(obj).length === 0;

简单一行判断对象是否为空,避免了繁琐的属性遍历。

4. 从数组中获取随机元素

const randomItem = arr => arr[Math.floor(Math.random() * arr.length)];

随机获取数组元素的简洁写法,特别适用于抽奖、随机展示等场景。

5. 生成指定范围的随机整数

const randomInteger = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

一行代码解决生成指定范围随机数的需求,常用于模拟数据生成。

6. 将 RGB 转换为十六进制颜色

const rgbToHex = (r, g, b) => '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

在前端颜色处理中非常实用,可以快速实现颜色格式转换。

7. 复制到剪贴板

const copyToClipboard = text => navigator.clipboard.writeText(text);

现代浏览器 API 让复制文本到剪贴板变得简单,无需引入第三方库。

8. 检查设备类型

const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

快速判断用户设备类型,有助于实现响应式体验。

9. 平滑滚动到页面顶部

const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });

一行代码实现平滑滚动回顶部,提升用户体验。

10. 获取 URL 查询参数

const getQueryParam = param => new URLSearchParams(window.location.search).get(param);

使用内置的 URLSearchParams API,轻松解析 URL 参数。

11. 数组平均值计算

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

使用 reduce 方法快速计算数组平均值,简洁且高效。

12. 检查元素是否在视口内

对于实现懒加载、无限滚动等功能非常有用。

13. 数组扁平化

const flatten = arr => [].concat(...arr.map(item => Array.isArray(item) ? flatten(item) : item));

递归方式处理嵌套数组,将多维数组转为一维数组。

14. 计算数组中元素出现次数

const countOccurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0);

统计特定元素在数组中出现的次数,数据分析场景中很实用。

15. 随机生成十六进制颜色

const randomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0')}`;

生成随机颜色,在需要动态颜色的场景下非常有用。

16. 检查日期是否为周末

const isWeekend = date => [0, 6].includes(date.getDay());

快速判断给定日期是否为周末,用于日期处理和日历应用。

17. 获取两个日期之间的天数差

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

计算日期差,在预订系统、倒计时等场景中很常用。

18. 将字符串首字母大写

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

文本格式化的常用操作,让展示更加规范。

19. 数组洗牌(随机排序)

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

简单实现数组随机排序,适用于卡片游戏、随机展示等场景。

20. 防抖函数

const debounce = (fn, delay) => { let timeout; return (...args) => { clearTimeout(timeout); timeout = setTimeout(() => fn(...args), delay); }; };

用于处理频繁触发的事件(如搜索框输入、窗口调整大小等),提高性能。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/3889.html

标签: js 防抖函数
分享给朋友:

“20 个让人惊叹的 JavaScript 单行代码技巧,效率瞬间提升” 的相关文章

Git 分支管理策略与工作流程

(预警:因为详细,所以行文有些长,新手边看边操作效果出乎你的预料)团队开发中,遵循一个合理、清晰的Git使用流程,是非常重要的。否则,每个人都提交一堆杂乱无章的commit,项目很快就会变得难以协调和维护。看完这篇文章后,涉及GIT的工作中就会减少因为规范问题导致工作出错,当然如果你现在暂时还未有合...

jvm疯狂吃内存,到底是谁的锅?

jvm应该是每一个java程序员都需要掌握的内容,但是在没有遇到问题之前,很多都是基于理论的,唯有实战才能增加个人的知识储备。本文是从一个角度来分析是谁在狂吃内存,希望对你有所帮助。本文是易观技术人员注意到一台开发机上各个微服务进程占用内存很高,随即便展开了调查......ps:本文来源于:http...

高效使用 Vim 编辑器的 10 个技巧

在 Reverb,我们使用 MacVim 来标准化开发环境,使配对更容易,并提高效率。当我开始使用 Reverb 时,我以前从未使用过 Vim。我花了几个星期才开始感到舒服,但如果没有这样的提示,可能需要几个月的时间。这里有十个技巧可以帮助你在学习使用 Vim 时提高效率。1. 通过提高按键重复率来...

15款测试html5响应式的在线工具

手机、平板灯手持设备的增多,网站要顺应变化,就必须要做响应式开发,响应式网站最大的特点在于可以在不同设备下呈现不同的布局,是基于html5+css3技术,目前越来越多的网站开始采用了响应式设计,而下面15款工具可以方便测试你的html5响应式效果。Responsinatorhttp://www.re...

HTML5最新版本介绍

HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本,由一群自由思想者设计,最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。 HTML 5不只是 HTML规范的最新版本,它是用于生成现代 Web内容的一系列相关技术的总称,其中最重要的三个技术是:HTML5核心规范...

摄影后期必看 | PS插件camera raw 16.4教程 | 范围蒙版

范围蒙版Camera Raw 【蒙版】模块中提供了三个范围蒙版工具,可以通过特定的范围来创建蒙版。此次新增的【范围蒙版】大大加强了acr插件对局部调整的能力。点击下拉小箭头可以看到【颜色范围】,可用于快速选择想要编辑的颜色。快捷键:Shift + C【明亮度范围】,可用于快速选择想要调整的明亮度。快...