介紹

如果你像我一樣樂于見到整潔的代碼，那么你會盡可能地減少代碼中的條件語句。通常情況下，面向對象編程讓我們得以避免條件式，并代之以繼承和多態。我認為我們應當盡可能地遵循這些原則。

正如我在另一篇文章 JavaScript 整潔代碼的最佳實踐里提到的，你寫的代碼不單單是給機器看的，還是給“未來的自己”以及“其他人”看的。

從另一方面來說，由于各式各樣的原因，可能我們的代碼最終還是會有條件式。也許是修復 bug 的時間很緊，也許是不使用條件語句會對我們的代碼庫造成大的改動，等等。本文將會解決這些問題，同時幫助你組織所用的條件語句。

技巧

以下是關于如何構造 if...else 語句以及如何用更少的代碼實現更多功能的技巧。閱讀愉快!

1. 要事第一。小細節，但很重要

不要使用否定條件式(這可能會讓人感到疑惑)。同時，使用條件式簡寫來表示 boolean 值。這個無須再強調了，尤其是否定條件式，這不符合正常的思維方式。

不好的：

const isEmailNotVerified = (email) => { // 實現 } if (!isEmailNotVerified(email)) { // 做一些事... } if (isVerified === true) { // 做一些事... } 

好的：

const isEmailVerified = (email) => { // 實現 } if (isEmailVerified(email)) { // 做一些事... } if (isVerified) { // 做一些事... } 

現在，理清了上面的事情后，我們就可以開始了。

2. 對于多個條件，使用 Array.includes

假設我們想要在函數中檢查汽車模型是 renault 還是 peugeot。那么代碼可能是這樣的：

const checkCarModel = (model) => { if(model === 'renault' || model === 'peugeot') { console.log('model valid'); } } checkCarModel('renault'); // 輸出 'model valid' 

考慮到我們只有兩個模型，這么做似乎也還能接受，但如果我們還想要檢查另一個或者是幾個模型呢?如果我們增加更多 or 語句，那么代碼將變得難以維護，且不夠整潔。為了讓它更加簡潔，我們可以像這樣重寫函數：

const checkCarModel = (model) => { if(['peugeot', 'renault'].includes(model)) { console.log('model valid'); } } checkCarModel('renault'); // 輸出 'model valid' 

上面的代碼看起來已經很漂亮了。為了更進一步改善它，我們可以創建一個變量來存放汽車模型：

const checkCarModel = (model) => { const models = ['peugeot', 'renault']; if(models.includes(model)) { console.log('model valid'); } } checkCarModel('renault'); // 輸出 'model valid' 

現在，如果我們想要檢查更多模型，只需要添加一個新的數組元素即可。此外，如果它很重要的話，我們還可以將 models 變量定義在函數作用域外，并在需要的地方重用。這種方式可以讓我們集中管理，并使維護變得輕而易舉，因為我們只需在代碼中更改一個位置。