前言
最近利用改完 bug 的空閑期七婴，優(yōu)化了一下比較不優(yōu)雅的代碼。
這里分享一種用遍歷代替if else的寫法察滑。
需求
調(diào)用接口返回一個(gè) code, 前端需要根據(jù)不同的 code 設(shè)置不同的圖標(biāo)打厘。多個(gè) code 可能使用同一個(gè)圖標(biāo)。
改造前
改造前的代碼邏輯比較平鋪直敘贺辰，用了大量的if...else語句户盯。
首先，這種方法是完全 OK 的（工作上饲化，以能夠?qū)崿F(xiàn)業(yè)務(wù)為第一目標(biāo)莽鸭。）
但是在寫法上呢，篇幅又長又臭吃靠。
const changeWeatherCode = (code) => {
if ((code > 0 && code <= 2) || code == 5 || code == 30 || (code > 32 && code <= 34)) {
return 'SUNNY';
} else if ((code > 2 && code <= 4) || (code > 5 && code <= 6) || (code > 34 && code <= 36)) {
return 'CLOUDY';
} else if ((code > 6 && code <= 8) || code == 31 || (code > 36 && code <= 38)) {
return 'DREARY';
} else if (code == 11) {
return 'FOG';
} else if ((code > 11 && code <= 14) || (code > 38 && code <= 40)) {
return 'SHOWERS';
} else if ((code > 14 && code <= 17) || (code > 40 && code <= 42)) {
return 'T_STORMS';
} else if (code == 18) {
return 'RAIN';
} else if ((code > 18 && code <= 24) || (code > 42 && code <= 44)) {
return 'SNOW';
} else if (code > 24 && code <= 29) {
return 'RAIN_SNOW';
} else if (code == 32) {
return 'WIND';
}
}
（而且硫眨，每個(gè)if里面都有返回值，就不需要再else了巢块，直接下一個(gè)if即可）
改造思路
這些 code 是從 0~44礁阁，并分為 10 大類巧号。
是不是可以用對象形式儲(chǔ)存，更為直觀呢姥闭？
const codeToName = {
SUNNY: [1, 2, 5, 30, 33, 34],
CLOUDY: [3, 4, 6, 35, 36],
DREARY: [7, 8, 31, 37, 38],
T_STORMS: [15, 16, 17, 41, 42],
SHOWERS: [12, 13, 14, 39, 40],
SNOW: [19, 20, 21, 22, 23, 24, 43, 44],
RAIN_SNOW: [25, 26, 27, 28, 29],
RAIN: [18],
WIND: [32],
FOG: [11]
};
這里的改寫各位千萬別自己手動(dòng)寫進(jìn)去丹鸿，費(fèi)時(shí)費(fèi)力又容易出錯(cuò)。
可以利用原來的代碼棚品，用 for 循環(huán) 44 次+push 的方法直接生成一個(gè)這樣的對象靠欢。
接下來，我們就要開始遍歷了铜跑。通過傳進(jìn)來的 code门怪，來找到對應(yīng)的鍵名。
改造后
遍歷的方法有很多種疼进，for循環(huán)薪缆、filter、find伞广、findIndex、indexOf疼电、includes等等都是可以用的嚼锄，但是注意返回的值是不同的。
for
const changeWeatherCode = (code) => {
for (let i in codeToName) {
for (const j of codeToName[i]) {
if (j === code) return i
}
}
}
filter
const changeWeatherCode = (code) => {
for (let i in codeToName) {
const result = codeToName[i].filter(item => item === code)
if (result.length) return i // filter會(huì)返回一個(gè)數(shù)組蔽豺，沒有找到則返回空數(shù)組
}
}
find
const changeWeatherCode = (code) => {
for (let i in codeToName) {
const result = codeToName[i].find(item => item === code)
if (result) return i // find返回鍵值区丑，沒有找到則返回undefined
}
}
findIndex
const changeWeatherCode = (code) => {
for (let i in codeToName) {
const result = codeToName[i].find(item => item === code)
if (result !== -1) return i // findIndex返回索引值，沒有找到則返回-1
}
}
補(bǔ)充indexOf和includes
大神說用indexOf和includes更方便修陡，這里也記錄一下沧侥。
const changeWeatherCode = (code) => {
for (let i in codeToName) {
// if (codeToName[i].indexOf(code) > -1) return i 或者
if (codeToName[i].includes(code)) return i
}
}
總結(jié)
這幾種寫法都大同小異，只需要注意返回值即可魄鸦。
相比起原先大白話的寫法宴杀，后者把代碼抽象化，簡潔明了拾因，也更加優(yōu)雅旺罢。
另外，如果返回的code具有規(guī)律的話绢记，也可以用正則來判斷區(qū)間扁达。
