🔥“一行封神” —— 10 段 JavaScript 黑魔法,老手看完直呼内行!

222 阅读2分钟

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 段
sleepawait new Promise(r => setTimeout(r, ms))

把这篇收藏起来,下次写代码时,用最少行数做最多事情!