CODE TIPS

实战代码技巧

每个技巧都给出"反模式 vs 推荐写法"的对照，配适用场景说明。看完就能用，用完就少写一行 bug。

TIP · 01 · 可选链

TIP 01 · OPTIONAL CHAINING

别再写三层 if 判空了

取深层嵌套字段时，传统写法要一层层判断，代码丑且易漏。可选链 ?. 配合空值合并 ?? 一行搞定，且语义更清晰。

// ❌ 反模式：层层判断，丑且易漏
const city = user && user.address && user.address.city;
const name = user && user.name ? user.name : '匿名';

// ✅ 推荐：可选链 + 空值合并
const city = user?.address?.city;
const name = user?.name ?? '匿名';

适用场景：API 返回值解构、组件 props 透传、配置文件读取。注意 ?. 不能滥用——明确不会为空的对象不需要加，否则掩盖真实 bug。

少写一行判空，多读一行业务

—— 三亩地 · 代码技巧笔记

TIP · 02 · 提前返回

TIP 02 · EARLY RETURN

把 happy path 拉回最外层

嵌套的 if-else 是可读性杀手。用"提前返回"把异常分支先处理掉，主流程自然变成最外层的一组平铺逻辑。

// ❌ 反模式：箭头型嵌套
function getPrice(user) {
  if (user) {
    if (user.isVip) {
      if (user.coupon) {
        return user.price * 0.8 - user.coupon;
      } else {
        return user.price * 0.8;
      }
    } else {
      return user.price;
    }
  }
  return 0;
}

// ✅ 推荐：提前返回，主流程平铺
function getPrice(user) {
  if (!user) return 0;
  if (!user.isVip) return user.price;

  const discount = user.coupon ?? 0;
  return user.price * 0.8 - discount;
}

适用场景：表单校验、权限判断、参数预处理。原则：异常分支越早 return，主流程越清晰。

TIP · 03 · 数组方法

TIP 03 · ARRAY CHAINING

告别 for 循环里的多重职责

for 循环里既过滤又映射又求和，是典型反模式。用 filter / map / reduce 拆开，每一步职责单一，调试也好定位。

// ❌ 反模式：一个循环干三件事
let total = 0;
for (const u of users) {
  if (u.age >= 18 && u.active) {
    total += u.salary * 1.1;
  }
}

// ✅ 推荐：链式调用，每步单一职责
const total = users
  .filter(u => u.age >= 18 && u.active)
  .map(u => u.salary * 1.1)
  .reduce((sum, v) => sum + v, 0);

适用场景：列表筛选、统计聚合、数据转换。注意大数据量（万级以上）慎用，链式会创建多个中间数组。

TIP · 04 · 防抖节流

TIP 04 · DEBOUNCE & THROTTLE

高频事件别裸跑

搜索框输入、滚动监听、窗口 resize——这些事件每秒触发几十次，直接绑函数会让页面卡死。防抖与节流是必备武器。

// 防抖：停止触发后 wait 毫秒才执行一次
function debounce(fn, wait) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), wait);
  };
}

// 节流：每 wait 毫秒最多执行一次
function throttle(fn, wait) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= wait) {
      fn(...args);
      last = now;
    }
  };
}

// 适用：搜索框用 debounce，滚动监听用 throttle

适用场景：搜索联想用防抖，滚动加载用节流；按钮防连点用防抖，拖拽定位用节流。Lodash 的 debounce / throttle 是生产首选。

技巧不是炫技。能让下一个人在十秒内读懂你的代码，才是真正的好技巧。

— 三亩地 · 代码审美

分享你的代码技巧 → 查看学习日记