非常实用的JavaScript一行代码有哪些

发布时间：2022-01-13 09:43:50 作者：iii
来源：亿速云阅读：142

# 非常实用的JavaScript一行代码有哪些

JavaScript作为现代Web开发的基石语言，其简洁高效的特性一直备受开发者推崇。本文将深入探讨50个极具实用价值的JavaScript单行代码解决方案，涵盖数据处理、DOM操作、日期处理、随机生成等核心领域，每个示例都附带详细说明和实际应用场景。

## 一、数据处理与转换

### 1. 数组去重
```javascript
const uniqueArr = [...new Set(arr)];

利用Set数据结构的唯一性特性，配合扩展运算符快速实现数组去重。时间复杂度O(n)，比传统双重循环方案更高效。

2. 对象深拷贝

const deepCopy = JSON.parse(JSON.stringify(obj));

通过JSON序列化反序列化实现简单深拷贝，但需注意会丢失函数、undefined等特殊类型。

3. 数组扁平化

const flatArr = arr.flat(Infinity);

ES2019新增的flat方法配合Infinity参数可递归展开任意深度嵌套数组。

4. 对象属性过滤

const filtered = Object.fromEntries(Object.entries(obj).filter(([key]) => ['id','name'].includes(key)));

通过Object.entries转换后过滤，再转回对象，适合处理API响应数据。

5. 数组合并去重

const union = [...new Set([...arr1, ...arr2])];

集合运算的并集实现，保持元素唯一性的同时合并多个数组。

二、数学计算与转换

6. 生成随机整数

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

包含边界的均匀分布随机整数生成器，适用于抽奖、验证码等场景。

7. 数字千分位格式化

const formatNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

使用正则表达式实现金融数字显示格式，支持任意位数数字。

8. 摄氏度转华氏度

const celsiusToFahrenheit = celsius => celsius * 9/5 + 32;

简单的单位转换公式，注意运算优先级。

9. 计算数组平均值

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

reduce求和后除法，比循环更简洁，但需注意空数组情况。

10. 生成斐波那契数列

const fib = n => Array(n).fill().reduce((acc,_,i) => acc.concat(i>1 ? acc[i-1]+acc[i-2] : i), []);

利用reduce和数组初始化技巧生成指定位数的数列。

三、日期时间处理

11. 格式化日期为YYYY-MM-DD

const formatDate = date => date.toISOString().split('T')[0];

使用ISO标准格式快速获取日期部分，时区需注意。

12. 计算日期差

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

毫秒数换算为天数，适合计算倒计时、有效期等场景。

13. 获取当前时间戳

const timestamp = +new Date();

一元加号快速转换Date对象为毫秒时间戳。

14. 判断闰年

const isLeapYear = year => (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;

完整的闰年判断逻辑，考虑世纪年特殊情况。

15. 获取月份最后一天

const lastDay = (y,m) => new Date(y, m, 0).getDate();

利用Date构造函数自动计算下个月第0天的特性。

四、字符串操作

16. 首字母大写

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

字符串不可变性的典型处理方式。

17. 生成随机字符串

const randomStr = () => Math.random().toString(36).slice(2);

基于随机数的base36编码，适合生成临时ID。

18. HTML转义

const escapeHTML = str => str.replace(/[&<>'"]/g, tag => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[tag]));

防止XSS攻击的基本处理，重要安全措施。

19. 字符串反转

const reverseStr = str => [...str].reverse().join('');

扩展运算符正确处理Unicode字符。

20. 生成彩虹色文本

const rainbowText = str => [...str].map((c,i) => `<span style="color:hsl(${i*30},100%,50%)">${c}</span>`).join('');

HSL色彩模型循环生成渐变色效果。

五、浏览器与DOM操作

21. 滚动到页面顶部

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

现代浏览器支持的平滑滚动API。

22. 复制文本到剪贴板

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

异步Clipboard API，需注意权限限制。

23. 获取URL参数

const getParam = name => new URLSearchParams(window.location.search).get(name);

URLSearchParams内置解析器替代正则方案。

24. 检测黑暗模式

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

CSS媒体查询的JavaScript接口。

25. 全屏切换

const toggleFullscreen = () => document[!document.fullscreenElement ? 'documentElement' : 'exitFullscreen']().requestFullscreen();

全屏API的综合应用，注意浏览器前缀。

六、函数式编程技巧

26. 函数柯里化

const curry = fn => (...args) => args.length >= fn.length ? fn(...args) : (...more) => curry(fn)(...args, ...more);

经典柯里化实现，支持多参数分步传递。

27. 管道函数组合

const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);

函数式编程的核心工具，实现数据处理流水线。

28. 记忆化缓存

const memoize = fn => ((cache={}) => (...args) => cache[args] ??= fn(...args))();

利用闭包和空值合并运算符实现高性能缓存。

29. 防抖函数

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

事件频繁触发时的性能优化方案。

30. 节流函数

const throttle = (fn, wait) => { let last; return (...args) => (!last || Date.now() - last >= wait) && (fn(...args), last = Date.now()); };

控制函数执行频率的另一种方式。

七、类型检测与转换

31. 检测空对象

const isEmpty = obj => !obj || (Object.keys(obj).length === 0 && obj.constructor === Object);

严谨的空对象判断，包括原型链检查。

32. 检测数组

const isArray = obj => Array.isArray(obj);

比instanceof更可靠的数组检测方法。

33. 数字转中文

const toChineseNum = num => [...'零一二三四五六七八九'][num];

简单数字映射，复杂版本需要处理位数。

34. 类型判断

const type = obj => Object.prototype.toString.call(obj).slice(8,-1).toLowerCase();

最准确的类型判断方法，区分所有内置类型。

35. 安全JSON解析

const safeParse = json => { try { return JSON.parse(json); } catch { return null; } };

带错误处理的JSON解析，避免代码崩溃。

八、实用工具函数

36. 生成UUID

const uuid = () => crypto.randomUUID?.() || 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => (c === 'x' ? (Math.random()*16|0).toString(16) : '89ab'[Math.random()*4|0]));

优先使用现代API，降级方案保证兼容性。

37. 等待函数

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

异步编程中的延时控制基础工具。

38. 检测移动设备

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

UA检测虽然不完美但仍有实用价值。

39. 获取选中文本

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

浏览器文本选择API的简单封装。

40. 生成密码

const genPassword = (len=8) => [...Array(len)].map(() => (~~(Math.random()*36)).toString(36)).join('');

包含数字和字母的随机密码生成器。

九、ES6+新特性应用

41. 对象属性动态访问

const getProp = (obj, path) => path.split('.').reduce((o,k) => o?.[k], obj);

可选链操作符实现安全的多级属性访问。

42. 空值合并

const config = userConfig ?? defaultConfig;

比||更精准的默认值设置方式，只对null/undefined生效。

43. 数字分隔符

const billion = 1_000_000_000;

提升大数字可读性的语法糖。

44. 数组分组

const groupBy = (arr, key) => arr.reduce((acc, obj) => ((acc[obj[key]] ??= []).push(obj), acc), {});

使用reduce实现类似SQL的GROUP BY操作。

45. 逻辑赋值

user.role ||= 'guest';

简洁的条件属性赋值语法。

十、高级技巧

46. 单例模式

const singleton = (fn => { let instance; return (...args) => (instance ??= new fn(...args)); })();

闭包实现的设计模式经典案例。

47. AOP切面编程

const aspect = (fn, {before, after}) => (...args) => (before?.(args), fn(...args), after?.(args));

函数装饰器的简单实现。

48. 惰性加载

const lazy = fn => { let result; return () => (result ??= fn()); };

延迟计算直到第一次访问的优化模式。

49. 链式调用

const chain = obj => new Proxy(obj, { get: (t,k) => k in t ? typeof t[k] === 'function' ? (...args) => (t[k](...args), chain(t)) : t[k] : undefined });

Proxy实现的方法链语法糖。

50. 状态机

const createMachine = config => (state, action) => config[state]?.[action] ?? state;

极简有限状态机实现。

结语

这些精炼的一行代码解决方案体现了JavaScript语言的灵活性和表现力。掌握这些技巧可以： 1. 大幅减少样板代码 2. 提高开发效率 3. 深入理解语言特性 4. 编写更优雅的代码

建议读者在实际项目中逐步应用这些模式，并根据具体需求进行调整优化。记住，代码的简洁性应以可读性和可维护性为前提。 “`