switch 有四樣寫法你知道么
本期為大家推薦的是社區(qū)作者 邊城 的文章 ，在這篇文章中邊城大大為大家介紹了 switch 的幾種寫法，快來看看你會幾種呀？
話不多說，馬上進入正文學習啦！
JavaScript 的 switch 有四樣寫法，你知道么？不管你知道不知道，反正我是不知道。
我所知道的 JavaScript 的 switch 語句只有一種寫法。但要說到對分支的處理，寫法可就多了去了。if 分支寫法可以算一種，switch 分支寫法可以算第二種，第三種是使用策略模式，如果要把條件運算符也算上的話，嗯，剛好四種。
不過本文的主角是 switch。大家都了解 switch 的寫法一般來說是 switch 變量或表達式，case 常量。嗯，比如說，一個百分制成績，90 及 90 分以上算優(yōu)秀，80 及以上 90 以下算良好，60 及以上 80 以下算合格，60 以下為不合格，用 switch 大概會這么寫：
function calcGrade(score) {
const line = score / 10 | 0;
switch (line) {
case 10: case 9:
return "優(yōu)秀";
case 8:
return "良好";
case 7: case 6:
return "合格";
default:
return "不合格";
}
}
代碼中 score / 10 | 0 和 Math.floor(score / 10) 是一樣的效果，就是除以 10 取商的整數(shù)部分。
這段 switch 用得中規(guī)中矩，用取整的辦法來避免使用一長串 if ... else 分支也算是取了巧。
但是現(xiàn)在規(guī)則改了，將合格和良好的分隔點從 80 分降到 75 分，該怎么辦？
按上面取整的辦法依然可以，不過這次除數(shù)不再是 10，而是 5。相應地，case 也多了很多：
18、19、20 是優(yōu)秀 15、16、17 是良好 12、13、14 是合格 剩下的是不合格
function calcGrade(score) {
switch (true) {
case score >= 90:
return "優(yōu)秀";
case score >= 75:
return "良好";
case score >= 60:
return "合格";
default:
return "不合格";
}
}
function calcGrade(score) {
return (value => {
switch (true) {
case value >= 90:
return "優(yōu)秀";
case value >= 75:
return "良好";
case value >= 60:
return "合格";
default:
return "不合格";
}
})(score);
}
function calcGrade(score) {
return ((value, rules) => rules.find(({ t }) => t(value)).v)(
score,
[
{ t: n => n >= 90, v: "優(yōu)秀" },
{ t: n => n >= 75, v: "良好" },
{ t: n => n >= 60, v: "合格" },
{ t: () => true, v: "不合格" },
]
);
}
function calcGrade(score) {
return ((value, rules) => rules.find(({ t }) => t(value)).fn(value))(
score,
[
{
t: n => n >= 90,
fn: score => {
const grade = "優(yōu)秀";
console.log(grade, score);
return grade;
}
},
{
t: n => n >= 75,
fn: score => {
const grade = "良好";
console.log(grade, score);
return grade;
}
},
{
t: n => n >= 60,
fn: score => {
const grade = "合格";
console.log(grade, score);
return grade;
}
},
{
t: () => true,
fn: score => {
const grade = "不合格";
console.log(grade, score);
return grade;
}
},
]
);
}
function calcGrade(score) {
const printGrade = (grade, score) => {
console.log(grade, score);
return grade;
};
return ((value, rules) => rules.find(({ t }) => t(value)).fn(value))(
score,
[
{ t: n => n >= 90, fn: score => printGrade("優(yōu)秀", score) },
{ t: n => n >= 75, fn: score => printGrade("良好", score) },
{ t: n => n >= 60, fn: score => printGrade("合格", score) },
{ t: () => true, fn: score => printGrade("不合格", score) },
]
);
}
SegmentFault 思否社區(qū)小編說
自 2022-07-01 起 SegmentFault 思否公眾號改版啦！之后將陸續(xù)推出新的欄目和大家見面?。ㄕ埵媚恳源絶?）
在「社區(qū)精選」欄目中，我們將為廣大開發(fā)者推薦來自 SegmentFault 思否開發(fā)者社區(qū)的優(yōu)質(zhì)技術(shù)文章，這些文章全部出自社區(qū)中充滿智慧的技術(shù)創(chuàng)作者哦!
希望通過這一欄目，大家可以共同學習技術(shù)干貨，GET 新技能和各種花式技術(shù)小 Tips。
歡迎越來越多的開發(fā)者加入創(chuàng)作者的行列，我們將持續(xù)甄選出社區(qū)中優(yōu)質(zhì)的內(nèi)容推介給更多人，讓閃閃發(fā)光的技術(shù)創(chuàng)作者們走到聚光燈下，被更多人認識。
「社區(qū)精選」投稿郵箱：[email protected]
投稿請附上社區(qū)文章地址
