嵌套 if 的典型用例：您希望对某些数据执行各种检查，以确保其有效，然后再最终对其进行有用的操作。
不要这样做！:
// JavaScript
function sendMoney(account, amount) {
if (account.balance > amount) {
if (amount > 0) {
if (account.sender === 'user-token') {
account.balance -= amount;
console.log('Transfer completed');
} else {
console.log('Forbidden user');
}
} else {
console.log('Invalid transfer amount');
}
} else {
console.log('Insufficient funds');
}
}这里有一个更好的方法：
// JavaScript
function sendMoney(account, amount) {
if (account.balance < amount) {
console.log('Insufficient funds');
return;
}
if (amount <= 0) {
console.log('Invalid transfer amount');
return;
}
if (account.sender !== 'user-token') {
console.log('Forbidden user');
return;
}
account.balance -= amount;
console.log('Transfer completed');
}看看它清洁了多少？我们没有嵌套 if，而是使用多个 if 语句来执行检查，如果条件不满足则立即返回。在这种模式中，我们可以将每个 if 语句称为保护子句。
如果您经常使用 Node.js，您可能在 Express 中间件中看到过以下流程：
// JavaScript
function authMiddleware(req, res, next) {
const authToken = req.headers.authorization;
if (!authToken) {
return res.status(401).json({ error: 'Unauthorized' });
}
if (authToken !== 'secret-token') {
return res.status(401).json({ error: 'Invalid token' });
}
if (req.query.admin === 'true') {
req.isAdmin = true;
}
next();
}这比前面好多了，对吧？:
// JavaScript
function authMiddleware(req, res, next) => {
const authToken = req.headers.authorization;
if (authToken) {
if (authToken === 'secret-token') {
if (req.query.admin === 'true') {
req.isAdmin = true;
}
return next();
} else {
return res.status(401).json({ error: 'Invalid token' });
}
} else {
return res.status(401).json({ error: 'Unauthorized' });
}
};你永远不会超出一层嵌套。我们可以避免回调地狱中出现的混乱情况。
如何将嵌套的 if 转换为保护子句
这样做的逻辑很简单：
1.找到最里面的/成功if
这里我们可以清楚地看到它是 cond3 if。在此之后，如果我们不再进行任何检查并采取我们一直想要采取的行动。
// JavaScript
function func(cond1, cond2, cond3) {
if (cond1) {
if (cond2) {
if (cond3) {
console.log('PASSED!');
console.log('taking success action...');
} else {
console.log('failed condition 3');
}
} else {
console.log('failed condition 2');
}
} else {
console.log('failed condition 1');
}
}2.将最外层的if取反并返回
否定 if 条件以将 else 语句的主体放在那里并在后面添加 return。
删除 else 大括号（保留正文，它仍然包含以前嵌套的 if，并将右 if 大括号移到 return 之后。
所以：
// JavaScript
function func(cond1, cond2, cond3) {
if (!cond1) { // 👈 inverted if condition
// 👇 body of former else clause
console.log('failed condition 1');
return; // 👈 exit on fail
}
// 👇 remaining nested ifs to convert to guard clauses
if (cond2) {
if (cond3) {
console.log('PASSED!');
console.log('taking success action...');
} else {
console.log('failed condition 3');
}
} else {
console.log('failed condition 2');
}
}3. 对每个嵌套的 if 执行同样的操作，直到成功 if
// JavaScript
function func(cond1, cond2, cond3) {
if (!cond1) {
console.log('failed condition 1');
return;
}
if (!cond2) {
console.log('failed condition 2');
return;
}
// 👇 remaining nested ifs to convert
if (cond3) {
console.log('PASSED!');
console.log('taking success action...');
} else {
console.log('failed condition 3');
}
}最后：
// JavaScript
function func(cond1, cond2, cond3) {
if (!cond1) {
console.log('failed condition 1');
return;
}
if (!cond2) {
console.log('failed condition 2');
return;
}
if (!cond3) {
console.log('failed condition 3');
return;
}
console.log('PASSED!');
console.log('taking success action...');
}提示：
安装 JavaScript Booster 扩展后，在 VS Code 中反转 if 语句很容易。
在这里，我们只需将光标放在 if 关键字上并激活“显示代码操作”命令（默认情况下为 Ctrl + .）
提示：
将保护子句拆分为多个函数以始终避免 else
如果我们在 if/else 中检查数据后想做其他事情怎么办？例如：
// JavaScript
function func(cond1, cond2) {
if (cond1) {
if (cond2) {
console.log('PASSED!');
console.log('taking success action...');
} else {
console.log('failed condition 2');
}
console.log('after cond2 check');
} else {
console.log('failed condition 1');
}
console.log('after cond1 check');
}在此函数中，无论 cond1 的值如何，“after cond1 check”行仍将打印。如果 cond1 为 true，则 cond2 值也类似。
在这种情况下，使用保护子句需要做更多的工作：
如果我们尝试使用保护子句，我们最终会重复 if/else 检查之后的行：
function func(cond1, cond2) {
if (!cond1) {
console.log('failed condition 1');
console.log('after cond1 check');
return;
}
if (!cond2) {
console.log('failed condition 2');
console.log('after cond2 check');
console.log('after cond1 check');
return;
}
console.log('PASSED!');
console.log('taking success action...');
console.log('after cond2 check');
console.log('after cond1 check');
}
func(true);因为必须打印这些行，所以我们在返回之前在保护子句中打印它们。然后，我们在所有（！）以下保护子句中打印它。再次，在主函数体中，如果所有的保护子句都通过了。
那么我们能做些什么呢？我们怎样才能在使用保护子句的同时仍然坚持 DRY 原则呢？
好吧，我们将逻辑拆分为多个函数：
// JavaScript
function func(cond1, cond2) {
checkCond1(cond1, cond2);
console.log('after cond1 check');
}
function checkCond1(cond1, cond2) {
if (!cond1) {
console.log('failed condition 1');
return;
}
checkCond2(cond2);
console.log('after cond2 check');
}
function checkCond2(cond2) {
if (!cond2) {
console.log('failed condition 2');
return;
}
console.log('PASSED!');
console.log('taking success action...');
}让我们将其应用到我们之前看到的 Express 中间件中：
// JavaScript
function authMiddleware(req, res, next) {
checkAuthValidTokenAdmin(req, res, next);
}
function checkAuthValidTokenAdmin(req, res, next) {
const authToken = req.headers.authorization;
if (!authToken) {
return res.status(401).json({ error: 'Unauthorized' });
}
checkValidTokenAdmin(req, res, next);
}
function checkValidTokenAdmin(req, res, next) {
const authToken = req.headers.authorization;
if (authToken !== 'secret-token') {
return res.status(401).json({ error: 'Invalid token' });
}
checkAdmin(req, res, next);
}
function checkAdmin(req, res, next) {
if (req.query.admin === 'true') {
req.isAdmin = true;
}
next();
}在某种程度上，我们用责任链模式替换了 if/else 语句。
当然，对于像基本 Express 请求中间件这样的简单逻辑来说，这可能有点过分了，但这里的优点是它将每个额外的检查委托给一个单独的函数，分离职责并防止过度嵌套。
总结
在代码中使用嵌套的 if 可能会导致代码复杂且难以维护。相反，我们可以使用保护子句来使我们的代码更具可读性和线性性。我们可以将保护子句应用于不同的场景，并将其拆分为多个功能，以避免重复和职责分割。通过采用这种模式，我们最终会编写出更干净、更易于维护的代码。
