ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2023-03-19 12:14:50  阅读:320  来源: 互联网

标签:JavaScript 编程技巧  代码


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

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

  • 它是有限的。如果你想做的不仅仅是简单的一对一比较,你必须“破解”它,或者恢复到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,编程技巧, 代码
来源:

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有