欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2021年10月12日 11:52:41   作者：參謀總長薩博  
條件判斷語句是程序開發(fā)過程中一種經(jīng)常使用的語句形式,和大部分編程語言相同,JavaScript 中也有條件判斷語句,這篇文章主要給大家介紹了關于如何讓js中的if判斷如絲般順滑的相關資料,需要的朋友可以參考下

前言

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

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

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

不同條件對應的數(shù)據(jù)類型以及默認值

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

代碼實現(xiàn)

思路一

直接用 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)雅的方式實現(xiàn)呢？

思路二

把這些需要判斷的變量放到一個數(shù)組里，用 map 處理成 Boolean  類型，使用 includes 判斷數(shù)組中是否包含指定的 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判斷內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

參考文檔

相關文章

最新評論