網(wǎng)站開發(fā)長(zhǎng)沙做好網(wǎng)絡(luò)推廣的技巧
寫點(diǎn)東西《Javascript switch 語句的替代方法》
- 那么 switch 語句有什么問題?
- Object Literal 查找的替代方法
- 將我們學(xué)到的東西變成一個(gè)實(shí)用函數(shù)
- 您需要的一切都在一個(gè)地方# [](#javascript-version) Javascript 版本
- Tyepscript version
- 🌟更多精彩
本文擴(kuò)展了 Todd Motto 關(guān)于用對(duì)象字面量替換 switch 語句的想法。這是過時(shí)、笨拙且冗長(zhǎng)的 switch
語句的一種非常簡(jiǎn)潔美觀的替代方法。在本文的最后,您將獲得一個(gè)基于 Todd 解決方案的實(shí)用程序函數(shù),該函數(shù)對(duì)開發(fā)人員更加友好,因此請(qǐng)堅(jiān)持到最后!
如果您對(duì)技術(shù)細(xì)節(jié)不感興趣,只想了解實(shí)用程序函數(shù),請(qǐng)向下滾動(dòng)到最后一節(jié)(您需要的一切都在一個(gè)地方)。
那么 switch 語句有什么問題?
雖然 switch 語句在某些情況下很有用,但許多人認(rèn)為它不是 Javscript 最適合其用途的設(shè)計(jì)。它不如其他結(jié)構(gòu)靈活、可讀和可維護(hù)。
例如,對(duì) switch
語句的主要批評(píng)之一是其貫穿行為。如果您忘記在 case
的末尾包含 break
語句,則控制權(quán)將貫穿到下一個(gè) case
,從而導(dǎo)致意外行為,如下面的示例所示。這可能會(huì)使代碼更容易出錯(cuò)且更難維護(hù)。
switch (fruit) {case 'apple':console.log('Apple selected');// Missing break statement, falls through to the next casecase 'orange':console.log('Orange selected');break;case 'banana':console.log('Banana selected');break;default:console.log('Unknown fruit');
}
在這個(gè)示例中,如果 fruit 為 'apple'
,則 "Apple selected"
和 "Orange selected"
都將被記錄。
Object Literal 查找的替代方法
與 switch
語句相比,Object Literal 更靈活、更具表現(xiàn)力。
以下是如何使用它們僅返回 string
值。
const getDate (unit) {var date = {'year': '2024','month': 'January','day': '21','default': 'Default value'};return (date[unit] || date['default']);
}var month = getDate('month');
console.log(month); // January
有時(shí)我們需要編寫更復(fù)雜的代碼,而僅返回 string
是不夠的。我們可以進(jìn)一步改進(jìn)上述代碼,在其中使用函數(shù)而不是字符串,以便我們可以包含更復(fù)雜的代碼。
const getDate (unit) {var date = {'year': () => {// do more complicated stuff here// just returning a string in this casereturn '2024';},'month': () => {return 'January';},'day': () => {return '21';},'default': () => {return 'Default value'}};// we return the Object literal's function invokedreturn (date[unit] || date['default'])();
}var month = getDate('month');
console.log(month); // January
但是如果我們想要一個(gè)貫穿行為呢?我們可以輕松地使用對(duì)象字面量來實(shí)現(xiàn)這一點(diǎn),它更具可讀性、聲明性和更不易出錯(cuò)。它還不會(huì)涉及添加或刪除 break
,而這是我們正在尋找的。
const getDayType (day) {const isWeekDay = () => {return 'Weekday';}const isWeekEnd = () => {return 'Weekend';}var days = {'monday': isWeekDay,'tuesday': isWeekDay,'wednesday': isWeekDay,'thursay': isWeekDay,'friday': isWeekDay,'saturday': isWeekEnd,'sunday': isWeekEnd, 'default': () => {return 'Default value'}};// we return the Object literal's function invoked return (days[day] || days['default'])();
}var dayType = getDayType('sunday');
console.log(dayType); // WeekEnd
將我們學(xué)到的東西變成一個(gè)實(shí)用函數(shù)
既然我們已經(jīng)學(xué)會(huì)了如何使用 Object Literal 而不是 switch
,那么讓我們根據(jù)學(xué)到的知識(shí)構(gòu)建一個(gè)實(shí)用函數(shù),以進(jìn)一步簡(jiǎn)化我們的生活。
我們稱我們的函數(shù)為 switchCase
。它接收一個(gè)具有 2 個(gè)屬性的對(duì)象: cases
和 defaultCase
。Cases 是將容納我們案例的對(duì)象字面量,而 defaultCase
是…嗯,默認(rèn)案例。
const switchCase = ({cases, defaultCase}) {}
switchCase
是一個(gè)返回回調(diào)函數(shù)的高階函數(shù)?;卣{(diào)函數(shù)接收 switch 表達(dá)式。
const switchCase = ({cases, defaultCase}) {return (expression) => {}
}
現(xiàn)在,回調(diào)函數(shù)需要做的就是返回調(diào)用的對(duì)象字面量函數(shù)。
const switchCase = ({cases, defaultCase}) {return (expression) => {return (cases[expression] || defaultCase)();}
}
就是這樣!現(xiàn)在讓我們看一個(gè)如何使用它的示例。
let date = new Date()const today = switchCase({cases: {year: () => date.getFullYear(),month: () => date.getMonth() + 1,day: () => date.getDate()},defaultCase: () => date
})today('year') // current year
today('month') // current month
today('day') // current day
today('century') // default case - returns the current date Object
對(duì)于 typescript 用戶,我們可以利用泛型來允許以后要調(diào)用該函數(shù)的用戶指定他們希望對(duì)象字面量函數(shù)返回的類型。
type SwitchCase<T> = {cases: {[key: string]: () => T},defaultCase: () => T
} const switchCase = <T,>({cases, defaultCase}: SwitchCase<T>) => {return (expression: string) => {return (cases[expression] || defaultCase)()}
}
這就是我們?nèi)绾问褂盟姆绞健U?qǐng)注意,我們不必總是指定類型,因?yàn)?Typescript 會(huì)自動(dòng)推斷它,除非它是多個(gè)類型的聯(lián)合,如下所示。
let date = new Date()const today = switchCase<number | Date>({cases: {year: () => date.getFullYear(),month: () => date.getMonth() + 1,day: () => date.getDate()},defaultCase: () => date
})today('year') // current year
today('month') // current month
today('day') // current day
today('century') // default case - returns the current date Object
您需要的一切都在一個(gè)地方# Javascript 版本
實(shí)用程序函數(shù):
const switchCase = ({cases, defaultCase}) => (expression) => (cases[expression] || defaultCase)()
用法: Tyepscript 版本
let date = new Date()const today = switchCase({cases: {year: () => date.getFullYear(),month: () => date.getMonth() + 1,day: () => date.getDate()},defaultCase: () => date
})today('year') // current year
today('month') // current month
today('day') // current day
today('century') // default case - returns the current date Object
Tyepscript version
實(shí)用功能:
const switchCase = <T,>({cases, defaultCase}: {cases: {[key: string]: () => T}, defaultCase: () => T}) => (expression: string) => (cases[expression] || defaultCase)()
用法:
let date = new Date()const today = switchCase<number | Date>({cases: {year: () => date.getFullYear(),month: () => date.getMonth() + 1,day: () => date.getDate()},defaultCase: () => date
})today('year') // current year
today('month') // current month
today('day') // current day
today('century') // default case - returns the current date Object
🌟更多精彩
點(diǎn)擊👉這里~~