幾個JavaScript 條件語句的小技巧
摘要：
在使用 JavaScript 時，我們常常要寫不少的條件語句。如何將我們的程式碼寫的更加簡潔和優雅，是我們需要一直思考的問題。
1. 使用 Array.includes 來處理多重條件
舉個栗子 :chestnut:：
// 條件語句
function test(fruit) {
...
在使用 JavaScript 時，我們常常要寫不少的條件語句。如何將我們的程式碼寫的更加簡潔和優雅，是我們需要一直思考的問題。
1. 使用 Array.includes 來處理多重條件
舉個栗子 :chestnut:：
// 條件語句
function test(fruit) {
if (fruit == 'apple' || fruit == 'cherry') {
console.log('red');
}
}
複製程式碼
乍一看，這麼寫似乎沒什麼大問題。但是如果我們要想匹配更多的紅色水果呢，比如在加個西紅柿，就往後面在加一個|| tomato嗎？還有更多呢。。
我在做業務的時候寫過這樣的程式碼:
// 通過次數判斷停留的位置
function _stopSize() {
let max = this.block.length - 2;
if (this.playTime === 9 || this.playTime === 8 || this.playTime === 6 || this.playTime === 0) {
this.num = this.randomNum(0, max);
return this.num;
} else {
this.num = this.block.length - 1;
}
}
複製程式碼
一開始當時運營說在第一次和和第二次必定中獎，後面又加了最後一次也必須中獎，中間還得中一次，我就是向上面的寫法一樣寫，寫的時候覺得很爽，寫完後看就感覺很不好看。所以就對這個條件判斷語句做了優化。
// 通過次數判斷停留的位置
function _stopSize() {
let max = this.block.length - 2;
let timeArr = [1, 2, 4, 10];// 把條件提取到陣列中
let time = 10 - this.playTime; // 總共有10次玩的機會
if (timeArr.includes(time)) {
this.num = this.randomNum(0, max);
return this.num;
} else {
this.num = this.block.length - 1;
}
}
複製程式碼
2. 少寫巢狀，儘早返回
在我們的日常的活動中經常做一些判斷，這個活動是否還在進行，這個活動次數是否已經為0
function doStart() {
if(playtime > 0) {
if(isRun) {
//do someing
function start() {
console.log('do someing');
}
}
} else {
console.log('no playtime');
}
}
複製程式碼
如果在我們start() 裡面還有很多條件判斷的時候，那麼巢狀就很多層，看的人眼花繚亂的； 就我個人而言，我遵循的一個總的規則是當發現無效條件時儘早返回。
function doStart() {
if(!playtime) reture console.log('no playtime');
if(!isRun) reture false
//do someing
function start() {
console.log('do someing');
}
}
複製程式碼
JavaScript中falsy值的例子 (通過 if 程式碼段將falsy值轉換為false):
if (false)
if (null)
if (undefined)
if (0)
if (NaN)
if ('')
if ("")
if (document.all)
複製程式碼
3.look-up表代替if-else
比如大家可能會遇到類似下面的需求：比如某平臺的信用分數評級，超過700-950，就是Lv5，650-700為Lv4，600-650為Lv3，550-600為Lv2，350-550為Lv1。
實現很簡單：
function showGrace(grace) {
let _level='Lv0';
if(grace>=700){
_level='Lv5'
}
else if(grace>=650){
_level='Lv4'
}
else if(grace>=600){
_level='Lv3'
}
else if(grace>=550){
_level='Lv2'
}
else{
_level='Lv1'
}
return _level;
}
複製程式碼
執行也沒問題，但是問題也是有
- 萬一以後需求，改了比如650-750是L4，750-950是L5。這樣就整個方法要改。
- 方法存在各種神仙數字：700，650，600，550。日後的維護可能存在問題(這些數字，運營想改就改)。
- if-else太多，看著有點不舒服
所以下面用look-up表，把配資料置和業務邏輯分離的方式實現下：
function showGrace(grace) {
let graceForLevel=[700,650,600,550,400];
let levelText=['Lv5','Lv4','Lv3','Lv2','Lv1'];
let _level = 'Lv1'
graceForLevel.some((item,index)=> {
if(grace >= item){
_level = levelText[index];
return _level;
}
})
return _level;
}
複製程式碼
4. 相較於 switch，Object 也許是更好的選擇
讓我們看下面的例子，我們想要根據地區打印出各種屬性
function test(area) {
// 使用 switch case 來找到對應地區的屬性
switch (area) {
case 'zhejiang':
consloe.log('hangzhou');
consloe.log('1');
break
case 'guangdong':
consloe.log('guangzhou');
consloe.log('2');
break
case 'beijing':
consloe.log('beijing');
consloe.log('3');
break
default:
return false;
}
}
複製程式碼
上面的程式碼看上去並沒有錯，但是就我個人而言，它看上去很冗長。同樣的結果可以通過物件字面量來實現，語法也更加簡潔：
let areaTest = {
'zhejiang': {plu:1,city:hangzhou},
'guangdong': {plu:2,city:guangzhou},
'beijing': {plu:3,city:beijing}
}
function test(area) {
consloe.log(areaTest[area].city);
consloe.log(areaTest[area].plu);
return;
}
複製程式碼
又或者：
let areaTest = [
{province:zhejiang,plu:1,city:hangzhou},
{province:guangdong,plu:2,city:guangzhou},
{province:beijing,plu:3,city:beijing}
]
function test(area) {
let result = areaTest.filter(f => f.province === area);
consloe.log(result.city);
consloe.log(result.plu);
return;
}
複製程式碼
總結
使用這種方式寫的好處有：
- 編寫業務邏輯可能更靈活；
- 配置和業務邏輯分離，可以需要修改的快速定位到需要修改的程式碼；
- 程式碼風格較為清晰，便於理解；
在寫程式碼中還有很多有趣的小技巧，可以使函式寫的更加整潔，思路更加清晰，後期更好維護。我所瞭解的還很少，希望這篇文章能給你們帶來一些幫助。