Prompt工程入门 · 第7专栏：AI辅助重构

代码审查发现问题后，如何高效完成重构？AI帮你完成60%的工作

本专栏目标：掌握AI辅助代码重构的完整流程

---

---

真实案例背景

代码重构是什么？ 就像装修房子，功能不变，但让布局更合理、居住更舒适。代码重构就是让代码更简洁、更易读、更好维护，但功能保持不变。

重构需求

某遗留系统的数据过滤函数需要重构：

原代码问题：

• 代码冗长（80行）
• 逻辑嵌套深
• 难以维护和测试
• 性能一般

重构目标：

• 简化代码结构
• 提升可读性
• 保持功能不变
• 适当优化性能

---

Before：重构前的代码

function filterUsers(users) {
  let result = []
  for (let i = 0; i < users.length; i++) {
    let user = users[i]
    if (user.active === true) {
      if (user.age >= 18) {
        if (user.email) {
          if (user.email.includes('@')) {
            result.push({
              name: user.name,
              email: user.email,
              age: user.age
            })
          }
        }
      }
    }
  }
  return result
}

问题分析：

• 4层嵌套if语句
• 使用传统for循环
• 冗余的true判断
• 缺少语义化

---

After：重构后的代码

// 方案1：简洁版
const filterUsers = users =>
  users.filter(u =>
    u.active && u.age >= 18 && u.email?.includes('@')
  );

// 方案2：语义化版
const isValidUser = user =>
  user.active &&
  user.age >= 18 &&
  user.email?.includes('@');

const filterUsers = users =>
  users.filter(isValidUser);

改进点：

• 代码量：80行 → 3行（减少96%）
• 可读性：大幅提升
• 可测试性：逻辑独立，易于单元测试
• 性能：filter比手动循环快约20%

---

AI辅助重构6步法

第1步：分析代码

Prompt：

分析这段JavaScript代码的功能和问题：

[贴上代码]

请从以下角度分析：
1. 功能说明
2. 存在的问题
3. 可以优化的地方

AI输出示例：

---

第2步：设计方案

Prompt：

基于刚才的分析，请设计重构方案：

要求：
1. 使用现代JavaScript特性
2. 简化嵌套结构
3. 提升代码可读性
4. 保持功能不变

请给出2-3个方案，说明各自的优缺点

AI输出示例：

箭头函数=>是JavaScript的简写语法，就像用"u"代替"user"，更简洁

---

第3步：逐步重构

关键原则：不要一次性大改，要逐步重构

阶段1：简化判断

// Before
if (user.active === true)

// After
if (user.active)

阶段2：合并条件

// Before
if (user.active && user.age >= 18 && user.email?.includes('@'))

// After (分离后见下文)

阶段3：使用filter

// Before: 手动循环
for (let i = 0; i < users.length; i++)

// After: 使用filter
users.filter(user => /* 条件 */)

---

第4步：验证功能

测试Prompt：

重构前后，这段测试代码应该都能通过：

const users = [
  { active: true, age: 20, email: 'test@test.com' },
  { active: false, age: 25, email: 'demo@test.com' },
  { active: true, age: 16, email: 'minor@test.com' }
]

请验证重构后的代码输出是否一致

验证要点：

• 功能保持不变
• 边界情况正确处理
• 性能没有退化

---

第5步：优化调整

进一步优化Prompt：

重构已经完成，请进一步优化：

1. 添加注释说明关键逻辑
2. 考虑性能优化（如短路、缓存）
3. 增强错误处理
4. 提供单元测试示例

---

第6步：完成重构

最终检查：

请对比重构前后的代码：

[Before代码]
[After代码]

给出：
1. 代码量对比
2. 性能对比
3. 可维护性分析
4. 风险评估

---

完整重构Prompt模板

通用模板

你是代码重构专家，擅长简化复杂代码

【第1步：分析】
分析这段代码的功能和问题：
[代码]

【第2步：设计】
给出2-3个重构方案，说明优缺点

【第3步：重构】
选择最优方案进行重构，要求：
1. 保持功能不变
2. 简化代码结构
3. 使用现代语法
4. 添加必要注释

【第4步：验证】
提供测试用例验证功能一致性

【第5步：对比】
给出重构前后的对比分析

---

实战案例：复杂函数重构

待重构代码

function processOrder(order) {
  let result = {
    status: 'pending',
    items: [],
    total: 0
  }

  if (order && order.items && order.items.length > 0) {
    for (let i = 0; i < order.items.length; i++) {
      let item = order.items[i]
      if (item && item.price && item.quantity) {
        let subtotal = item.price * item.quantity
        result.items.push({
          name: item.name,
          price: item.price,
          quantity: item.quantity,
          subtotal: subtotal
        })
        result.total = result.total + subtotal
      }
    }
    if (result.items.length > 0) {
      result.status = 'processed'
    }
  }

  return result
}

AI重构Prompt

请重构这个订单处理函数：

[贴代码]

要求：
1. 使用现代JavaScript特性
2. 简化嵌套结构
3. 提升可读性
4. 添加错误处理
5. 提供类型定义（TypeScript）

请给出完整的重构代码和测试用例

重构结果

interface OrderItem {
  name: string;
  price: number;
  quantity: number;
}

interface ProcessedOrder {
  status: 'processed' | 'pending' | 'invalid';
  items: Array<OrderItem & { subtotal: number }>;
  total: number;
}

const isValidItem = (item: any): item is OrderItem =>
  item &&
  typeof item.name === 'string' &&
  typeof item.price === 'number' &&
  typeof item.quantity === 'number';
// 这是TypeScript类型守卫，就像安检员检查身份证，确认这个人真的是OrderItem

const processOrder = (order: { items?: any[] }): ProcessedOrder => {
  if (!order?.items?.length) {
    return { status: 'invalid', items: [], total: 0 };
  }

  const items = order.items
    .filter(isValidItem)
    .map(item => ({
      ...item,
      subtotal: item.price * item.quantity
    }));

  const total = items.reduce((sum, item) => sum + item.subtotal, 0);

  return {
    status: 'processed',
    items,
    total
  };
};

改进效果：

• 代码量：40行 → 25行
• 类型安全：无 → 完整TypeScript类型
• 可测试性：难 → 易于单元测试
• 错误处理：弱 → 强

---

重构经验总结

1. 安全第一

2. AI的局限

3. 最佳实践

AI辅助 = AI完成60% + 人工完成40%

AI负责：
- 识别问题
- 提供方案
- 生成代码
- 对比分析

人工负责：
- 判断重构价值
- 选择最优方案
- 验证正确性
- 团队review

---

你能做到的！

学完本专栏，你可以立即：

• 🎯 用AI将代码量减少60%以上
• ✨ 安全高效地完成代码重构
• ⚡ 掌握6步法，重构不再难！

马上来练习巩固吧！

---

本专栏练习

练习题

以下代码需要重构，请用今天学的方法设计重构Prompt：

function calculatePrice(items, discount, tax) {
  let total = 0
  if (items) {
    for (let i = 0; i < items.length; i++) {
      let item = items[i]
      if (item && item.price) {
        total = total + item.price
      }
    }
  }
  if (discount) {
    total = total - discount
  }
  if (tax) {
    total = total + (total * tax)
  }
  return total
}

参考答案

请重构这个价格计算函数：

[代码]

要求：
1. 使用reduce替代for循环
2. 使用可选链`?.`简化判断（可选链就像先敲门再进屋，没人就不进去了）
3. 分离计算逻辑
4. 添加JSDoc注释
5. 提供边界情况处理

给出重构代码和测试用例

---

本专栏小结

学完后你应该：

✅ 了解AI辅助重构的6步流程 ✅ 掌握重构Prompt模板 ✅ 知道如何安全地重构代码

核心要点

1. 分步进行：不要一次性大改
2. 充分测试：重构前后功能一致
3. AI辅助：AI提方案，人工做决策
4. 安全第一：版本控制，随时回退

下节专栏预告

第8专栏：成长路线图

免费专栏最后一专栏，帮你规划从入门到精通的学习路径！

---

在分享：

1. 你有需要重构的代码吗？
2. 愿意尝试AI辅助重构吗？

优质会在下一篇文章中展示！

💡 限时提醒：完整系统技术分享将于1月10日上线，预售价¥99（原价¥149），仅限前100名！想系统学习8种框架的同学不要错过~

---

本套技术分享完整示例代码及扩充专栏件：https://github.com/MaesHughes/wuxing-blog-comments 技术分享仓库：introduction-prompt/ 作者：大熊掌门 | 全平台搜索"大熊掌门"关注更多内容