無論使用何種編程語言，代碼都需要根據不同的情況對給定的輸入做出不同的決定并執行相應的操作。舉例來說，在游戲中，如果玩家的生命值是0，游戲就結束了。在氣象應用程序中，如果觀看早晨的日出，就會看到一張照片，如果是晚上，就會看到星月。本文中，我們將探究JAVAScript中的條件語句是如何工作的。
如果您使用JavaScript，您將編寫大量代碼，其中包括條件調用。條件調用的基礎可能很簡單，但它所做的工作遠不止是寫一對if/else。下面是寫出更好、更清晰的條件代碼的一些技巧。
在本文中，我將介紹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) // => NaN123復制代碼類型：[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復制代碼類型：[javascript]
但是，您可以簡化上述功能，并if/else通過實現默認參數來消除邏輯：
let simplifiedSumFunction = (a, b, inconsistentParameter = 0) => a+b+inconsistentParameter
simplifiedSumFunction(1, 39, 2) // => 42
simplifiedSumFunction(2, 40, undefined) // => 42123復制代碼類型：[java]
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"
123456789101112131415復制代碼類型：[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復制代碼類型：[javascript]
但是，你可以使用或（||）運算符進一步簡化它。||運算符的工作方式如下：
當左側為假值時，它將返回右側。
如果為真值，它將返回左側。
然后，解決方案可能如下所示：
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復制代碼類型：[javascript]
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) // => 421234567891011復制代碼類型：[javascript]
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
123456復制代碼類型：[javascript]
發生這種情況是因為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() // undefined123456789復制代碼類型：[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復制代碼類型：[javascript]
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"1234567891011121314復制代碼類型：[javascript]
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"1234567891011復制代碼類型：[javascript]
該no-else-return語句的好處是，如果不滿足條件，該函數將結束的執行if-else并跳至下一行。你甚至可以不使用最后一行（returnnull），然后返回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"
