代码小魔术:30 个一行 JavaScript 代码

作为一名前端程序员,你知道时间就是金钱。

每一个小技巧都可能意味着更快的开发时间和更干净的代码。

下面是 30 行代码小魔术 JavaScript 代码,它们将使你的编程工作更轻松。

1. 复制到剪贴板

arduino 复制代码
navigator.clipboard.writeText("Hello, World!");

2. 获取查询字符串参数

dart 复制代码
new URLSearchParams(window.location.search).get('param');

3. 生成随机的 HEX 颜色

javascript 复制代码
`#${Math.floor(Math.random()*0xFFFFFF).toString(16).padEnd(6, '0')}`;

4. 检查日期是否有效

javascript 复制代码
!isNaN(new Date('2021-01-29').valueOf());

5. 睡眠函数

javascript 复制代码
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

6. 深度冻结对象

javascript 复制代码
const deepFreeze = obj => Object.keys(obj).forEach(prop => !(obj[prop] instanceof Object) || Object.freeze(obj[prop]));

7. 精确到指定小数位

javascript 复制代码
const round = (n, decimals) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`);

8. 滚动到页面顶部

ini 复制代码
window.scrollTo(0, 0);

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

arduino 复制代码
const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

10. 打乱数组

ini 复制代码
const shuffleArray = arr => arr.sort(() => 0.5 - Math.random());

11. 获取时区

scss 复制代码
Intl.DateTimeFormat().resolvedOptions().timeZone;

12. 检测暗模式

javascript 复制代码
window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

13. 打印 JSON 对象为美观的字符串

javascript 复制代码
JSON.stringify(obj, null, 2);

14. 获取当前页面的滚动位置

ini 复制代码
const scrollPosition = () => ({ x: window.pageXOffset, y: window.pageYOffset });

15. 创建密钥生成器

vbscript 复制代码
const cryptoKey = () => crypto.getRandomValues(new Uint32Array(1))[0].toString(16);

16. 获取所有的唯一值

dart 复制代码
const uniqueValues = arr => [...new Set(arr)];

17. 检查是否是平日

ini 复制代码
const isWeekday = date => date.getDay() % 6 !== 0;

18. 检查元素是否在视窗中

ini 复制代码
const elementInViewport = el => el.getBoundingClientRect().top >= 0 && el.getBoundingClientRect().bottom <= window.innerHeight;

19. 取得设备类型

javascript 复制代码
const getDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop';

20. 找出字符串中最频繁的元素

javascript 复制代码
const getMostFrequent = str => str.split('').reduce((acc, val) => { const count = str.split(val)

21. 简化的HTTP GET请求

javascript 复制代码
fetch('https://api.example.com/data').then(r => r.json()).then(data => console.log(data));

22. 快速转换JSON为对象

json 复制代码
JSON.parse('{"name":"John", "age":30}');

23. 使用console.time计算代码执行时间

javascript 复制代码
console.time('algorithm'); /* your code here */ console.timeEnd('algorithm');

24. 生成UUID

ini 复制代码
[1e7]+-1e3+-4e3+-8e3+-1e11.replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));

25. 简单的验证电子邮件格式

ini 复制代码
/^[\w-.]+@([\w-]+.)+[\w-]{2,4}$/.test('test@example.com');

26. 判断一个数是否是偶数

dart 复制代码
const isEven = num => num % 2 === 0;

27. 使用递归扁平化数组

kotlin 复制代码
const flatten = arr => arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatten(val) : val), []);

28. 简单地实现数组去重

arduino 复制代码
[...new Set([1,2,3,3,4,4,5])];

29. 获取当前年份

scss 复制代码
new Date().getFullYear();

30. 简短的条件语句运行

ini 复制代码
let x = 20, y = 30; x > y && console.log('x is greater than y');

这些一行代码示例能够让你的开发更加高效,有些甚至能让你在编写代码时获得一些乐趣。记得经常回顾这些小技巧,它们可以在你快速构建功能时发挥巨大作用。

相关推荐
jump6802 分钟前
柯里化
前端
NeoInfra2 分钟前
全面解读ThinkPHP 5.0:现代PHP框架的架构演进与安全实践
前端
一 乐4 分钟前
宠物店管理|基于Java+vue的宠物猫店管理管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
BD_Marathon7 分钟前
【JavaWeb】JS_数据类型和变量
开发语言·javascript·ecmascript
qq_229058019 分钟前
react的3中请求
前端·react.js·前端框架
渴望成为python大神的前端小菜鸟11 分钟前
VUE 面试题
前端·javascript·vue.js·面试题
想要成为糕糕手14 分钟前
深入理解 JavaScript 中的 “this”:从自由变量到绑定规则
前端·javascript
北极象14 分钟前
Electron + Playwright 一文多发应用架构设计
前端·javascript·electron
咖猫16 分钟前
guacamole-web 1.5.5 index.html
前端·javascript·html
getapi22 分钟前
Express 是一个基于 Node.js 的轻量级、灵活的 Web 应用框架,广泛用于构建后端服务和 API
前端·node.js·express