請(qǐng)停止使用嵌套的 if，改為此方法
嵌套 if 的典型用例：您希望對(duì)某些數(shù)據(jù)執(zhí)行各種檢查，以確保其有效，然后再最終對(duì)其進(jìn)行有用的操作。
不要這樣做！:
// 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');
}
}這里有一個(gè)更好的方法：
// 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，而是使用多個(gè) if 語句來執(zhí)行檢查，如果條件不滿足則立即返回。在這種模式中，我們可以將每個(gè) if 語句稱為保護(hù)子句。
如果您經(jīng)常使用 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();
}這比前面好多了，對(duì)吧？:
// 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' });
}
};你永遠(yuǎn)不會(huì)超出一層嵌套。我們可以避免回調(diào)地獄中出現(xiàn)的混亂情況。
如何將嵌套的 if 轉(zhuǎn)換為保護(hù)子句
這樣做的邏輯很簡單：
1.找到最里面的/成功if
這里我們可以清楚地看到它是 cond3 if。在此之后，如果我們不再進(jìn)行任何檢查并采取我們一直想要采取的行動(dòng)。
// 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 大括號(hào)（保留正文，它仍然包含以前嵌套的 if，并將右 if 大括號(hào)移到 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. 對(duì)每個(gè)嵌套的 if 執(zhí)行同樣的操作，直到成功 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 擴(kuò)展后，在 VS Code 中反轉(zhuǎn) if 語句很容易。
在這里，我們只需將光標(biāo)放在 if 關(guān)鍵字上并激活“顯示代碼操作”命令（默認(rèn)情況下為 Ctrl + .）
提示：
將保護(hù)子句拆分為多個(gè)函數(shù)以始終避免 else
如果我們?cè)?if/else 中檢查數(shù)據(jù)后想做其他事情怎么辦？例如：
// 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');
}在此函數(shù)中，無論 cond1 的值如何，“after cond1 check”行仍將打印。如果 cond1 為 true，則 cond2 值也類似。
在這種情況下，使用保護(hù)子句需要做更多的工作：
如果我們嘗試使用保護(hù)子句，我們最終會(huì)重復(fù) 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);因?yàn)楸仨毚蛴∵@些行，所以我們?cè)诜祷刂霸诒Ｗo(hù)子句中打印它們。然后，我們?cè)谒校ǎ。┮韵卤Ｗo(hù)子句中打印它。再次，在主函數(shù)體中，如果所有的保護(hù)子句都通過了。
那么我們能做些什么呢？我們?cè)鯓硬拍茉谑褂帽Ｗo(hù)子句的同時(shí)仍然堅(jiān)持 DRY 原則呢？
好吧，我們將邏輯拆分為多個(gè)函數(shù)：
// 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...');
}讓我們將其應(yīng)用到我們之前看到的 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();
}在某種程度上，我們用責(zé)任鏈模式替換了 if/else 語句。
當(dāng)然，對(duì)于像基本 Express 請(qǐng)求中間件這樣的簡單邏輯來說，這可能有點(diǎn)過分了，但這里的優(yōu)點(diǎn)是它將每個(gè)額外的檢查委托給一個(gè)單獨(dú)的函數(shù)，分離職責(zé)并防止過度嵌套。
總結(jié)
在代碼中使用嵌套的 if 可能會(huì)導(dǎo)致代碼復(fù)雜且難以維護(hù)。相反，我們可以使用保護(hù)子句來使我們的代碼更具可讀性和線性性。我們可以將保護(hù)子句應(yīng)用于不同的場(chǎng)景，并將其拆分為多個(gè)功能，以避免重復(fù)和職責(zé)分割。通過采用這種模式，我們最終會(huì)編寫出更干凈、更易于維護(hù)的代碼。
