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

更新時(shí)間：2021年10月12日 11:52:41 作者：參謀總長(zhǎng)薩博

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

前言

項(xiàng)目中的一個(gè)小需求點(diǎn)，點(diǎn)擊按鈕，驗(yàn)證幾十個(gè)條件框，判斷所有條件框是否填寫（選擇）過(guò)數(shù)據(jù)（至少有一個(gè)條件判斷為真）再執(zhí)行對(duì)應(yīng)操作

判斷的條件框包含 Radio 單選框，Checkbox 多選框，Input 輸入框，InputNumber 計(jì)數(shù)器， Select 選擇器， Switch 開(kāi)關(guān)等

項(xiàng)目使用的 Element 組件庫(kù) V2.15.6

不同條件對(duì)應(yīng)的數(shù)據(jù)類型以及默認(rèn)值

Radio 單選框 string ''
Checkbox 多選框 array []
Input 輸入框 string ''
InputNumber 計(jì)數(shù)器 number 0
Select 選擇器
- 單選 string ''
- 多選 array []
Switch 開(kāi)關(guān) boolean false

代碼實(shí)現(xiàn)

思路一

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

// 多條件判斷開(kāi)始，如下

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: '請(qǐng)選擇條件后重試',
    type: 'warning'
  })
  return false
}

實(shí)際項(xiàng)目場(chǎng)景中的變量名因?yàn)檎Z(yǔ)義化字符很多， if 判斷沒(méi)寫幾個(gè)就寫了很長(zhǎng)一串, 然后寫了幾個(gè)就寫不動(dòng)了（感覺(jué)在寫一坨 shi ）

能不能用更優(yōu)雅的方式實(shí)現(xiàn)呢？

思路二

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

// 多條件判斷開(kāi)始，如下

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: '請(qǐng)選擇條件后重試',
    type: 'warning'
  })
  return false
}

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