告别JS初学者噩梦：这样写流程控制和函数才叫优雅

你是不是也遇到过这样的场景？

面对一堆复杂的if-else嵌套，自己都看不懂昨天写的代码；想要复用某个功能，却只能笨拙地复制粘贴；代码越写越长，bug越改越多，最后连自己都不想维护...

别担心，今天这篇文章就是来拯救你的！

我将带你重新认识JavaScript的流程控制和函数封装，分享一些让代码变得更优雅、更易维护的实用技巧。读完本文，你将彻底告别“面条式代码”，写出既漂亮又实用的JavaScript代码。

流程控制：从混乱到清晰

先来看个真实案例。假设我们要根据用户等级显示不同的权益：

1// ❌ 糟糕的写法：if-else地狱
2function showUserPrivilege(level) {
3  if (level === 1) {
4    console.log('普通会员：享受基础服务');
5    // 这里可能还有更多代码...
6  } else if (level === 2) {
7    console.log('白银会员：享受加速服务');
8    // 更多代码...
9  } else if (level === 3) {
10    console.log('黄金会员：享受专属客服');
11    // 更多代码...
12  } else if (level === 4) {
13    console.log('钻石会员：享受所有特权');
14    // 更多代码...
15  } else {
16    console.log('未知等级');
17  }
18}
19

这种写法的问题很明显：每增加一个等级就要加一个if-else，代码会越来越长，可读性也越来越差。

来看看优雅的解决方案：

1// ✅ 优雅写法：使用对象映射
2function showUserPrivilege(level) {
3  const privilegeMap = {
4    1: '普通会员：享受基础服务',
5    2: '白银会员：享受加速服务', 
6    3: '黄金会员：享受专属客服',
7    4: '钻石会员：享受所有特权'
8  };
9  
10  const message = privilegeMap[level] || '未知等级';
11  console.log(message);
12}
13

是不是清爽多了？这种写法的好处是：

• 逻辑清晰，一眼就能看出所有等级对应的权益
• 易于扩展，新增等级只需在对象里加一行
• 减少嵌套，代码更扁平易读

再来看看循环的优化。比如我们要处理一个用户数组：

1// ❌ 不太理想的循环写法
2const users = ['张三', '李四', '王五'];
3for (let i = 0; i < users.length; i++) {
4  console.log([`当前用户：${users[i]}`](https://xplanc.org/primers/document/zh/03.HTML/EX.HTML%20%E5%85%83%E7%B4%A0/EX.i.md));
5  // 各种复杂的业务逻辑...
6}
7

现代JavaScript提供了更优雅的数组方法：

1// ✅ 更函数式的写法
2const users = ['张三', '李四', '王五'];
3
4// 只是遍历，不返回值
5users.forEach(user => {
6  console.log(`当前用户：${user}`);
7});
8
9// 需要返回新数组时
10const formattedUsers = users.map(user => `用户：${user}`);
11
12// 需要过滤时
13const filteredUsers = users.filter(user => user !== '李四');
14

这样的代码不仅更简洁，而且意图更明确，别人一看就知道你在做什么。

函数封装：从小工到专家

函数封装是代码复用的核心，但很多人其实并没有掌握正确的方法。

先看一个常见的反例：

1// ❌ 职责过多的巨型函数
2function processUserData(userData) {
3  // 验证数据
4  if (!userData.name || !userData.email) {
5    throw new Error('用户数据不完整');
6  }
7  
8  // 格式化数据
9  userData.name = userData.name.trim();
10  userData.email = userData.email.toLowerCase();
11  
12  // 保存到数据库
13  database.save(userData);
14  
15  // 发送欢迎邮件
16  emailService.sendWelcomeEmail(userData.email);
17  
18  // 记录日志
19  logger.log(`新用户注册：${userData.name}`);
20  
21  // 还有很多其他操作...
22}
23

这个函数的问题在于它做了太多事情，违反了"单一职责原则"。一旦需要修改某个环节，就可能影响到其他功能。

正确的做法是拆分：

1// ✅ 单一职责的拆分写法
2function validateUserData(userData) {
3  if (!userData.name || !userData.email) {
4    throw new Error('用户数据不完整');
5  }
6  return true;
7}
8
9function formatUserData(userData) {
10  return {
11    ...userData,
12    name: userData.name.trim(),
13    email: userData.email.toLowerCase()
14  };
15}
16
17async function processUserData(userData) {
18  validateUserData(userData);
19  const formattedData = formatUserData(userData);
20  
21  await database.save(formattedData);
22  await emailService.sendWelcomeEmail(formattedData.email);
23  logger.log(`新用户注册：${formattedData.name}`);
24  
25  return formattedData;
26}
27

这样拆分后，每个函数都只做一件事，测试和维护都变得更容易。

高级技巧：让代码更有弹性

在实际开发中，我们经常需要处理各种边界情况。来看看如何优雅地处理：

1// 默认参数和可选链的使用
2function createUserProfile(userData = {}) {
3  // 使用默认参数避免undefined错误
4  const {
5    name = '匿名用户',
6    age = 0,
7    preferences = {}
8  } = userData;
9  
10  // 使用可选链安全访问嵌套属性
11  const theme = preferences?.ui?.theme || 'default';
12  const language = preferences?.ui?.language || 'zh-CN';
13  
14  return {
15    name,
16    age, 
17    settings: {
18      theme,
19      language
20    }
21  };
22}
23
24// 即使传入空对象也能正常工作
25const profile = createUserProfile();
26console.log(profile); // 输出完整的默认配置
27

另一个实用技巧是函数柯里化：

1// 柯里化：让函数更具复用性
2function createLogger(level) {
3  return function(message) {
4    return `[${level}] ${new Date().toISOString()}: ${message}`;
5  };
6}
7
8// 创建特定级别的日志函数
9const errorLog = createLogger('ERROR');
10const infoLog = createLogger('INFO');
11const debugLog = createLogger('DEBUG');
12
13// 使用起来非常简洁
14console.log(errorLog('数据库连接失败'));
15console.log(infoLog('用户登录成功'));
16console.log(debugLog('进入某个函数'));
17

异步流程控制：告别回调地狱

在现代JavaScript中，异步操作无处不在。来看看如何优雅地处理：

1// ❌ 回调地狱
2function getUserData(userId, callback) {
3  getUserInfo(userId, (userInfo) => {
4    getUsersPosts(userId, (posts) => {
5      getUserFriends(userId, (friends) => {
6        callback({ userInfo, posts, friends });
7      });
8    });
9  });
10}
11

使用async/await让代码更清晰：

1// ✅ 使用async/await的优雅写法
2async function getUserData(userId) {
3  try {
4    const [userInfo, posts, friends] = await Promise.all([
5      getUserInfo(userId),
6      getUsersPosts(userId), 
7      getUserFriends(userId)
8    ]);
9    
10    return { userInfo, posts, friends };
11  } catch (error) {
12    console.error('获取用户数据失败:', error);
13    throw error;
14  }
15}
16
17// 使用示例
18async function displayUserProfile(userId) {
19  const userData = await getUserData(userId);
20  renderUserProfile(userData);
21}
22

实战案例：重构一个真实功能

让我们来看一个完整的重构案例。假设我们有一个商品价格计算功能：

1// 重构前：混乱的价格计算
2function calculatePrice(product, quantity, userType, coupon) {
3  let price = product.price * quantity;
4  
5  if (userType === 'vip') {
6    price = price * 0.9;
7  } else if (userType === 'svip') {
8    price = price * 0.8;
9  }
10  
11  if (coupon && coupon.type === 'fixed') {
12    price = price - coupon.value;
13  } else if (coupon && coupon.type === 'percentage') {
14    price = price * (1 - coupon.value / 100);
15  }
16  
17  if (price < 0) {
18    price = 0;
19  }
20  
21  return price;
22}
23

重构后的优雅版本：

1// 重构后：清晰的价格计算
2function calculatePrice(product, quantity, userType, coupon) {
3  const basePrice = calculateBasePrice(product.price, quantity);
4  const discountedPrice = applyUserDiscount(basePrice, userType);
5  const finalPrice = applyCoupon(discountedPrice, coupon);
6  
7  return ensureMinimumPrice(finalPrice);
8}
9
10function calculateBasePrice(unitPrice, quantity) {
11  return unitPrice * quantity;
12}
13
14function applyUserDiscount(price, userType) {
15  const discountRates = {
16    vip: 0.9,
17    svip: 0.8,
18    default: 1
19  };
20  
21  const discountRate = discountRates[userType] || discountRates.default;
22  return price * discountRate;
23}
24
25function applyCoupon(price, coupon) {
26  if (!coupon) return price;
27  
28  const couponHandlers = {
29    fixed: (price, coupon) => price - coupon.value,
30    percentage: (price, coupon) => price * (1 - coupon.value / 100)
31  };
32  
33  const handler = couponHandlers[coupon.type];
34  return handler ? handler(price, coupon) : price;
35}
36
37function ensureMinimumPrice(price) {
38  return Math.max(0, price);
39}
40

看到区别了吗？重构后的代码：

• 每个函数职责单一，易于测试
• 逻辑清晰，易于理解和维护
• 易于扩展，新增优惠类型只需修改对应函数

写在最后

写代码就像写文章，好的代码应该是清晰、优雅、易于理解的。通过合理的流程控制和函数封装，我们不仅能提高开发效率，还能让代码更易于维护和协作。

记住，代码首先是写给人看的，其次才是给机器执行的。

你现在写的代码，可能半年后就要由别人（甚至你自己）来维护。多花几分钟思考如何让代码更清晰，将来可能节省几小时的调试时间。

你在实际开发中还遇到过哪些流程控制或函数封装的难题？欢迎在评论区分享，我们一起探讨更好的解决方案！

《告别JS初学者噩梦：这样写流程控制和函数才叫优雅》 是转载文章，点击查看原文。