彻底搞懂 if 语句：从基础语法到实战进阶
一、if 语句的本质：解决「二选一」的逻辑判断
在编程中，我们经常需要根据「某个条件是否成立」来执行不同的代码块 —— 比如用户登录时验证密码是否正确、计算折扣时判断用户等级、处理请求时检查参数是否合法。if 语句的核心作用，就是将这种「满足条件就做 A，不满足就做 B（或不做）」的人类逻辑，转化为计算机可执行的代码。
1.1 基础语法结构
scss
体验AI代码助手
代码解读
复制代码
// 单分支：满足条件则执行
if (条件表达式) {
// 条件为 true 时执行的代码块
}
// 双分支：二选一执行
if (条件表达式) {
// 条件为 true 时执行
} else {
// 条件为 false 时执行
}
// 多分支：多选一执行
if (条件1) {
// 条件1 为 true 时执行
} else if (条件2) {
// 条件1 为 false，条件2 为 true 时执行
} else if (条件3) {
// 前两个条件都为 false，条件3 为 true 时执行
} else {
// 所有条件都为 false 时执行（可选）
}
关键注意点：
- 条件表达式的结果必须是「布尔值」（true/false），若不是则会自动进行类型转换（如 0 转 false、非空字符串转 true）；
- 若代码块只有一行语句，大括号 {} 可省略，但强烈建议保留（避免后续扩展代码时出现逻辑错误）；
- 多分支中，只会执行第一个满足条件的代码块，后续条件即使成立也会被跳过。
二、if 语句的常见应用场景
2.1 场景 1：参数合法性校验
在函数或接口调用中，首先用 if 判断参数是否符合要求，提前拦截非法输入，是保障程序稳定性的基础操作。
示例：实现一个「计算两数相加」的函数，要求参数必须是数字：
javascript
体验AI代码助手
代码解读
复制代码
function add(a, b) {
// 校验参数是否为数字
if (typeof a !== 'number' || typeof b !== 'number') {
return new Error('参数必须是数字类型');
}
// 校验通过，执行核心逻辑
return a + b;
}
// 测试
console.log(add(2, 3)); // 5
console.log(add(2, '3')); // Error: 参数必须是数字类型
2.2 场景 2：业务逻辑分支判断
根据不同的业务状态或用户属性，用 if 执行对应的逻辑，比如根据用户等级发放不同的优惠券。
示例：根据用户等级（普通 / 会员 / VIP）发放优惠券：
ini
体验AI代码助手
代码解读
复制代码
function getCoupon(userLevel) {
let couponAmount = 0;
if (userLevel === '普通用户') {
couponAmount = 10; // 普通用户发10元券
} else if (userLevel === '会员') {
couponAmount = 30; // 会员发30元券
} else if (userLevel === 'VIP') {
couponAmount = 50; // VIP发50元券
} else {
return '未知用户等级，无法发放优惠券';
}
return `您的优惠券金额：${couponAmount}元`;
}
// 测试
console.log(getCoupon('会员')); // 您的优惠券金额：30元
console.log(getCoupon('SVIP')); // 未知用户等级，无法发放优惠券
2.3 场景 3：嵌套条件判断
当业务逻辑需要「多层条件筛选」时，可使用嵌套 if（但需注意嵌套层数，避免过度复杂）。
示例：判断一个学生的考试成绩是否合格，且是否需要补考（总分 100 分，60 分合格，合格但低于 70 分需补考）：
javascript
体验AI代码助手
代码解读
复制代码
function checkExamScore(score) {
if (score >= 0 && score <= 100) { // 第一层：先校验分数是否在合理范围
if (score >= 60) { // 第二层：分数合格
if (score < 70) { // 第三层：合格但需补考
return '成绩合格，但需参加补考';
} else {
return '成绩合格，无需补考';
}
} else {
return '成绩不合格，需重新考试';
}
} else {
return '分数输入错误（需在0-100之间）';
}
}
// 测试
console.log(checkExamScore(65)); // 成绩合格，但需参加补考
console.log(checkExamScore(105)); // 分数输入错误（需在0-100之间）
三、if 语句的进阶技巧：写出更优雅的代码
3.1 技巧 1：提前 return，减少嵌套层级
当嵌套 if 超过 2 层时，代码可读性会大幅下降。此时可通过「提前 return 非法条件」，将嵌套结构转为平铺结构。
优化前（嵌套层级深） ：
kotlin
体验AI代码助手
代码解读
复制代码
function handleUserRequest(user, requestType) {
if (user.isLogin) { // 第一层：用户已登录
if (user.hasPermission(requestType)) { // 第二层：用户有权限
if (requestType === 'read') { // 第三层：请求类型是读取
return '执行读取操作';
} else if (requestType === 'write') {
return '执行写入操作';
}
} else {
return '无权限访问';
}
} else {
return '请先登录';
}
}
优化后（提前 return，无嵌套） ：
kotlin
体验AI代码助手
代码解读
复制代码
function handleUserRequest(user, requestType) {
// 非法条件提前 return，减少嵌套
if (!user.isLogin) return '请先登录';
if (!user.hasPermission(requestType)) return '无权限访问';
// 核心逻辑平铺处理
if (requestType === 'read') return '执行读取操作';
if (requestType === 'write') return '执行写入操作';
}
3.2 技巧 2：多条件判断用「数组 includes」替代多个 ||
当 if 的条件是「判断某个值是否在多个选项中」时，用 Array.includes() 替代多个 ||，代码更简洁。
优化前（多个 ||，冗长） ：
javascript
体验AI代码助手
代码解读
复制代码
function checkValidCity(city) {
if (city === '北京' || city === '上海' || city === '广州' || city === '深圳') {
return '一线城市，支持配送';
} else {
return '暂不支持该城市配送';
}
}
优化后（Array.includes，简洁） ：
javascript
体验AI代码助手
代码解读
复制代码
function checkValidCity(city) {
const supportCities = ['北京', '上海', '广州', '深圳'];
if (supportCities.includes(city)) {
return '一线城市，支持配送';
} else {
return '暂不支持该城市配送';
}
}
3.3 技巧 3：复杂条件抽离为单独函数
当 if 的条件表达式过于复杂（比如包含多个逻辑运算符、函数调用）时，将条件抽离为单独的函数，提升代码可读性。
优化前（条件表达式复杂） ：
vbnet
体验AI代码助手
代码解读
复制代码
function canSubmitOrder(order) {
// 条件表达式冗长，难以快速理解
if (order.goods.length > 0 && order.totalAmount >= 10 && !order.isExpired && order.userAddress) {
return true;
} else {
return false;
}
}
优化后（条件抽离为函数） ：
javascript
体验AI代码助手
代码解读
复制代码
function canSubmitOrder(order) {
// 调用单独函数，条件含义一目了然
if (isOrderValid(order)) {
return true;
} else {
return false;
}
}
// 抽离的条件判断函数
function isOrderValid(order) {
const hasGoods = order.goods.length > 0; // 有商品
const meetMinAmount = order.totalAmount >= 10; // 满足最低金额
const notExpired = !order.isExpired; // 未过期
const hasAddress = !!order.userAddress; // 有收货地址
return hasGoods && meetMinAmount && notExpired && hasAddress;
}
四、if 语句的常见陷阱，你踩过几个？
4.1 陷阱 1：混淆「==」和「===」导致的类型转换错误
在 JavaScript 中，== 会自动进行类型转换，而 === 严格判断类型和值。使用 == 可能导致意想不到的结果。
反例：
ini
体验AI代码助手
代码解读
复制代码
const score = '60';
if (score == 60) { // '60' 转数字后等于 60，条件为 true
console.log('成绩合格'); // 会执行，但实际 score 是字符串类型
}
正例：使用 === 严格判断：
arduino
体验AI代码助手
代码解读
复制代码
const score = '60';
if (score === 60) { // 字符串和数字类型不同，条件为 false
console.log('成绩合格'); // 不执行
} else {
console.log('分数类型错误'); // 正确执行
}
4.2 陷阱 2：多分支中遗漏 else，导致逻辑不完整
当业务需要「覆盖所有可能情况」时，遗漏 else 会导致部分场景下没有返回值，出现 undefined。
反例：
sql
体验AI代码助手
代码解读
复制代码
function getSeason(month) {
if (month >= 3 && month <= 5) {
return '春季';
} else if (month >= 6 && month <= 8) {
return '夏季';
} else if (month >= 9 && month <= 11) {
return '秋季';
}
// 当 month 为 12、1、2 时，没有返回值，结果为 undefined
}
正例：补充 else 覆盖所有情况：
sql
体验AI代码助手
代码解读
复制代码
function getSeason(month) {
if (month >= 3 && month <= 5) {
return '春季';
} else if (month >= 6 && month <= 8) {
return '夏季';
} else if (month >= 9 && month <= 11) {
return '秋季';
} else {
return '冬季'; // 覆盖 12、1、2 的情况
}
}
4.3 陷阱 3：过度嵌套导致「回调地狱」式代码
当 if 嵌套层数过多（比如超过 3 层），代码会像「金字塔」一样向右延伸，可读性极差。
反例：
vbnet
体验AI代码助手
代码解读
复制代码
function processOrder(order) {
if (order.paid) {
if (order.stock > 0) {
if (order.address) {
if (order.coupon) {
return '使用优惠券后发货';
} else {
return '直接发货';
}
} else {
return '缺少收货地址';
}
} else {
return '库存不足';
}
} else {
return '未付款';
}
}
正例：用「提前 return」优化：
vbnet
体验AI代码助手
代码解读
复制代码
function processOrder(order) {
if (!order.paid) return '未付款';
if (order.stock <= 0) return '库存不足';
if (!order.address) return '缺少收货地址';
return order.coupon ? '使用优惠券后发货' : '直接发货';
}
五、总结：写好 if 语句的 3 个核心原则
- 可读性优先：不要为了「精简代码」而牺牲可读性，比如将复杂条件写在一行、省略必要的大括号；
- 减少嵌套层级：通过「提前 return 非法条件」，将嵌套结构转为平铺结构，嵌套层数尽量不超过 2 层；
- 覆盖所有场景：在多分支判断中，用 else 或明确的条件覆盖所有可能情况，避免出现 undefined 或逻辑漏洞。
标签：人工智能 作者：白曦
链接：juejin.cn/post/756084…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处
