編寫(xiě)更好的JavaScript條件式和匹配條件的技巧(小結(jié))
介紹
如果你像我一樣樂(lè)于見(jiàn)到整潔的代碼，那么你會(huì)盡可能地減少代碼中的條件語(yǔ)句。通常情況下，面向?qū)ο缶幊套屛覀兊靡员苊鈼l件式，并代之以繼承和多態(tài)。我認(rèn)為我們應(yīng)當(dāng)盡可能地遵循這些原則。
正如我在另一篇文章 JavaScript 整潔代碼的最佳實(shí)踐里提到的，你寫(xiě)的代碼不單單是給機(jī)器看的，還是給“未來(lái)的自己”以及“其他人”看的。
從另一方面來(lái)說(shuō)，由于各式各樣的原因，可能我們的代碼最終還是會(huì)有條件式。也許是修復(fù) bug 的時(shí)間很緊，也許是不使用條件語(yǔ)句會(huì)對(duì)我們的代碼庫(kù)造成大的改動(dòng)，等等。本文將會(huì)解決這些問(wèn)題，同時(shí)幫助你組織所用的條件語(yǔ)句。
技巧
以下是關(guān)于如何構(gòu)造 if...else 語(yǔ)句以及如何用更少的代碼實(shí)現(xiàn)更多功能的技巧。閱讀愉快!
1. 要事第一。小細(xì)節(jié)，但很重要
不要使用否定條件式(這可能會(huì)讓人感到疑惑)。同時(shí)，使用條件式簡(jiǎn)寫(xiě)來(lái)表示 boolean 值。這個(gè)無(wú)須再?gòu)?qiáng)調(diào)了，尤其是否定條件式，這不符合正常的思維方式。
不好的：
const isEmailNotVerified = (email) => {
// 實(shí)現(xiàn)
}
if (!isEmailNotVerified(email)) {
// 做一些事...
}
if (isVerified === true) {
// 做一些事...
}
好的：
const isEmailVerified = (email) => {
// 實(shí)現(xiàn)
}
if (isEmailVerified(email)) {
// 做一些事...
}
if (isVerified) {
// 做一些事...
}
現(xiàn)在，理清了上面的事情后，我們就可以開(kāi)始了。
2. 對(duì)于多個(gè)條件，使用 Array.includes
假設(shè)我們想要在函數(shù)中檢查汽車模型是 renault 還是 peugeot。那么代碼可能是這樣的：
const checkCarModel = (model) => {
if(model === 'renault' || model === 'peugeot') {
console.log('model valid');
}
}
checkCarModel('renault'); // 輸出 'model valid'
考慮到我們只有兩個(gè)模型，這么做似乎也還能接受，但如果我們還想要檢查另一個(gè)或者是幾個(gè)模型呢?如果我們?cè)黾痈?or 語(yǔ)句，那么代碼將變得難以維護(hù)，且不夠整潔。為了讓它更加簡(jiǎn)潔，我們可以像這樣重寫(xiě)函數(shù)：
const checkCarModel = (model) => {
if(['peugeot', 'renault'].includes(model)) {
console.log('model valid');
}
}
checkCarModel('renault'); // 輸出 'model valid'
上面的代碼看起來(lái)已經(jīng)很漂亮了。為了更進(jìn)一步改善它，我們可以創(chuàng)建一個(gè)變量來(lái)存放汽車模型：
const checkCarModel = (model) => {
const models = ['peugeot', 'renault'];
if(models.includes(model)) {
console.log('model valid');
}
}
checkCarModel('renault'); // 輸出 'model valid'
現(xiàn)在，如果我們想要檢查更多模型，只需要添加一個(gè)新的數(shù)組元素即可。此外，如果它很重要的話，我們還可以將 models 變量定義在函數(shù)作用域外，并在需要的地方重用。這種方式可以讓我們集中管理，并使維護(hù)變得輕而易舉，因?yàn)槲覀冎恍柙诖a中更改一個(gè)位置。
3. 匹配所有條件，使用 Array.every 或者 Array.find
在本例中，我們想要檢查每個(gè)汽車模型是否都是傳入函數(shù)的那一個(gè)。為了以更加命令式的方式實(shí)現(xiàn)，我們會(huì)這么做：
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
如果你更喜歡以命令式的風(fēng)格行事，上面的代碼或許還不錯(cuò)。另一方面，如果你不關(guān)心其背后發(fā)生了什么，那么你可以重寫(xiě)上面的函數(shù)并使用 Array.every 或者 Array.find 來(lái)達(dá)到相同的結(jié)果。
const checkEveryModel = (model) => {
return cars.every(car => car.model === model);
}
console.log(checkEveryModel('renault')); // 輸出 false
通過(guò)使用 Array.find 并做輕微的調(diào)整，我們可以達(dá)到相同的結(jié)果。兩者的表現(xiàn)是一致的，因?yàn)閮蓚€(gè)函數(shù)都為數(shù)組中的每一個(gè)元素執(zhí)行了回調(diào)，并且在找到一個(gè) falsy 項(xiàng)時(shí)立即返回 false。
const checkEveryModel = (model) => {
return cars.find(car => car.model !== model) === undefined;
}
console.log(checkEveryModel('renault')); // 輸出 false
4. 匹配部分條件，使用 Array.some
Array.every 匹配所有條件，這個(gè)方法則可以輕松地檢查我們的數(shù)組是否包含某一個(gè)或某幾個(gè)元素。為此，我們需要提供一個(gè)回調(diào)并基于條件返回一個(gè)布爾值。
我們可以通過(guò)編寫(xiě)一個(gè)類似的 for...loop 語(yǔ)句來(lái)實(shí)現(xiàn)相同的結(jié)果，就像之前寫(xiě)的一樣。但幸運(yùn)的是，有很酷的 JavaScript 函數(shù)可以來(lái)幫助我們完成這件事。
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 分支
當(dāng)我還是學(xué)生的時(shí)候，就有人教過(guò)我：一個(gè)函數(shù)應(yīng)該只有一個(gè)返回語(yǔ)句，并且只從一個(gè)地方返回。如果細(xì)心處理，這個(gè)方法倒也還好。我這么說(shuō)也就意味著，我們應(yīng)該意識(shí)到它在某些情況下可能會(huì)引起條件式嵌套地獄。如果不受控制，多個(gè)分支和 if...else 嵌套將會(huì)讓我們感到很痛苦。
另一方面，如果代碼庫(kù)很大且包含很多行代碼，位于深層的一個(gè)返回語(yǔ)句可能會(huì)帶來(lái)問(wèn)題?，F(xiàn)在我們都實(shí)行關(guān)注點(diǎn)分離和 SOLID 原則，因此，代碼行過(guò)多這種情況挺罕見(jiàn)的。
舉例來(lái)解釋這個(gè)問(wèn)題。假設(shè)我們想要顯示所給車輛的模型和生產(chǎn)年份：
const checkModel = (car) => {
let result; // 首先，定義一個(gè) 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; // 我們的單獨(dú)的返回語(yǔ)句
}
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;'
正如你所看到的，即使本例的問(wèn)題很簡(jiǎn)單，上面的代碼也實(shí)在太長(zhǎng)了?？梢韵胂笠幌?，如果我們有更加復(fù)雜的邏輯會(huì)發(fā)生什么事。大量的 if...else 語(yǔ)句。
我們可以重構(gòu)上面的函數(shù)，分解成多個(gè)步驟并稍做改善。例如，使用三元操作符，包括 && 條件式等。不過(guò)，這里我直接跳到最后，向你展示借助現(xiàn)代 JavaScript 特性和多個(gè)返回語(yǔ)句，代碼可以有多簡(jiǎn)潔。
const checkModel = ({model, year} = {}) => {
if(!model && !year) return 'No car';
if(!model) return 'No car model';
if(!year) return 'No car year';
// 這里可以任意操作模型或年份
// 確保它們存在
// 無(wú)需更多檢查
// 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;'
在重構(gòu)版本中，我們包含了解構(gòu)和默認(rèn)參數(shù)。默認(rèn)參數(shù)確保我們?cè)趥魅?undefined 時(shí)有可用于解構(gòu)的值。注意，如果傳入 null ，函數(shù)將會(huì)拋出錯(cuò)誤。這也是之前那個(gè)方法的優(yōu)點(diǎn)所在，因?yàn)槟莻€(gè)方法在傳入 null 的時(shí)候會(huì)輸出 'No car'。
對(duì)象解構(gòu)確保函數(shù)只取所需。例如，如果我們?cè)诮o定車輛對(duì)象中包含額外屬性，則該屬性在我們的函數(shù)中是無(wú)法獲取的。
根據(jù)偏好，開(kāi)發(fā)者會(huì)選擇其中一種方式。實(shí)踐中，編寫(xiě)的代碼通常介于兩者之間。很多人覺(jué)得 if...else 語(yǔ)句更容易理解，并且有助于他們更為輕松地遵循程序流程。
6. 使用索引或者映射，而不是 switch 語(yǔ)句
假設(shè)我們想要基于給定的國(guó)家獲取汽車模型。
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']
上訴代碼可以重構(gòu)，完全去除 switch 語(yǔ)句。
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']
或者，我們還可以為包含可用汽車列表的每個(gè)國(guó)家創(chuàng)建一個(gè)類，并在需要的時(shí)候使用。不過(guò)這個(gè)就是題外話了，本文的主題是關(guān)于條件句的。更恰當(dāng)?shù)男薷氖鞘褂脤?duì)象字面量。
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. 使用自判斷鏈接和空合并
到了這一小節(jié)，我終于可以說(shuō)“最后”了。在我看來(lái)，這兩個(gè)功能對(duì)于 JavaScript 語(yǔ)言來(lái)說(shuō)是非常有用的。作為一個(gè)來(lái)自 C# 世界的人，可以說(shuō)我經(jīng)常使用它們。
在寫(xiě)這篇文章的時(shí)候，這些還沒(méi)有得到完全的支持。因此，對(duì)于以這種方式編寫(xiě)的代碼，你需要使用 Babel 進(jìn)行編譯。你可以在自判斷鏈接這里以及在空合并這里查閱。
自判斷鏈接允許我們?cè)跊](méi)有顯式檢查中間節(jié)點(diǎn)是否存在的時(shí)候處理樹(shù)形結(jié)構(gòu)，空合并可以確保節(jié)點(diǎn)不存在時(shí)會(huì)有一個(gè)默認(rèn)值，配合自判斷鏈接使用會(huì)有不錯(cuò)的效果。
讓我們用一些例子來(lái)支撐上面的結(jié)論。一開(kāi)始，我們還是用以前的老方法：
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';
// 請(qǐng)求一個(gè)不存在的屬性
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
因此，如果我們想要知道廠商是否來(lái)自 USA 并將結(jié)果打印，那么代碼是這樣的：
const checkCarManufacturerState = () => {
if(car && car.manufacturer && car.manufacturer.address && car.manufacturer.address.state === 'USA') {
console.log('Is from USA');
}
}
checkCarManufacturerState() // 輸出 'Is from USA'
我無(wú)需再贅述如果對(duì)象結(jié)構(gòu)更加復(fù)雜的話，代碼會(huì)多么混亂了。許多庫(kù)，例如 lodash，有自己的函數(shù)作為替代方案。不過(guò)這不是我們想要的，我們想要的是在原生 js 中也能做同樣的事。我們來(lái)看一下新的方法：
// 獲取汽車模型
const model = car?.model ?? 'default model';
// 獲取廠商地址
const street = car?.manufacturer?.address?.street ?? 'default street';
// 檢查汽車廠商是否來(lái)自 USA
const checkCarManufacturerState = () => {
if(car?.manufacturer?.address?.state === 'USA') {
console.log('Is from USA');
}
}
這看起來(lái)更加漂亮和簡(jiǎn)潔，對(duì)我來(lái)說(shuō)，非常符合邏輯。如果你想知道為什么應(yīng)該使用 ?? 而不是 || ，只需想一想什么值可以當(dāng)做 true 或者 false，你將可能有意想不到的輸出。
順便說(shuō)句題外話。自判斷鏈接同樣支持 DOM API，這非?？?，意味著你可以這么做：
const value = document.querySelector('input#user-name')?.value;
結(jié)論
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Js和VUE實(shí)現(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
iframe窗口高度自適應(yīng)的又一個(gè)巧妙實(shí)現(xiàn)思路
這篇文章主要介紹了實(shí)現(xiàn)iframe窗口高度自適應(yīng)的又一個(gè)巧妙思路,需要的朋友可以參考下2014-04-04
JavaScript遍歷數(shù)組的三種方法map、forEach與filter實(shí)例詳解
這篇文章主要介紹了JavaScript遍歷數(shù)組的三種方法map、forEach與filter,結(jié)合實(shí)例形式詳細(xì)分析了javascript針對(duì)數(shù)組遍歷的map、forEach與filter三種方法相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-02-02
Javascript實(shí)現(xiàn)登錄記住用戶名和密碼功能
本文主要介紹了Javascript實(shí)現(xiàn)登錄記住用戶名和密碼功能的代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
JavaScript實(shí)現(xiàn)簡(jiǎn)單的樹(shù)形菜單效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的樹(shù)形菜單效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
用JavaScript對(duì)JSON進(jìn)行模式匹配(Part 1-設(shè)計(jì))
在《從 if else 到 switch case 再到抽象》這篇文章里面說(shuō)到，解決 if else 和 switch case 分支過(guò)多的一個(gè)方法，就是做一個(gè)專用的 dispatcher ，讓它來(lái)負(fù)責(zé)進(jìn)行篩選與轉(zhuǎn)發(fā)。2010-07-07
這篇文章介紹了5分鐘理解JavaScript中this用法，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了JS常見(jiàn)內(nèi)存泄漏及解決方案解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05![javascript[js]獲取url參數(shù)的代碼](http://img.jbzj.com/images/xgimg/bcimg8.png)
多瀏覽器兼容用javascript獲取url參數(shù)的方法比較推薦的一種2007-10-10
AngularJS+Bootstrap實(shí)現(xiàn)多文件上傳與管理
這篇文章主要為大家詳細(xì)介紹了AngularJS+Bootstrap實(shí)現(xiàn)多文件上傳與管理，對(duì)上傳文件進(jìn)行加載與刪除操作,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11