如何編寫更好的JavaScript條件式和匹配條件

這篇文章將為大家詳細講解有關如何編寫更好的JavaScript條件式和匹配條件，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

介紹

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

正如我在另一篇文章 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 變量定義在函數作用域外，并在需要的地方重用。這種方式可以讓我們集中管理，并使維護變得輕而易舉，因為我們只需在代碼中更改一個位置。

3. 匹配所有條件，使用 Array.every 或者 Array.find

在本例中，我們想要檢查每個汽車模型是否都是傳入函數的那一個。為了以更加命令式的方式實現，我們會這么做：

const cars = [ 
{ model: 'renault', year: 1956 }, 
{ model: 'peugeot', year: 1968 }, 
{ model: 'ford', year: 1977 } 
]; 
const checkEveryModel = (model) => { 
let isValid = true; 
for (let car of cars) { 
if (!isValid) { 
break; 
} 
isValid = car.model === model; 
} 
return isValid; 
} 
console.log(checkEveryModel('renault')); // 輸出 false

如果你更喜歡以命令式的風格行事，上面的代碼或許還不錯。另一方面，如果你不關心其背后發生了什么，那么你可以重寫上面的函數并使用 Array.every 或者 Array.find 來達到相同的結果。

const checkEveryModel = (model) => { 
return cars.every(car => car.model === model); 
} 
console.log(checkEveryModel('renault')); // 輸出 false

通過使用 Array.find 并做輕微的調整，我們可以達到相同的結果。兩者的表現是一致的，因為兩個函數都為數組中的每一個元素執行了回調，并且在找到一個 falsy 項時立即返回 false。

const checkEveryModel = (model) => { 
return cars.find(car => car.model !== model) === undefined; 
} 
console.log(checkEveryModel('renault')); // 輸出 false

4. 匹配部分條件，使用 Array.some

Array.every 匹配所有條件，這個方法則可以輕松地檢查我們的數組是否包含某一個或某幾個元素。為此，我們需要提供一個回調并基于條件返回一個布爾值。

我們可以通過編寫一個類似的 for...loop 語句來實現相同的結果，就像之前寫的一樣。但幸運的是，有很酷的 JavaScript 函數可以來幫助我們完成這件事。

const cars = [ 
{ model: 'renault', year: 1956 }, 
{ model: 'peugeot', year: 1968 }, 
{ model: 'ford', year: 1977 } 
]; 
const checkForAnyModel = (model) => { 
return cars.some(car => car.model === model); 
} 
console.log(checkForAnyModel('renault')); // 輸出 true

5. 提前返回而不是使用 if...else 分支

當我還是學生的時候，就有人教過我：一個函數應該只有一個返回語句，并且只從一個地方返回。如果細心處理，這個方法倒也還好。我這么說也就意味著，我們應該意識到它在某些情況下可能會引起條件式嵌套地獄。如果不受控制，多個分支和 if...else 嵌套將會讓我們感到很痛苦。

另一方面，如果代碼庫很大且包含很多行代碼，位于深層的一個返回語句可能會帶來問題。現在我們都實行關注點分離和 SOLID 原則，因此，代碼行過多這種情況挺罕見的。

舉例來解釋這個問題。假設我們想要顯示所給車輛的模型和生產年份：

const checkModel = (car) => { 
let result; // 首先，定義一個 result 變量 
// 檢查是否有車 
if(car) { 
// 檢查是否有車的模型 
if (car.model) { 
// 檢查是否有車的年份 
if(car.year) { 
result = `Car model: ${car.model}; Manufacturing year: ${car.year};`; 
} else { 
result = 'No car year'; 
} 
} else { 
result = 'No car model' 
} 
} else { 
result = 'No car'; 
} 
return result; // 我們的單獨的返回語句 
} 
console.log(checkModel()); // 輸出 'No car' 
console.log(checkModel({ year: 1988 })); // 輸出 'No car model' 
console.log(checkModel({ model: 'ford' })); // 輸出 'No car year' 
console.log(checkModel({ model: 'ford', year: 1988 })); // 輸出 'Car model: ford; Manufacturing year: 1988;'

正如你所看到的，即使本例的問題很簡單，上面的代碼也實在太長了。可以想象一下，如果我們有更加復雜的邏輯會發生什么事。大量的 if...else 語句。

我們可以重構上面的函數，分解成多個步驟并稍做改善。例如，使用三元操作符，包括 && 條件式等。不過，這里我直接跳到最后，向你展示借助現代 JavaScript 特性和多個返回語句，代碼可以有多簡潔。

const checkModel = ({model, year} = {}) => { 
if(!model && !year) return 'No car'; 
if(!model) return 'No car model'; 
if(!year) return 'No car year'; 
// 這里可以任意操作模型或年份 
// 確保它們存在 
// 無需更多檢查 
// doSomething(model); 
// doSomethingElse(year); 
return `Car model: ${model}; Manufacturing year: ${year};`; 
} 
console.log(checkModel()); // 輸出 'No car' 
console.log(checkModel({ year: 1988 })); // 輸出 'No car model' 
console.log(checkModel({ model: 'ford' })); // 輸出 'No car year' 
console.log(checkModel({ model: 'ford', year: 1988 })); // 輸出 'Car model: ford; Manufacturing year: 1988;'

在重構版本中，我們包含了解構和默認參數。默認參數確保我們在傳入 undefined 時有可用于解構的值。注意，如果傳入 null ，函數將會拋出錯誤。這也是之前那個方法的優點所在，因為那個方法在傳入 null 的時候會輸出 'No car'。

對象解構確保函數只取所需。例如，如果我們在給定車輛對象中包含額外屬性，則該屬性在我們的函數中是無法獲取的。

根據偏好，開發者會選擇其中一種方式。實踐中，編寫的代碼通常介于兩者之間。很多人覺得 if...else 語句更容易理解，并且有助于他們更為輕松地遵循程序流程。

6. 使用索引或者映射，而不是 switch 語句

假設我們想要基于給定的國家獲取汽車模型。

const getCarsByState = (state) => { 
switch (state) { 
case 'usa': 
return ['Ford', 'Dodge']; 
case 'france': 
return ['Renault', 'Peugeot']; 
case 'italy': 
return ['Fiat']; 
default: 
return []; 
} 
} 
console.log(getCarsByState()); // 輸出 [] 
console.log(getCarsByState('usa')); // 輸出 ['Ford', 'Dodge'] 
console.log(getCarsByState('italy')); // 輸出 ['Fiat']

上訴代碼可以重構，完全去除 switch 語句。

const cars = new Map() 
.set('usa', ['Ford', 'Dodge']) 
.set('france', ['Renault', 'Peugeot']) 
.set('italy', ['Fiat']); 
const getCarsByState = (state) => { 
return cars.get(state) || []; 
} 
console.log(getCarsByState()); // 輸出 [] 
console.log(getCarsByState('usa')); //輸出 ['Ford', 'Dodge'] 
console.log(getCarsByState('italy')); // 輸出 ['Fiat']

或者，我們還可以為包含可用汽車列表的每個國家創建一個類，并在需要的時候使用。不過這個就是題外話了，本文的主題是關于條件句的。更恰當的修改是使用對象字面量。

const carState = { 
usa: ['Ford', 'Dodge'], 
france: ['Renault', 'Peugeot'], 
italy: ['Fiat'] 
}; 
const getCarsByState = (state) => { 
return carState[state] || []; 
} 
console.log(getCarsByState()); // 輸出 [] 
console.log(getCarsByState('usa')); // 輸出 ['Ford', 'Dodge'] 
console.log(getCarsByState('france')); // 輸出 ['Renault', 'Peugeot']

7. 使用自判斷鏈接和空合并

到了這一小節，我終于可以說“最后”了。在我看來，這兩個功能對于 JavaScript 語言來說是非常有用的。作為一個來自 C# 世界的人，可以說我經常使用它們。

在寫這篇文章的時候，這些還沒有得到完全的支持。因此，對于以這種方式編寫的代碼，你需要使用 Babel 進行編譯。你可以在自判斷鏈接這里以及在空合并這里查閱。

自判斷鏈接允許我們在沒有顯式檢查中間節點是否存在的時候處理樹形結構，空合并可以確保節點不存在時會有一個默認值，配合自判斷鏈接使用會有不錯的效果。

讓我們用一些例子來支撐上面的結論。一開始，我們還是用以前的老方法：

const car = { 
model: 'Fiesta', 
manufacturer: { 
name: 'Ford', 
address: { 
street: 'Some Street Name', 
number: '5555', 
state: 'USA' 
} 
} 
} 
// 獲取汽車模型 
const model = car && car.model || 'default model'; 
// 獲取廠商地址 
const street = car && car.manufacturer && car.manufacturer.address && car.manufacturer.address.street || 'default street'; 
// 請求一個不存在的屬性 
const phoneNumber = car && car.manufacturer && car.manufacturer.address && car.manufacturer.phoneNumber; 
console.log(model) // 輸出 'Fiesta' 
console.log(street) // 輸出 'Some Street Name' 
console.log(phoneNumber) // 輸出 undefined

因此，如果我們想要知道廠商是否來自 USA 并將結果打印，那么代碼是這樣的：

const checkCarManufacturerState = () => { 
if(car && car.manufacturer && car.manufacturer.address && car.manufacturer.address.state === 'USA') { 
console.log('Is from USA'); 
} 
} 
checkCarManufacturerState() // 輸出 'Is from USA'

我無需再贅述如果對象結構更加復雜的話，代碼會多么混亂了。許多庫，例如 lodash，有自己的函數作為替代方案。不過這不是我們想要的，我們想要的是在原生 js 中也能做同樣的事。我們來看一下新的方法：

// 獲取汽車模型 
const model = car?.model ?? 'default model'; 
// 獲取廠商地址 
const street = car?.manufacturer?.address?.street ?? 'default street'; 
// 檢查汽車廠商是否來自 USA 
const checkCarManufacturerState = () => { 
if(car?.manufacturer?.address?.state === 'USA') { 
console.log('Is from USA'); 
} 
}

這看起來更加漂亮和簡潔，對我來說，非常符合邏輯。如果你想知道為什么應該使用 ?? 而不是 || ，只需想一想什么值可以當做 true 或者 false，你將可能有意想不到的輸出。

順便說句題外話。自判斷鏈接同樣支持 DOM API，這非常酷，意味著你可以這么做：

const value = document.querySelector('input#user-name')?.value;

關于“如何編寫更好的JavaScript條件式和匹配條件”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。