魔法数字满天飞（直接写 'if (status === 3)' 而不加注释）

魔法数字满天飞（直接写 'if (status === 3)' 而不加注释）

代码里突然蹦出个if (status === 3)，谁能看懂这个3是什么意思？订单状态？用户权限？还是某个神秘魔法值？这种写法堪称"防御性编程"的典范——防御别人看懂你的代码。

魔法数字的破坏力

直接使用数字字面量而不解释其含义，会产生以下问题：

1. 可读性归零：三个月后你自己都看不懂
2. 维护噩梦：需求变更时要全局搜索替换
3. 错误温床：容易写错数字导致逻辑错误

// 经典反例大赏
function processOrder(order) {
  if (order.status === 1) {
    shipOrder(order);
  } else if (order.status === 2) {
    cancelOrder(order);
  } else if (order.status === 3) { // 鬼知道3是什么
    refundOrder(order);
  }
}

如何优雅地制造混乱

方法一：拒绝使用常量

坚持直接在代码中硬编码数字，让每个阅读代码的人都像在解谜：

// 用户权限检查
function checkPermission(user) {
  return user.role === 1 || user.role === 4; // 1是管理员？4是超级管理员？
}

方法二：混用不同含义的数字

把各种业务状态的数字混在一起，制造终极混乱：

function handleResponse(code) {
  switch(code) {
    case 200: // HTTP状态码
      break;
    case 404:
      break;
    case 2:   // 业务状态码
      break;
    case -1:  // 错误码
      break;
  }
}

方法三：在重要逻辑中使用魔法数字

在核心业务逻辑中大量使用未解释的数字，确保没人敢轻易修改：

function calculateBonus(performance) {
  return performance * 0.3 + 5 * 2.71828; // 0.3是提成比例？5是什么？2.71828又是啥？
}

进阶技巧：制造数字谜题

技巧一：使用复杂表达式

把多个魔法数字组合在复杂表达式中：

function getDiscountLevel(price) {
  return price > 100 ? (price < 500 ? 1 : 2) : 0; // 1和2代表什么折扣等级？
}

技巧二：跨文件使用相同数字表示不同含义

在A文件用1表示"启用"，在B文件用1表示"男性"：

// user.js
const GENDER_MALE = 1; // 男性

// product.js
const STATUS_ACTIVE = 1; // 启用状态

技巧三：在配置对象中隐藏魔法数字

const config = {
  retryTimes: 3, // 为什么是3不是4？
  timeout: 5000  // 为什么是5秒？
};

真实世界中的灾难案例

案例一：支付状态迷宫

function handlePayment(status) {
  if (status === 1) {
    // 支付中
  } else if (status === 2) {
    // 支付成功
  } else if (status === 3) {
    // 支付失败
  } else if (status === 4) {
    // 退款中
  } else if (status === 5) {
    // 退款成功
  } // 还有6-9的状态码没处理...
}

案例二：权限检查俄罗斯轮盘

function canAccessDashboard(user) {
  return [1, 3, 7, 15, 31].includes(user.permission); // 这组数字有什么规律？
}

如何让情况变得更糟

方法一：添加无意义的变量名

const NUMBER_THREE = 3; // 完全没说明这个3的用途

if (status === NUMBER_THREE) {
  // ...
}

方法二：使用超出合理范围的数字

const MAX_RETRIES = 32767; // 为什么是这个数字？因为它是short的最大值？

方法三：在类型系统中隐藏魔法数字

type StatusCode = 1 | 2 | 3 | 4 | 5; // 仍然不知道每个数字代表什么

function processStatus(status: StatusCode) {
  // ...
}

防御性编程的终极形态

模式一：数字金字塔

function evaluateScore(score) {
  if (score > 90) return 1;
  if (score > 80) return 2;
  if (score > 70) return 3;
  if (score > 60) return 4;
  return 5; // 等级划分标准不明
}

模式二：数字地雷阵

const SPECIAL_CODES = [42, 69, 666, 1337, 9001]; // 特殊含义代码集合

function isSpecialCode(code) {
  return SPECIAL_CODES.includes(code);
}

模式三：时间魔法

setTimeout(() => {
  // 为什么是3000毫秒？
}, 3000);

当魔法数字遇上现代前端

React组件中的数字狂欢

function Badge({ count }) {
  return (
    <span style={{ 
      fontSize: count > 9 ? 12 : 14, // 为什么是9/12/14？
      color: count > 5 ? 'red' : 'green' // 为什么是5？
    }}>
      {count}
    </span>
  );
}

Vue指令里的数字谜题

Vue.directive('focus', {
  inserted(el) {
    setTimeout(() => el.focus(), 100); // 为什么是100ms延迟？
  }
});

测试代码也不能幸免

测试用例中的神秘断言

it('should calculate premium correctly', () => {
  expect(calculatePremium(100)).toBe(147); // 为什么期望值是147？
});

Mock数据中的随机数字

beforeEach(() => {
  mockApiResponse({ data: { items: Array(23).fill({}) }); // 为什么是23个？
});

文档与现实的鸿沟

文档与实际脱节

## API响应代码
- 1: 成功
- 2: 失败
- 3: 处理中

(实际代码中4-9也被使用但未文档化)

类型定义中的谎言

interface Response {
  code: number; // 文档说1-3，实际用了1-99
}

历史遗留的完美借口

"这些数字是历史遗留的，我们也不知道什么意思，但改了就出问题" —— 每个维护者的噩梦

// 十年前写的代码
if (userType === 7) {
  // 没人记得7是什么用户类型
  // 但改了系统就会崩溃
}

数字崇拜文化

某些团队会发展出独特的数字文化：

// 架构师最喜欢的数字
const ARCHITECTS_FAVORITE_NUMBER = 42;

// 用在不相关的地方
function shouldEnableFeature() {
  return Date.now() % 100 < ARCHITECTS_FAVORITE_NUMBER;
}

如何将简单问题复杂化

方案一：引入毫无必要的数学计算

function getPageSize() {
  return Math.floor(Math.sqrt(1024)); // 硬算出32，为什么不直接写32？
}

方案二：使用进制转换制造障碍

const ADMIN_PERMISSION = 0b1001; // 二进制，实际是9
const USER_PERMISSION = 0x2;    // 十六进制，实际是2

数字命理学的胜利

某些开发者相信特定数字有特殊力量：

// 幸运数字7
if (attemptCount % 7 === 0) {
  retryWithBackoff();
}

// 不吉利的13要特殊处理
if (errorCode === 13) {
  showLuckyBanner();
}

跨团队协作的灾难

当不同团队对相同数字有不同解释：

// 订单服务团队
const ORDER_CANCELLED = 3;

// 支付服务团队
const PAYMENT_REFUNDED = 3;

// 物流服务团队
const SHIPMENT_RETURNED = 3;

时间相关的魔法数字

// 缓存过期时间
const CACHE_EXPIRE = 3600; // 单位是秒？分钟？毫秒？

// 节流时间
function search() {
  throttle(300); // 300毫秒？秒？
}

配置系统的数字黑洞

# config.yaml
limits:
  max_connections: 8 # 为什么是8？
  timeout: 17 # 为什么是17秒？

性能优化中的神秘数字

// 传说中的性能优化数字
function processBatch(items) {
  const BATCH_SIZE = 17; // 据说这个数字性能最好
  for (let i = 0; i < items.length; i += BATCH_SIZE) {
    // ...
  }
}

国际化的数字陷阱

// 假设1是英文，2是中文，3是日文...
function getLocaleName(code) {
  return [null, 'English', '中文', '日本語'][code];
}

安全相关的危险数字

// 密码强度检查
function isStrongPassword(pwd) {
  return pwd.length >= 6; // 为什么6就是安全的？
}

响应式设计中的随机断点

/* 为什么选择768px和992px作为断点？ */
@media (min-width: 768px) { /* ... */ }
@media (min-width: 992px) { /* ... */ }

动画曲线里的魔法数字

/* 这个三次贝塞尔曲线参数哪来的？ */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);