無論使用何種編程語言，代碼都需要根據(jù)不同的情況對給定的輸入做出不同的決定并執(zhí)行相應(yīng)的操作。舉例來說，在游戲中，如果玩家的生命值是0，游戲就結(jié)束了。在氣象應(yīng)用程序中，如果觀看早晨的日出，就會看到一張照片，如果是晚上，就會看到星月。本文中，我們將探究JAVAScript中的條件語句是如何工作的。

如果您使用JavaScript，您將編寫大量代碼，其中包括條件調(diào)用。條件調(diào)用的基礎(chǔ)可能很簡單，但它所做的工作遠(yuǎn)不止是寫一對if/else。下面是寫出更好、更清晰的條件代碼的一些技巧。

在本文中，我將介紹5種通過不必要的if-else語句來整理代碼的方法。我將討論默認(rèn)參數(shù)，或（||）運(yùn)算符，空位合并，可選鏈no-else-returns，和保護(hù)子句。

 1、默認(rèn)參數(shù)

你知道在使用不一致的API時會感到這種感覺，并且代碼中斷是因?yàn)槟承┲凳莡ndefined？

let sumFunctionThatMayBreak = (a, b, inconsistentParameter) => a+b+inconsistentParameter
sumFunctionThatMayBreak(1,39,2) // => 42
sumFunctionThatMayBreak(2,40, undefined) // => NaN123復(fù)制代碼類型：[javascript]

對于許多人來說，解決該問題的本能方法是添加一條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) // => 42123456789復(fù)制代碼類型：[javascript]

但是，您可以簡化上述功能，并if/else通過實(shí)現(xiàn)默認(rèn)參數(shù)來消除邏輯：

let simplifiedSumFunction = (a, b, inconsistentParameter = 0) => a+b+inconsistentParameter
simplifiedSumFunction(1, 39, 2) // => 42
simplifiedSumFunction(2, 40, undefined) // => 42123復(fù)制代碼類型：[java]

 2、或運(yùn)算符

上面的問題不能總是使用默認(rèn)參數(shù)來解決。有時，你可能處在需要使用if-else邏輯的情況下，尤其是在嘗試構(gòu)建條件渲染功能時。在這種情況下，通常可以通過以下方式解決問題：

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"
123456789101112131415復(fù)制代碼類型：[javascript]

或這樣：

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) // => 4212345678910復(fù)制代碼類型：[javascript]

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

當(dāng)左側(cè)為假值時，它將返回右側(cè)。

如果為真值，它將返回左側(cè)。

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

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) // => 4212345678910復(fù)制代碼類型：[javascript]

 3、空位合并

但是，有時候，你確實(shí)想保留0或''作為有效參數(shù)，而不能使用||來做到這一點(diǎn)。運(yùn)算符（如上例所示）。幸運(yùn)的是，從今年開始，JavaScript使我們可以訪問??。（空位合并）運(yùn)算符，僅當(dāng)左側(cè)為null或未定義時才返回右側(cè)。這意味著，如果你的參數(shù)為0或''，它將被視為此類。讓我們看一下實(shí)際情況：

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) // => 421234567891011復(fù)制代碼類型：[javascript]

 4、可選鏈接

最后，當(dāng)處理不一致的數(shù)據(jù)結(jié)構(gòu)時，很難相信每個對象將具有相同的密鑰。看這里：

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 
123456復(fù)制代碼類型：[javascript]

發(fā)生這種情況是因?yàn)閛bject.name是undefined，因此我們無法對其進(jìn)行調(diào)用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() // undefined123456789復(fù)制代碼類型：[javascript]

但是，您可以使用新的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() // undefined12345復(fù)制代碼類型：[javascript]

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

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

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"1234567891011121314復(fù)制代碼類型：[javascript]

no-else-return

現(xiàn)在，我們可以使用以下no-else-return語句簡化此函數(shù)，因?yàn)闊o論如何我們返回的都是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"1234567891011復(fù)制代碼類型：[javascript]

該no-else-return語句的好處是，如果不滿足條件，該函數(shù)將結(jié)束的執(zhí)行if-else并跳至下一行。你甚至可以不使用最后一行（returnnull），然后返回undefined。

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

警告條款

現(xiàn)在，我們可以更進(jìn)一步，并設(shè)置防護(hù)措施，甚至可以更早地結(jié)束代碼執(zhí)行：

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"