如何讓js中的if判斷如絲般順滑詳解

更新時間：2021年10月12日 11:52:41 作者：參謀總長薩博

條件判斷語句是程序開發(fā)過程中一種經常使用的語句形式,和大部分編程語言相同,JavaScript 中也有條件判斷語句,這篇文章主要給大家介紹了關于如何讓js中的if判斷如絲般順滑的相關資料,需要的朋友可以參考下

前言

項目中的一個小需求點，點擊按鈕，驗證幾十個條件框，判斷所有條件框是否填寫（選擇）過數據（至少有一個條件判斷為真）再執(zhí)行對應操作

判斷的條件框包含 Radio 單選框，Checkbox 多選框，Input 輸入框，InputNumber 計數器， Select 選擇器， Switch 開關等

項目使用的 Element 組件庫 V2.15.6

不同條件對應的數據類型以及默認值

Radio 單選框 string ''
Checkbox 多選框 array []
Input 輸入框 string ''
InputNumber 計數器 number 0
Select 選擇器
- 單選 string ''
- 多選 array []
Switch 開關 boolean false

代碼實現

思路一

直接用 if 判斷開干，然后大概代碼如下(變量為模擬變量)

// 多條件判斷開始，如下

if (obj.radio1 || obj.checkbox1.length > 0 || obj.input1 || obj.inputNumber1 > 0 || obj.select1 || obj.select2.length > 0 || obj.switch1 || obj.radio2 || obj.checkbox2.length > 0 || obj.input2 || obj.inputNumber2 > 0 || obj.select3 || obj.select4.length > 0 || obj.switch2  ...) {
  // do something
} else {
  // 條件不符，提示
  this.$message({
    message: '請選擇條件后重試',
    type: 'warning'
  })
  return false
}

實際項目場景中的變量名因為語義化字符很多， if 判斷沒寫幾個就寫了很長一串, 然后寫了幾個就寫不動了（感覺在寫一坨 shi ）

能不能用更優(yōu)雅的方式實現呢？

思路二

把這些需要判斷的變量放到一個數組里，用 map 處理成 Boolean 類型，使用 includes 判斷數組中是否包含指定的 Boolean 值

// 多條件判斷開始，如下

const arr = [
  obj.radio1,
  obj.checkbox1.length,
  obj.input1,
  obj.inputNumber1,
  obj.select1,
  obj.select2.length,
  obj.switch1,
  obj.radio2,
  obj.checkbox2.length,
  obj.input2,
  obj.inputNumber2,
  obj.select3,
  obj.select4.length,
  obj.switch2 
  ...
]

const arr1 = arr.map(item => Boolean(item))
if (arr1.includes(true)) {
  // do something
} else {
  // 條件不符，提示
  this.$message({
    message: '請選擇條件后重試',
    type: 'warning'
  })
  return false
}

好了，if 處理大量判斷用這種方式使是不是更絲滑了 ^-^