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

Posted on by

前言

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

判斷的條件框包含 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 ）

能不能用更優雅的方式實現呢？

思路二

把這些需要判斷的變量放到一個數組裡，用 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 處理大量判斷用這種方式使是不是更絲滑瞭 ^-^

總結

到此這篇關於如何讓js中if判斷如絲般順滑的文章就介紹到這瞭,更多相關js中的if判斷內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

參考文檔

  • developer.mozilla.org/zh-CN/docs/…
  • developer.mozilla.org/zh-CN/docs/…
  • developer.mozilla.org/zh-CN/docs/…

推薦閱讀：