编程 25个实用的JavaScript单行代码片段

2024-11-18 04:59:49 +0800 CST views 503

25 个杀手级 JavaScript 单行代码让你看起来像个专业人士

今天我将与你分享 25 个单行 JavaScript 代码片段,以提升你的 JavaScript 知识技能,并帮助你在开发中提升效率。

1. 将内容复制到剪贴板

const copyToClipboard = (content) => navigator.clipboard.writeText(content);
copyToClipboard("Hello fatfish");

2. 获取鼠标选择

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

3. 打乱数组

const shuffleArray = (array) => array.sort(() => Math.random() - 0.5);
shuffleArray([1, 2, 3, 4, -1, 0]);

4. 将 rgba 转换为十六进制

const rgbaToHex = (r, g, b) => "#" + [r, g, b].map(num => parseInt(num).toString(16).padStart(2, '0')).join('');
rgbaToHex(0, 0, 0); // #000000

5. 将十六进制转换为 rgba

const hexToRgba = hex => {
  const [r, g, b] = hex.match(/\w\w/g).map(val => parseInt(val, 16));
  return `rgba(${r}, ${g}, ${b}, 1)`;
};
hexToRgba('#ff007f'); // rgba(255, 0, 127, 1)

6. 获取多个数字的平均值

const average = (...args) => args.reduce((a, b) => a + b, 0) / args.length;
average(0, 1, 2, -1, 9, 10); // 3.5

7. 检查数字是偶数还是奇数

const isEven = num => num % 2 === 0;
isEven(2); // true

8. 删除数组中的重复元素

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

9. 检查对象是否为空

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

10. 反转字符串

const reverseStr = str => str.split('').reverse().join('');
reverseStr('fatfish'); // hsiftaf

11. 计算两个日期之间的间隔

const dayDiff = (d1, d2) => Math.ceil(Math.abs(d1.getTime() - d2.getTime()) / 86400000);
dayDiff(new Date("2023-06-23"), new Date("1997-05-31")); // 9519

12. 找出日期所在的年份

const dayInYear = (d) => Math.floor((d - new Date(d.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
dayInYear(new Date('2023/06/23')); // 174

13. 将字符串的首字母大写

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);
capitalize("hello fatfish"); // Hello fatfish

14. 生成指定长度的随机字符串

const generateRandomString = length => [...Array(length)].map(() => Math.random().toString(36)[2]).join('');
generateRandomString(12); // cysw0gfljoyx

15. 获取两个整数之间的随机整数

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

16. 指定数字四舍五入

const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d);
round(3.1415926, 3); // 3.142
const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));

18. 检测是否为暗模式

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
console.log(isDarkMode);

19. 滚动到页面顶部

const goToTop = () => window.scrollTo(0, 0);
goToTop();

20. 确定是否为 Apple 设备

const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);
isAppleDevice();

21. 随机布尔值

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

22. 获取变量的类型

const typeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
typeOf(''); // string

23. 确定当前选项卡是否处于活动状态

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

24. 检查元素是否处于焦点

const isFocus = (ele) => ele === document.activeElement;

25. 随机 IP

const generateRandomIP = () => Array.from({length: 4}, () => Math.floor(Math.random() * 256)).join('.');
generateRandomIP(); // 220.187.184.113

总结

以上就是我今天与你分享的25个JS单行代码片段,记得收藏以备不时之需。希望这些代码片段对你有所帮助!

复制全文 生成海报 编程 JavaScript 开发技巧

推荐文章

Redis函数在PHP中的使用方法
2024-11-19 04:42:21 +0800 CST
Vue3中如何进行错误处理?
2024-11-18 05:17:47 +0800 CST
JavaScript设计模式:装饰器模式
2024-11-19 06:05:51 +0800 CST
404错误页面的HTML代码
2024-11-19 06:55:51 +0800 CST
JavaScript 异步编程入门
2024-11-19 07:07:43 +0800 CST
rangeSlider进度条滑块
2024-11-19 06:49:50 +0800 CST
Vue中的异步更新是如何实现的?
2024-11-18 19:24:29 +0800 CST
Vue3结合Driver.js实现新手指引功能
2024-11-19 08:46:50 +0800 CST
使用Python提取图片中的GPS信息
2024-11-18 13:46:22 +0800 CST
Vue3中如何处理异步操作?
2024-11-19 04:06:07 +0800 CST
2024年微信小程序开发价格概览
2024-11-19 06:40:52 +0800 CST
宝塔面板 Nginx 服务管理命令
2024-11-18 17:26:26 +0800 CST
js生成器函数
2024-11-18 15:21:08 +0800 CST
Redis和Memcached有什么区别?
2024-11-18 17:57:13 +0800 CST
js迭代器
2024-11-19 07:49:47 +0800 CST
JavaScript设计模式:单例模式
2024-11-18 10:57:41 +0800 CST
批量导入scv数据库
2024-11-17 05:07:51 +0800 CST
php机器学习神经网络库
2024-11-19 09:03:47 +0800 CST
程序员茄子在线接单