这是我参与更文挑战的第10天，活动详情查看更文挑战

在本文中，我将介绍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、可选链接

当处理不一致的数据结构时，很难相信每个对象将具有相同的key值。

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和Warning clause

笨拙的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函数。

Warning clause

现在，我们可以更进一步，并设置防护措施，甚至可以更早地结束代码执行：

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"
复制代码