网站首页 > 文章精选 正文
掌握一些简洁有力的单行代码技巧可以大幅提高编码效率,让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); }; };
用于处理频繁触发的事件(如搜索框输入、窗口调整大小等),提高性能。
猜你喜欢
- 2025-05-08 100%开源免费的低代码/可视化数据分析、数据展示平台
- 2025-05-08 Spring Boot跨域问题终极解决方案:3种方法根治CORS报错
- 2025-05-08 永久免费内网穿透很简单,一看就明白
- 2025-05-08 Odoo 用户菜单架构解析及创建和管理实战
- 2025-05-08 关于编码的那些事 - URL 编码(编码url是什么意思)
- 2025-05-08 如何使用java.net.URLConnection发起和处理HTTP请求
- 2025-05-08 崩溃!代码总掉链子?6 个 JavaScript 技巧助你稳操胜券
- 2025-05-08 抓狂!代码总出错?5 个 JavaScript 技巧助你逆风翻盘
- 2025-05-08 前端性能拉胯?这 8 个 JavaScript 技巧让你的代码飞起来!
- 2025-05-08 崩溃!页面卡顿总翻车?6 个 JavaScript 技巧教你逆风翻盘
- 最近发表
-
- 100%开源免费的低代码/可视化数据分析、数据展示平台
- Spring Boot跨域问题终极解决方案:3种方法根治CORS报错
- 永久免费内网穿透很简单,一看就明白
- Odoo 用户菜单架构解析及创建和管理实战
- 关于编码的那些事 - URL 编码(编码url是什么意思)
- 20 个让人惊叹的 JavaScript 单行代码技巧,效率瞬间提升
- 如何使用java.net.URLConnection发起和处理HTTP请求
- 崩溃!代码总掉链子?6 个 JavaScript 技巧助你稳操胜券
- 抓狂!代码总出错?5 个 JavaScript 技巧助你逆风翻盘
- 前端性能拉胯?这 8 个 JavaScript 技巧让你的代码飞起来!
- 标签列表
-
- newcoder (56)
- 字符串的长度是指 (45)
- drawcontours()参数说明 (60)
- unsignedshortint (59)
- postman并发请求 (47)
- python列表删除 (50)
- 左程云什么水平 (56)
- 计算机网络的拓扑结构是指() (45)
- 稳压管的稳压区是工作在什么区 (45)
- 编程题 (64)
- postgresql默认端口 (66)
- 数据库的概念模型独立于 (48)
- 产生系统死锁的原因可能是由于 (51)
- 数据库中只存放视图的 (62)
- 在vi中退出不保存的命令是 (53)
- 哪个命令可以将普通用户转换成超级用户 (49)
- noscript标签的作用 (48)
- 联合利华网申 (49)
- swagger和postman (46)
- 结构化程序设计主要强调 (53)
- 172.1 (57)
- apipostwebsocket (47)
- 唯品会后台 (61)
- 简历助手 (56)
- offshow (61)