10 个 JavaScript 一行代码技巧:优雅、怪异又实用
无论你是初学者还是资深开发者,这些“小而美”的片段都能让你会心一笑,并立刻派上用场。
1. 无限级扁平化数组
const a = [1, 2, [3, 4, [5, 7]]];
const flat = a.flat(Infinity);
console.log(flat); // [1, 2, 3, 4, 5, 7]
flat(Infinity) 一口气把所有嵌套撸平。
2. 交换两个变量,不借助临时值
let n1 = 5, n2 = 10;
[n1, n2] = [n2, n1];
console.log(n1, n2); // 10 5
解构赋值一行搞定,优雅得不像话。
3. 简易洗牌算法
const shuffled = [1, 2, 3, 4, 5].sort(() => Math.random() - 0.5);
console.log(shuffled); // [3, 1, 5, 2, 4](示例)
⚠️ 非均匀随机,但日常够用。
4. 一行过滤“假值”
const arr = [0, 'hello', false, null, 42, '', undefined];
const truthy = arr.filter(Boolean); // ['hello', 42]
const falsy = arr.filter(v => !v); // [0, false, null, '', undefined]
Boolean 构造函数天生就是真假过滤器。
5. 去重只需一个 Set
const unique = [...new Set([1, 2, 2, 3, 4, 4, 5])];
console.log(unique); // [1, 2, 3, 4, 5]
Set 保证唯一,展开运算符恢复成数组。
6. 逻辑运算符的短路妙用
const logged = false;
const greet = logged && 'Welcome back!'; // false
const fallback = logged || 'Please log in'; // 'Please log in'
&& 与 || 让默认值/条件渲染更精简。
7. 随机十六进制颜色
const randomColor = () =>
'#' + Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0');
console.log(randomColor()); // #a1c3e7
一行生成 #rrggbb,告别配色焦虑。
8. 函数防抖(debounce)
const debounce = (fn, delay) => {
let t;
return (...a) => (clearTimeout(t), t = setTimeout(() => fn(...a), delay));
};
window.addEventListener('resize', debounce(() => console.log('resized'), 300));
高频事件(滚动、窗口调整)性能优化的利器。
9. 记忆化——用空间换时间
const memoize = fn => {
const cache = {};
return (...a) => {
const key = JSON.stringify(a);
return cache[key] ??= fn(...a);
};
};
const fact = memoize(n => n <= 1 ? 1 : n * fact(n - 1));
console.log(fact(5)); // 120
console.log(fact(6)); // 720(复用 5!,仅再乘 6)
缓存昂贵计算结果,二次调用瞬间返回。
10. Promise 版 sleep
const sleep = ms => new Promise(r => setTimeout(r, ms));
(async () => {
console.log('Start');
await sleep(2000);
console.log('End after 2 s');
})();
优雅地在异步流程里“暂停”指定毫秒。
小结速览表
| 场景 | 一行代码 |
|---|---|
| 扁平化 | arr.flat(Infinity) |
| 交换变量 | [a, b] = [b, a] |
| 洗牌 | arr.sort(() => Math.random() - 0.5) |
| 去假值 | arr.filter(Boolean) |
| 去重 | [...new Set(arr)] |
| 随机颜色 | '#' + Math.random().toString(16).slice(2, 8) |
| 防抖 | 见第 8 段 |
| 记忆化 | 见第 9 段 |
| sleep | await new Promise(r => setTimeout(r, ms)) |
把这篇收藏起来,下次写代码时,用最少行数做最多事情!