5種在JavaScript函數中重構If / Else語句的方法

英文 | https://betterprogramming.pub/5-ways-to-refactor-if-else-statements-in-javascript-functions-2865a4bbfe29

翻譯 | 小愛

在本文中，我将介紹5種通過不必要的if-else語句來整理代碼的方法。我将讨論預設參數，或（||）運算符，空位合并，可選鍊no-else-returns，和保護子句。

1、預設參數

你知道在使用不一緻的API時會感到這種感覺，并且代碼中斷是因為某些值是undefined？

let sumFunctionThatMayBreak = (a, b, inconsistentParameter) => a+b+inconsistentParameter
sumFunctionThatMayBreak(1,39,2) // => 42
sumFunctionThatMayBreak(2,40, undefined) // => NaN      

對于許多人來說，解決該問題的本能方法是添加一條if/else語句：

let sumFunctionWithIf = (a, b, inconsistentParameter) => {
    if (inconsistentParameter === undefined){
      return a+b
    } else {
     return a+b+inconsistentParameter
    }
}
sumFunctionWithIf(1,39,2) // => 42
sumFunctionWithIf(2,40, undefined) // => 42      

但是，您可以簡化上述功能，并if/else通過實作預設參數來消除邏輯：

let simplifiedSumFunction = (a, b, inconsistentParameter = 0) => a+b+inconsistentParameter
simplifiedSumFunction(1, 39, 2) // => 42
simplifiedSumFunction(2, 40, undefined) // => 42      

2、或運算符

上面的問題不能總是使用預設參數來解決。有時，你可能處在需要使用if-else邏輯的情況下，尤其是在嘗試建構條件渲染功能時。在這種情況下，通常可以通過以下方式解決問題：

let sumFunctionWithIf = (a, b, inconsistentParameter) => {
    if (inconsistentParameter === undefined || inconsistentParameter === null || inconsistentParameter === false){
      return a+b
    } else {
     return a+b+inconsistentParameter
    }
}
sumFunctionWithIf(1, 39, 2) // => 42
sumFunctionWithIf(2, 40, undefined) // => 42
sumFunctionWithIf(2, 40, null) // => 42
sumFunctionWithIf(2, 40, false) // => 42
sumFunctionWithIf(2, 40, 0) // => 42
/// 🚨🚨🚨 but:
sumFunctionWithIf(1, 39, '') // => "40"      

或這樣：

let sumFunctionWithTernary = (a, b, inconsistentParameter) => {
    inconsistentParameter = !!inconsistentParameter ? inconsistentParameter : 0
    return a+b+inconsistentParameter
}
sumFunctionWithTernary(1,39,2) // => 42
sumFunctionWithTernary(2, 40, undefined) // => 42
sumFunctionWithTernary(2, 40, null) // => 42
sumFunctionWithTernary(2, 40, false) // => 42
sumFunctionWithTernary(1, 39, '') // => 42
sumFunctionWithTernary(2, 40, 0) // => 42      

但是，你可以使用或（||）運算符進一步簡化它。|| 運算符的工作方式如下：

• 當左側為假值時，它将傳回右側。
• 如果為真值，它将傳回左側。

然後，解決方案可能如下所示：

let sumFunctionWithOr = (a, b, inconsistentParameter) => {
    inconsistentParameter = inconsistentParameter || 0
    return a+b+inconsistentParameter
}
sumFunctionWithOr(1,39,2) // => 42
sumFunctionWithOr(2,40, undefined) // => 42
sumFunctionWithOr(2,40, null) // => 42
sumFunctionWithOr(2,40, false) // => 42
sumFunctionWithOr(2,40, '') // => 42
sumFunctionWithOr(2, 40, 0) // => 42      

3、空位合并

但是，有時候，你确實想保留0或''作為有效參數，而不能使用||來做到這一點。運算符（如上例所示）。幸運的是，從今年開始，JavaScript使我們可以通路??。（空位合并）運算符，僅當左側為null或未定義時才傳回右側。這意味着，如果你的參數為0或''，它将被視為此類。讓我們看一下實際情況：

let sumFunctionWithNullish = (a, b, inconsistentParameter) => {
    inconsistentParameter = inconsistentParameter ?? 0.424242
    return a+b+inconsistentParameter
}
sumFunctionWithNullish(2, 40, undefined) // => 42.424242
sumFunctionWithNullish(2, 40, null) // => 42.424242
/// 🚨🚨🚨 but:
sumFunctionWithNullish(1, 39, 2) // => 42
sumFunctionWithNullish(2, 40, false) // => 42
sumFunctionWithNullish(2, 40, '') // => "42"
sumFunctionWithNullish(2, 40, 0) // => 42      

4、可選連結

最後，當處理不一緻的資料結構時，很難相信每個對象将具有相同的密鑰。看這裡：

let functionThatBreaks = (object) => {
    return object.name.firstName
  }
  functionThatBreaks({name: {firstName: "Sylwia", lasName: "Vargas"}, id:1}) // ✅ "Sylwia" 
  functionThatBreaks({id:2}) // 🚨 Uncaught TypeError: Cannot read property 'firstName' of undefined 🚨      

發生這種情況是因為object.name是undefined，是以我們無法對其進行調用firstName。

許多人通過以下方式處理這種情況：

let functionWithIf = (object) => {
    if (object && object.name && object.name.firstName) {
      return object.name.firstName
    }
  }
  functionWithIf({name: {firstName: "Sylwia", lasName: "Vargas"}, id:1) // "Sylwia"
  functionWithIf({name: {lasName: "Vargas"}, id:2}) // undefined
  functionWithIf({id:3}) // undefined
  functionWithIf() // undefined      

但是，您可以使用新的JS功能（可選連結）簡化上述操作。可選鍊在每一步都會檢查傳回值是否為undefined，如果是，它将僅傳回該值而不抛出錯誤：

let functionWithChaining = (object) => object?.name?.firstName 
  functionWithChaining({name: {firstName: "Sylwia", lasName: "Vargas"}, id:1}) // "Sylwia"
  functionWithChaining({name: {lasName: "Vargas"}, id:2}) // undefined
  functionWithChaining({id:3}) // undefined
  functionWithChaining() // undefined      

5、no-else-return和警告條款

笨拙的if / else語句（尤其是那些嵌套語句）的最後解決方案是no-else-return語句和guard子句。 是以，假設我們具有以下功能：

let nestedIfElseHell = (str) => {
    if (typeof str == "string"){
      if (str.length > 1) {
        return str.slice(0,-1)
      } else {
        return null
      }
    } else { 
      return null
    }
  }
nestedIfElseHell("") // => null 
nestedIfElseHell("h") // => null
nestedIfElseHell("hello!") // => "hello"      

no-else-return

現在，我們可以使用以下no-else-return語句簡化此函數，因為無論如何我們傳回的都是null：

let noElseReturns = (str) => {
    if (typeof str == "string"){
      if (str.length > 1) {
        return str.slice(0,-1)
      }
    }
    return null
  }
noElseReturns("") // => null 
noElseReturns("h") // => null
noElseReturns("hello!") // => "hello"      

該no-else-return語句的好處是，如果不滿足條件，該函數将結束的執行if-else并跳至下一行。你甚至可以不使用最後一行（return null），然後傳回undefined。

注意：我實際上在前面的示例中使用了一個no-else-return函數。

警告條款​

現在，我們可以更進一步，并設定防護措施，甚至可以更早地結束代碼執行：

let guardClauseFun = (str) => {
    // ✅ first guard: check the type
    if (typeof str !== "string") return null
    // ✅ second guard: check for the length
    if (str.length <= 3) console.warn("your string should be at least 3 characters long and its length is", str.length) 
    // otherwise:
    return str.slice(0,-1)
  }
guardClauseFun(5) // => null 
guardClauseFun("h") // => undefined with a warning
guardClauseFun("hello!") // => "hello"      

結論