当你能独立搭一个小应用时，常常又会觉得“还差点火候”。可有时，真正让人有成就感的，是那些一行就能做完原来要写十几行的“小招式”。
这些年我陆续收集了一批能提速、提质、也提气的 JS 小技巧。下面这 30 个我最常用的一行流，常常在关键时刻救场，甚至拯救心情。
- 读取指定 Cookie
const cookie = name =>; ${document.cookie}.split(; ${name}=).pop().split(‘;’).shift();
要点：调试登录态、排查会话异常时，快速取值很顺手。提示：HttpOnly 无法被前端读取；域/路径限制同样生效。 - RGB 转 Hex
const rgbToHex = (r, g, b) => “#” + ((1<<24)+(r<<16)+(g<<8)+b).toString(16).slice(1);
场景：设计常给 RGB，CSS 常用 Hex，这行代码让双方和谐共处。注意：确保范围在 0–255，不然颜色会跑偏。 - 复制到剪贴板
const copyToClipboard = text => navigator.clipboard.writeText(text);
亮点：告别隐藏输入框等老旧做法，简单现代。前提：仅在安全上下文（HTTPS）且需要用户交互触发。 - 计算一年中的第几天
const dayOfYear = d => Math.floor((d – new Date(d.getFullYear(), 0, 0)) / 86400000);
用途：打卡、进度统计、里程碑都用得上。建议：若涉时区精度，优先考虑 UTC。 - 单词首字母大写
const capitalize = s => s.charAt(0).toUpperCase() + s.slice(1);
常用：用户输入规范化、标题格式化。 - 日期差（天）
const dayDif = (a, b) => Math.ceil(Math.abs(a – b) / 86400000);
适用：倒计时、提醒、日程差。提醒：涉工作日/薪资等严谨场景请用专业库（DST 很棘手）。 - 清空所有 Cookie
document.cookie.split(‘;’).forEach(c => document.cookie = c.replace(/^ +/,”)
.replace(/=.*/,=;expires=${new Date(0).toUTCString()};path=/));
何时用：登录状态错乱、认证循环时的“紧急按钮”。 - 随机十六进制颜色
const randomHex = () =>#${Math.floor(Math.random()*0xffffff).toString(16).padEnd(6,'0')};
用途：原型配色、占位头像。提醒：生产环境注意对比度与可读性。 - 数组去重
const removeDuplicates = arr => […new Set(arr)];
优势：把十来行循环精简成一行。对象数组去重：
const uniqBy = (arr, key) => […new Map(arr.map(x => [x[key], x])).values()]; - 解析 URL 查询参数
const getParameters = url =>
JSON.parse(‘{“‘ + decodeURI(url.split(“?”)[1]).replace(/”/g,’\”‘)
.replace(/&/g,'”,”‘).replace(/=/g,'”:”‘) + ‘”}’);
现实：调试很顺手，但生产建议用：
new URL(url).searchParams.get(‘paramName’);
- 从日期中取时间部分
const timeFromDate = d => d.toTimeString().slice(0, 8);
用处：日志、计时显示、耗时面板。 - 判断偶数
const isEven = n => n % 2 === 0;
风格：语义清晰，别用花哨的位运算炫技。 - 求平均值
const average = (…xs) => xs.reduce((a,b)=>a+b,0) / xs.length;
常见：看板统计、可视化指标。防护：空数组要避免 NaN。 - 平滑滚动回顶部
const goToTop = () => window.scrollTo({ top: 0, left: 0, behavior: ‘smooth’ });
体验：细腻的小交互。兼顾：尊重“减少动态效果”的无障碍设置。 - 反转字符串
const reverse = s => s.split(”).reverse().join(”);
经典：面试常客。注意：复杂文本（如 emoji、合字）需更稳妥方案。 - 判断数组非空
const isNotEmpty = a => Array.isArray(a) && a.length > 0;
语义：护栏式判断更自然。 - 获取选中文本
const getSelectedText = () => window.getSelection().toString();
适合：编辑器、笔记、批注功能。 - 打乱数组
const shuffleArray = a => a.sort(() => 0.5 – Math.random());
演示：快速随机即可。生产：请用费雪–耶茨：
const fyShuffle = a => {
for (let i=a.length-1;i>0;i–){
const j=Math.floor(Math.random()*(i+1));
[a[i],a[j]]=[a[j],a[i]];
}
return a;
}; - 侦测深色模式
const isDarkMode = window.matchMedia && window.matchMedia(‘(prefers-color-scheme: dark)’).matches;
价值：让应用主题跟随系统偏好。 - 防抖
const debounce = (fn, ms) => {
let t;
return (…a) => {
clearTimeout(t);
t = setTimeout(() => fn(…a), ms);
};
};
场景：搜索输入、resize、打字检测。特性：用户停止操作后才触发。 - 节流
const throttle = (fn, ms) => {
let p = 0;
return (…a) => {
const n = Date.now();
if (n – p > ms) { p = n; fn(…a); }
};
};
用途：滚动、鼠标移动等高频事件。收益：限制调用频率，稳住性能。
- 数值钳制
const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
用例：分页索引、滑块边界、进度范围。 - 数组分块
const chunk = (arr, size) => arr.reduce((r, _, i) =>
(i % size ? r[r.length-1].push(arr[i]) : r.push([arr[i]]), r), []);
何时：大数组分组渲染、批处理。 - 深度拍平
const flat = arr => arr.flat(Infinity);
效果：多层嵌套一口气压平，整合 API 响应很方便。 - 范围序列
const range = (n, start = 0) => Array.from({ length: n }, (_, i) => i + start);
用途：页码、占位骨架、循环示例。 - 休眠（延时）
const sleep = ms => new Promise(r => setTimeout(r, ms));
场景：动画间隔、重试退避、任务节奏控制。 - 拉取 JSON
const getJSON = (url, opts) => fetch(url, opts).then(r => r.json());
适合：小项目、接口试水。生产：请显式处理错误与 HTTP 状态码。 - 分组
const groupBy = (arr, key) =>
arr.reduce((m, x) => ((m[x[key]] = m[x[key]] || []).push(x), m), {});
例子：按部门分用户、按作者分文章。 - 安全读取深层属性
const get = (obj, path, dflt) =>
path.split(‘.’).reduce((v, k) => v?.[k], obj) ?? dflt;
好处：链路上某处 undefined 不再让程序崩掉。 - 心法：清晰胜过机巧
刚学这些技巧时，我也以为“写得别人看不懂”才叫聪明。 后来才明白：清晰比炫技更有力量。好的“一行流”，省的不是行数，而是理解成本。
这 30 个一行招式不是用来秀操作的，而是训练一种看待 JS 的方式：把问题拆到最简，把表达写到最直。 如果你刚入门，从几条开始动手吧：粘到控制台，改一改、试一试、再修一修——慢慢你就会用 JavaScript 思考，而不仅仅是“写 JavaScript”。
全栈AI·探索：涵盖动效、React Hooks、Vue 技巧、LLM 应用、Python 脚本等专栏，案例驱动实战学习，点击二维码了解更多详情。
声明：来自JavaScript 每日一练，仅代表创作者观点。链接：https://eyangzhen.com/3468.html
