JavaScript重构技巧-让函数简单明了

本文转载自微信公众号「大迁世界」，转载本文请联系大迁世界公众号。

成都创新互联公司长期为超过千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为江西企业提供专业的成都做网站、网站建设，江西网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

JavaScript 是一种易于学习的编程语言，编写运行并执行某些操作的程序很容易。然而，要编写一段干净的JavaScript 代码是很困难的。

在本文中，我们将研究如何让我们的函数更清晰明了。

对对象参数使用解构

如果我们希望函数接收很多参数，那么应该使用对象。在此基础上，我们就可以使用解构语法提取我们需要的参数。

例如，对于对象参数，我们可能会这样使用：

 
 
 
 
    
  
  
  
  
  1. const greet = (obj) => { 
    2. 
  
  
  
  
  2.   return `${obj.greeting}, ${obj.firstName}${obj.lastName}`; 
    3. 
  
  
  
  
  3. } 
    4.

上面的语法，我们可以使用解构方式会更优雅：

 
 
 
 
    
  
  
  
  
  1. const greet = ({ 
    2. 
  
  
  
  
  2.   greeting, 
    3. 
  
  
  
  
  3.   firstName, 
    4. 
  
  
  
  
  4.   lastName 
    5. 
  
  
  
  
  5. }) => { 
    6. 
  
  
  
  
  6.   return `${greeting}, ${firstName}${lastName}`; 
    7. 
  
  
  
  
  7. } 
    8.

这样我们可以少写很多重复的东西，命名也会更加清晰。

命名回调函数

好的命名会使阅读代码更容易，回调函数的命名也是一样的，例如下面不好的命名方式：

 
 
 
 
    
  
  
  
  
  1. const arr = [1, 2, 3].map(a => a * 2); 
    2.

我们可以这样分开命名：

 
 
 
 
    
  
  
  
  
  1. const double = a => a * 2; 
    2. 
  
  
  
  
       
   
   
   
      
    
    
    
    
    1. if (score === 100 || 
      2. 
    
    
    
    
    2.   remainingPlayers === 1 || 
      3. 
    
    
    
    
    3.   remainingPlayers === 0) { 
      4. 
    
    
    
    
    4.   quitGame(); 
      5. 
    
    
    
    
    5. } 
      6. 
   
   
   
   
    

  2. const arr = [1, 2, 3].map(double); 
    3. 



现在我们知道我们的回调函数实际上是用来加倍原始数组的每个元素的。
让条件句具有描述性
通过在自己的函数的条件语句中编写条件表达式，可以使条件语句更具描述性。
对于复杂的条件判断， 我们可以单独使用函数来表示，会让条件语句更具描述性，例如下面代码：


 
 
 
 
    
  
  
  
  
  1. if (score === 100 || 
    2. 
  
  
  
  
  2.   remainingPlayers === 1 || 
    3. 
  
  
  
  
  3.   remainingPlayers === 0) { 
    4. 
  
  
  
  
  4.   quitGame(); 
    5. 
  
  
  
  
  5. } 
    6. 
 
 
 
 
当条件多时，我们可以用函数来表示：


 
 
 
 
    
  
  
  
  
  1. const winnerExists = () => { 
    2. 
  
  
  
  
  2.   return score === 100 || 
    3. 
  
  
  
  
  3.     remainingPlayers === 1 || 
    4. 
  
  
  
  
  4.     remainingPlayers === 0 
    5. 
  
  
  
  
  5. } 
    6. 
  
  
  
  
  6. if (winnerExists()) { 
    7. 
  
  
  
  
  7.   quitGame(); 
    8. 
  
  
  
  
  8. } 
    9. 
 
 
 
 
这样，我们就知道这些条件是检查游戏代码中是否存在赢家的条件。
在第一个例子中，我们有一个很长的表达式在括号里，大多数人可能不知道它在判断什么。但在第二个例子中，一旦我们把它放到一个命名函数中，我们就知道它大概在判断什么了。
在条件语句中拥有一个命名函数比在拥有一堆布尔表达式要清晰得多。
用 Map 或 Object替换 switch 语句
由于 switch语句很长，这样容易出错。因此，如果可以的话，我们应该用较短的代码代替它们。许多switch语句可以用map或object替换。例如，如果我们有下面的switch语句:


 
 
 
 
    
  
  
  
  
  1. const getValue = (prop) => { 
    2. 
  
  
  
  
  2.   switch (prop) { 
    3. 
  
  
  
  
  3.     case 'a': { 
    4. 
  
  
  
  
  4.       return 1; 
    5. 
  
  
  
  
  5.     } 
    6. 
  
  
  
  
  6.     case 'b': { 
    7. 
  
  
  
  
  7.       return 2; 
    8. 
  
  
  
  
  8.     } 
    9. 
  
  
  
  
  9.     case 'c': { 
    10. 
  
  
  
  
  10.       return 3; 
    11. 
  
  
  
  
  11.     } 
    12. 
  
  
  
  
  12.   } 
    13. 
  
  
  
  
  13. } 
    14. 
  
  
  
  
  14. const val = getValue('a'); 
    15. 
 
 
 
 
我们可以将其替换为object或map，如下所示：


 
 
 
 
    
  
  
  
  
  1. const obj = { 
    2. 
  
  
  
  
  2.   a: 1, 
    3. 
  
  
  
  
  3.   b: 2, 
    4. 
  
  
  
  
  4.   c: 3 
    5. 
  
  
  
  
  5. } 
    6. 
  
  
  
  
  6. const val = obj['a']; 
    7. 
 
 
 
 
如我们所见，switch 语法很长。我们需要嵌套多个带有多个return语句的块，只是为了获得给定prop值的返回值。
相反使用对象，我们仅仅需要一个对象就可以了：


 
 
 
 
    
  
  
  
  
  1. const obj = { 
    2. 
  
  
  
  
  2.   a: 1, 
    3. 
  
  
  
  
  3.   b: 2, 
    4. 
  
  
  
  
  4.   c: 3 
    5. 
  
  
  
  
  5. } 
    6. 
 
 
 
 
使用对象还有一个好处，就是对于键不必是有效的标识符号，这样这增加了更多的灵活性。
我们还可以使用map替换对象，如下所示：


 
 
 
 
    
  
  
  
  
  1. const map = new Map([['a', 1], ['b', 2], ['c', 3]]) 
    2. 
  
  
  
  
  2. const val = map.get('a') 
    3. 
 
 
 
 
如我们所见，使用Map时，代码也短很多。我们通过传递一个数组，数组中的每项包含键和值。然后，我们仅使用Map实例的get方法从键中获取值。
Map优于对象的一个好处是，我们可以将数字，布尔值或对象等其他值用作键。而对象只能将字符串或symbol作为键。
总结
使用解构语法可以使对象参数更清楚，更短。这样，可以选择性地将属性作为变量进行访问。
通过将条件表达式放在它自己的命名函数中，可以使条件表达式更具描述性。同样，我们应该为回调函数命名，以便更容易地读取代码。
最后，应该尽可能用Map和Object替换switch语句。

            

                网站标题：JavaScript重构技巧-让函数简单明了
                

                文章路径：http://www.shufengxianlan.com/qtweb/news31/482481.html
            

            

                网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                

            

                广告
                
            

            

                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                创新互联

猜你还喜欢下面的内容

网站排名知识

分类信息网

小谭建站　　 　成都网站设计　　 　H5网站制作　　 　做网站　　 　成都定制网站　　 　兴发搬家　　 　服务器租用　　 　UI设计　　 　香港云服务器　　 　东电技服　　 　成都网站设计　　 　高端网站设计　　 　成都网站建设　　 　古蔺网站建设　　 　企业手机网站建设　　 　德阳东方电机技改　　 　网站建设改版　　 　网络推广公司　　 　手机软件开发　　 　温江做网站公司