30 个让你“更像资深开发”的 JavaScript 一行流技巧-CFANZ编程社区

当你能独立写完一个小应用时，往往会觉得“好像还差点意思”。
其实，真正让人觉得“像个老手”的，常常不是写了多复杂的功能，而是那些——
💡“一行就能搞定原本十几行代码”的小技巧。

这些年我陆续收集了一批能提速、提质、也提气的 JavaScript 一行流技巧。
下面这 30 个，是我最常用、最实用的收藏。
每一个都能在关键时刻救你一命，甚至——拯救你的心情。

🍪 1. 读取指定 Cookie

const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift();

调试登录态、排查会话异常时非常顺手。
⚠️ 注意：HttpOnly 无法被前端读取。

🎨 2. RGB 转 Hex

const rgbToHex = (r, g, b) => "#" + ((1<<24)+(r<<16)+(g<<8)+b).toString(16).slice(1);

设计给 RGB，CSS 要 Hex？一行解决！

📋 3. 复制到剪贴板

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

简洁现代。
⚠️ 仅限 HTTPS 环境 + 用户交互触发。

📅 4. 计算一年中的第几天

const dayOfYear = d => Math.floor((d - new Date(d.getFullYear(), 0, 0)) / 86400000);

适合做打卡、进度、里程碑类功能。

✨ 5. 单词首字母大写

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

标题、输入格式化常用。

🧮 6. 日期差（天）

const dayDif = (a, b) => Math.ceil(Math.abs(a - b) / 86400000);

适合倒计时、提醒、日程差。

🔥 7. 清空所有 Cookie

document.cookie.split(';').forEach(c => 
  document.cookie = c.replace(/^ +/,'').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`)
);

登录状态错乱？一键清空！

🌈 8. 随机十六进制颜色

const randomHex = () => `#${Math.floor(Math.random()*0xffffff).toString(16).padEnd(6,'0')}`;

占位图、头像、原型配色一秒搞定。

🧹 9. 数组去重

const removeDuplicates = arr => [...new Set(arr)];

对象数组去重：

const uniqBy = (arr, key) => [...new Map(arr.map(x => [x[key], x])).values()];

🔍 10. 解析 URL 查询参数

const getParameters = url =>
  JSON.parse('{"' + decodeURI(url.split("?")[1])
  .replace(/"/g,'\\"').replace(/&/g,'","').replace(/=/g,'":"') + '"}');

⚙️ 更推荐现代写法：

new URL(url).searchParams.get('param');

⏰ 11. 从日期中取时间部分

const timeFromDate = d => d.toTimeString().slice(0, 8);

🔢 12. 判断偶数

const isEven = n => n % 2 === 0;

📊 13. 求平均值

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

🧭 14. 平滑滚动回顶部

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

🔁 15. 反转字符串

const reverse = s => s.split('').reverse().join('');

✅ 16. 判断数组非空

const isNotEmpty = a => Array.isArray(a) && a.length > 0;

✍️ 17. 获取选中文本

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

🎲 18. 打乱数组

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; 
};

🌙 19. 侦测深色模式

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

🧘♂️ 20. 防抖

const debounce = (fn, ms) => { 
  let t; 
  return (...a) => { 
    clearTimeout(t); 
    t = setTimeout(() => fn(...a), ms); 
  }; 
};

⚙️ 21. 节流

const throttle = (fn, ms) => { 
  let p = 0; 
  return (...a) => { 
    const n = Date.now(); 
    if (n - p > ms) { p = n; fn(...a); } 
  }; 
};

🧩 22. 数值钳制

const clamp = (n, min, max) => Math.min(max, Math.max(min, n));

📦 23. 数组分块

const chunk = (arr, size) => arr.reduce((r, _, i) => 
  (i % size ? r[r.length-1].push(arr[i]) : r.push([arr[i]]), r), []);

🌀 24. 深度拍平

const flat = arr => arr.flat(Infinity);

🔢 25. 范围序列

const range = (n, start = 0) => Array.from({ length: n }, (_, i) => i + start);

⏱️ 26. 休眠（延时）

const sleep = ms => new Promise(r => setTimeout(r, ms));

🌐 27. 拉取 JSON

const getJSON = (url, opts) => fetch(url, opts).then(r => r.json());

🧮 28. 分组

const groupBy = (arr, key) => 
  arr.reduce((m, x) => ((m[x[key]] = m[x[key]] || []).push(x), m), {});

🛡️ 29. 安全读取深层属性

const get = (obj, path, dflt) => 
  path.split('.').reduce((v, k) => v?.[k], obj) ?? dflt;

🧘♂️ 30. 心法：简洁不是炫技，而是克制

刚开始学这些一行技巧时，我总觉得“写得越短越酷”，
好像能省下几行代码，就说明自己更厉害。

但后来我发现，真正的高手并不是追求“别人看不懂”，
而是能让后来维护代码的人 不用多想就能看懂。

“一行流”的价值，不在于压缩代码量，
而在于让逻辑 更直观、更顺滑、更无障碍。

写得短不难，写得清楚才值钱。
真正优雅的代码，是既高效又可读的平衡。

💬 你最常用的一行 JS 技巧是哪一个？
欢迎在评论区补充你的“一行流神技”！

如果这篇文章对你有帮助，请点个 赞👍 + 收藏⭐ + 关注我，
后续我还会持续更新更多高效 JS / TS 实战技巧合集。