用这个替代 `switch` 来让 Javascript 好 10 倍

在 Javascript 中，switch是一种代码结构，用于将变量与可能值的明确列表进行一对一比较。

虽然比 更有条理if，switch但有一些缺点可以通过我将在下面介绍的策略来克服。

• 它是有限的。如果你想做的不仅仅是简单的一对一比较，你必须“破解”它，或者恢复到if（或者如果你一直在关注，我们的其他替代策略之一。）
• 奇怪的失败规则需要使用break并且可能成为难以跟踪错误的来源——尤其是对于您团队中的新初级人员。
• 它使代码更难阅读和维护。
• 一些人认为这是一种反模式，如果您添加新的案例，您将不得不就地编辑代码，进一步使函数膨胀。
• 如果您像我一样，您可能还会发现与 Javascript 中的其他语句相比，您不喜欢它具有独特的语法。它不“适合”。
• 它不适合在可能需要处理大量排列组合的应用程序中组合、扩展和清理架构。

如果switch有这么多的失败，我们应该怎么做呢？

将其替换为将结果映射到您将在语句中使用的相同可枚举键的 Javascript 对象switch。

它的功能与 switch 语句一样好，只是现在您将能够使用类型系统（例如 Typescript），并且在放置代码的位置和方式方面具有更大的灵活性。

让我们看一些例子。

第一个可能看起来很熟悉。我们想根据某个其他值为一个变量赋值。

函数 getProductCategoryName ( categoryNumber ) { 
  let categoryName = '' ; 
  switch (categoryNumber) { 
    case  1 : 
      categoryName = 'Smartwatch' ; 
      打破; 
    case  2 : 
      categoryName = 'SSD Drive' ; 
      打破; 
    case  3 : 
      categoryName = '游戏鼠标' ; 
      打破; 
    case  4 : 
      categoryName = 'Keyboard' ; 
      打破; 
    默认:
      类别名称 = '无效' ; 
      打破; 
  }
  返回类别名称；
}

足够无辜，但这可以改进：

const categoryMap = { 
  1 : '智能手表' , 
  2 : 'SSD 驱动器' , 
  3 : '游戏鼠标' , 
  4 : '键盘' , 
}; 

函数 getProductCategoryName ( categoryNumber ) { 
  return categoryMap[categoryNumber] || '无效' ; 
}

通过使用对象映射处理逻辑，我们设法使代码阅读起来更快，并且代码的扩展成为对数据对象的明显基于配置的更改，而不是扩展代码。这两者都是可维护性的关键因素。

此外，您可以通过从外部源填充对象来进一步扩展此方法，只需调用 REST API 并将数据加载到内存中即可。

“但是，”你可能会说，“这是一个非常简单的例子。switch并不总是那么简单。这将如何处理更复杂的用例？”

好问题。让我们看一个更复杂（但派生）的例子，让调用者知道他们拥有的数据是否有效。

function  isDataValidForCategory ( categoryCode, metaData ) { 
  let categoryName = '' ; 
  switch (categoryNumber) { 
    case  'SMARTWATCH' : if 
      ( !metaData.os || ( typeof metaData.heartMonitor !== 'boolean' )) { return false ;       } case 'SSDDRIVE' : if (!metaData.brand || !metaData.storageCapacity ) { return false ;       }案例
         

     
      
         

     'KYBDMOUSE' : 
      if (!metaData.brand || ( typeof metaData.wireless !== 'boolean' )) { return false ;       }默认值：返回真值；  } }
         

    
       

这几乎是一样的。不同之处在于，我们不是映射出价值，而是映射出功能。

const categoryValidators = { ' 
  SMARTWATCH' : ( metaData ) => { 
    return (metaData.os && ( typeof metaData.heartMonitor === 'boolean' )); }   , ' SSDDRIVE' : ( metaData ) => { return (metaData.brand && metaData.storageCapacity );   }, 'KYBDMOUSE' : ( metaData ) => { return (metaData.brand &&

  
    

  
    无线=== '布尔值' )); 
  }, 
}; 

function  isDataValidForCategory ( categoryCode, metaData ) {
  返回categoryValidators[categoryCode](metaData) || 假的；
}

再一次，这种方法产生的代码稍微少一些，而且阅读速度更快一些。无需更改功能本身即可为将来的类别代码添加配置。

标签：JavaScript,编程技巧, 代码
来源：