else的用法與位置Python if else的用法與位置 _ifelse的用法與位置

文章插圖

文章插圖
前言
在產品快速迭代的中，由于追求開發速度，我們往往忽略代碼的可讀性與擴展性，不合理的使用if-else條件判斷會使我們的程序復雜度大大提升，同時也會使代碼的可讀性急速下降，后期維護難度也大大提高，真的讓人腦殼疼。比如下方示例：

// 貸款申請操作的處理function check {// 是否輸入正確用戶名if (this.checkUsername(this.username)) {// 是否輸入正確身份證號if (this.checkIdCard(this.idCard)) {// 請輸入正確的電話號碼if (this.checkTel(this.tel)) {// 擔保人是本人if (this.dbr === '擔保人是本人') {// 是否存在身份證正面if (document.querySelector('.sfzzm img')) {console.log('存在身份證正面')// 是否存在身份證反面if (document.querySelector('.sfzfm img')) {console.log('存在身份證反面')// 是否存在學歷證書if (document.querySelector('.xlzs img')) {console.log('存在學歷證書')if (this.ydxy) {this.tijiaoIsShow = false}} else {Toast('請上傳學歷證書')this.tijiaoIsShow = true}} else {Toast('請上傳身份證反面')}} else {Toast('請上傳身份證正面')}} else if (this.dbr == '擔保人不是本人') {if (this.checkUsername(this.dbrname)) {if (this.checkIdCard(this.dbridCard)) {if (this.checkTel(this.dbrzyzh)) {if (document.querySelector('.sfzzm img')) {console.log('存在身份證正面')if (document.querySelector('.sfzfm img')) {console.log('存在身份證反面')if (document.querySelector('.xlzs img')) {console.log('存在學歷證書')this.tijiaoIsShow = false} else {Toast('請上傳學歷證書')}} else {Toast('請上傳身份證反面')}} else {Toast('請上傳身份證正面')}} else {Toast('請輸入擔保人展業證號')}} else {Toast('請輸入擔保人身份證號')}} else {Toast('請輸入擔保人姓名')}} else {Toast('請選擇擔保人是否為本人')}} else {Toast('請輸入正確的電話號碼')}} else {Toast('請輸入正確的身份證號')}} else {Toast('請輸入正確的姓名')}}

如果你接手這樣一段代碼，相信大家和我的心情是一樣的：

本文歸納以下幾種優化if-else場景，希望對大家有所幫助。
單個if語句優化if/else語句優化單個if多條件優化多個else if分支優化

單個if語句優化
優化前
if (flag) {this.handleFn}優化后
flag && this.handleFn// handleFn是普通函數這種寫法就比較清晰，簡潔，好讀！
另外如果遇到有很多的if語句，但是執行的功能函數卻是一致的情況，我們可以用”邏輯與“或者”邏輯或“來把他們合并成一個表達式。如果我們這些彼此獨立的條件判斷可以被視為同一次檢查的場景時，一次檢查的意圖明顯在可讀性上優于多次的條件檢查。我們來看一段代碼片段:

if (!(staffInfo.patientName && staffInfo.phone)) {// doSomething}...if (!(staffInfo.phone && staffInfo.idCardNum)) {// doSomething}

if(!(staffInfo.patientName && staffInfo.phone) || !(staffInfo.phone && staffInfo.idCardNum)){// doSomething}

if/else語句優化
if/else可以說在項目中遇到頻率是最高，通常可以這兩種策略優化
排非策略三元運算符排非策略
比如用戶登錄場景，如果用戶名和密碼輸入框為空，那么我們就提示用戶”用戶名和密碼不能為空”；如果有值，就執行登錄的操作。
優化前
if (user && password) {// 邏輯處理} else {throw('用戶名和密碼不能為空!')}優化后
if (!user || !password) return throw('用戶名和密碼不能為空!')// 邏輯處理表單提交時，需要提前排除那些提交不規范的內容，通常情況下，表單提交遇到不符合我們要求大于我們提交成功的情形，排非策略是個很不錯的選擇。
三元運算符
示例一

let allow = if（age >= 18）{allow = '通過';} else {allow = '拒絕';}// 優化后let allow = age >= 18 ? '通過' : '拒絕'

【else的用法與位置Python if else的用法與位置】示例二
if (flag) {success;} else {fail;}//優化后flag ? success : fail;三元運算符相比if/else來說，只需一行語句，代碼簡練精煉。

單個if多條件優化
優化前

function test(type) {if (type === 'jpg' || type === 'png' || type === 'gif' || type === 'svg') {console.log("該文件為圖片");}}

優化后

function test(type) {const imgArr = ['jpg', 'png', 'gif', 'svg']if (imgArr.includes(type)) {console.log("該文件為圖片")}}

多個else if分支優化
多個else if通常是一個糟糕的選擇，它導致設計復雜，代碼可讀性差，并且可能導致重構困難。

if (this.type === 'A') {this.handleA;} else if (this.type === 'B') {this.handleB;} else if (this.type === 'C') {this.handleC;} else if (this.type === 'D') {this.handleD;} else {this.handleE;}

我們經常遇到多個else if條件判斷代碼，隨著邏輯復雜性的增加，else if的代碼將變得越來越腫。

看一下邏輯繪制為流程圖從上面的流程圖可以看出，不同條件分支的代碼具有很高的耦合度。先前的條件判斷將影響后續的代碼流，并且此類代碼在后續開發中難以維護。我們可以通過switch、key-value和Map來優化代碼。
switch
switch(val){case 'A':handleAbreakcase 'B':handleBbreakcase 'C':handleCbreakcase 'D':handleDbreak}看一下邏輯繪制為流程圖

switch
流程圖顯然更簡單。而且，不同的條件分支之間沒有嵌套，并且它們彼此獨立。邏輯很清楚。
key-value
雖然switch語句在邏輯上確實比else if語句簡單，但是代碼本身也有點多。
其實我們對象枚舉，將條件與特定操作相關聯的鍵值。

let enums = {'A': handleA,'B': handleB,'C': handleC,'D': handleD,'E': handleE}function action(val){let handleType = enums[val]handleType}

流程圖：

這種方式消除了所有條件語句，并使用鍵值對象存儲條件和操作之間的關系。當我們需要根據條件執行代碼時，我們不再需要使用else if或switch語句來處理相應的動作，我們只需從中提取相應的函數handleType并執行它即可。
Map
實際上我們還可以通過Map來進一步的優化我們的代碼。
對比Object的話，Map具有許多優點
對象的鍵只能是字符串或符號，而Map的鍵可以是任何類型的值。我們可以使用Map size屬性輕松獲取Map的鍵/值對的數量，而對象的鍵/值對的數量只能手動確定。具有極快的查找速度。
上面的例子可以優化如下：

let enums = new Map([['A', handleA],['B', handleB],['C', handleC],['D', handleD],['E', handleE]])function action(val){let handleType = enums(val)handleType}

如果我們遇到多層復雜條件，Map語句優勢就更明顯了！

if (mode == 'kline') {if (this.type === 'A') {this.handleA} else if (this.type === 'B') {this.handleB} else if (this.type === 'C') {this.handleC} else if (this.type === 'D') {this.handleD}} else if ((mode = 'depth')) {if (this.type === 'A') {this.handleA} else if (this.type === 'B') {this.handleB} else if (this.type === 'C') {this.handleC} else if (this.type === 'D') {this.handleD}}

對于上述如此復雜的場景，是否可以通過Map來進行優化？
其實我們只需要將不同的判斷語句連接成一個字符串，以便我們可以將條件和操作以鍵值格式關聯在一起。

let enums = new Map([['kline_A', handleKlineA],['kline_B', handleKlineB],['kline_C', handleKlineC],['kline_D', handleKlineD],['kline_E', handleKlineE],['depth_A', handleDepthA],['depth_B', handleDepthB],['depth_C', handleDepthC],])function action(mode, type){let key = `${mode}_${type}`let handleType = enums(key)handleType}

瞬間簡單明了很多，有木有～～～
參考文章if-else重構優化if-else邏輯判斷優化How to Use if-elseJavascript條件語句優化策略深入淺出代碼優化﹣if/else