这些优化技巧可以避免我们在JS中过多的使用IF语句

最近在重构代码时，我发现早期的代码使用太多的 if 语句，其程度是我从未见过的。这就是为什么我认为分享这些简单的技巧是非常重要的，这些技巧可以帮助我们避免过多的使用 if 语句。

创新互联建站服务项目包括鹰潭网站建设、鹰潭网站制作、鹰潭网页制作以及鹰潭网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，鹰潭网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到鹰潭省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

接下来会介绍6种方式来代替 if 的使用，这样做不是坚决不使用 if 偏执狂，而是换个方式思考我们的编码思路。

1. 三元运算符

(1) 事例1

带有IF的代码：

 
 
 
    
  
  
  
  1. function saveCustomer(customer) {
    2. 
  
  
  
  2.   if (isCustomerValid(customer)) {
    3. 
  
  
  
  3.     database.save(customer)
    4. 
  
  
  
  4.   } else {
    5. 
  
  
  
  5.     alert('customer is invalid')
    6. 
  
  
  
  6.   }
    7. 
  
  
  
  7. }
    8.

重构后代码：

 
 
 
    
  
  
  
  1. function saveCustomer(customer) {
    2. 
  
  
  
  2.   return isCustomerValid(customer)
    3. 
  
  
  
  3.     ? database.save(customer)
    4. 
  
  
  
  4.     : alert('customer is invalid')
    5. 
  
  
  
  5. } 
    6.

使用 ES6

 
 
 
    
  
  
  
  1. const saveCustomer = customer =>
    2. 
  
  
  
  2.    isCustomerValid(customer)?
    3. 
  
  
  
  3.      database.save(customer) : alert('customer is invalid')    
    4.

(2) 事例2

带有IF的代码：

 
 
 
    
  
  
  
  1.  function customerValidation(customer) {
    2. 
  
  
  
  2.    if (!customer.email) {
    3. 
  
  
  
  3.      return error('email is require')
    4. 
  
  
  
  4.    } else if (!customer.login) {
    5. 
  
  
  
  5.     return error('login is required')
    6. 
  
  
  
  6.    } else if (!customer.name) {
    7. 
  
  
  
  7.      return error('name is required')
    8. 
  
  
  
  8.    } else {
    9. 
  
  
  
  9.      return customer
    10. 
  
  
  
  10.   }
    11. 
  
  
  
  11. }
    12.

重构后代码：

 
 
 
    
  
  
  
  1. const customercustomerValidation = customer =>
    2. 
  
  
  
  2.   !customer.email   ? error('email is required')
    3. 
  
  
  
  3.   : !customer.login ? error('login is required')
    4. 
  
  
  
  4.   : !customer.name  ? error('name is required')
    5. 
  
  
  
  5.                     : customer
    6.

(3) 事例3

带有IF的代码：

 
 
 
    
  
  
  
  1.  function getEventTarget(evt) {
    2. 
  
  
  
  2.      if (!evt) {
    3. 
  
  
  
  3.          evt = window.event;
    4. 
  
  
  
  4.      }
    5. 
  
  
  
  5.      if (!evt) {
    6. 
  
  
  
  6.          return;
    7. 
  
  
  
  7.      }
    8. 
  
  
  
  8.      const target;
    9. 
  
  
  
  9.      if (evt.target) {
    10. 
  
  
  
  10.         target = evt.target;
    11. 
  
  
  
  11.     } else {
    12. 
  
  
  
  12.         target = evt.srcElement;
    13. 
  
  
  
  13.     }
    14. 
  
  
  
  14.     return target;
    15. 
  
  
  
  15. }
    16.

重构后代码：

 
 
 
    
  
  
  
  1. function getEventTarget(evt) {
    2. 
  
  
  
  2.   evtevt = evt || window.event;
    3. 
  
  
  
  3.   return evt && (evt.target || evt.srcElement);
    4. 
  
  
  
  4. }
    5.

2. 短路运算符

(1) 事例1

带有IF的代码：

 
 
 
    
  
  
  
  1.  const isOnline = true;
    2. 
  
  
  
  2.  const makeReservation= ()=>{};
    3. 
  
  
  
  3.  const user = {
    4. 
  
  
  
  4.      name:'Damian',
    5. 
  
  
  
  5.      age:32,
    6. 
  
  
  
  6.      dni:33295000
    7. 
  
  
  
  7.  };
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9.  if (isOnline){
    10. 
  
  
  
  10.     makeReservation(user);
    11. 
  
  
  
  11. }
    12.

重构后代码：

 
 
 
    
  
  
  
  1. const isOnline = true;
    2. 
  
  
  
  2. const makeReservation= ()=>{};
    3. 
  
  
  
  3. const user = {
    4. 
  
  
  
  4.     name:'Damian',
    5. 
  
  
  
  5.     age:32,
    6. 
  
  
  
  6.     dni:33295000
    7. 
  
  
  
  7. };
    8. 
  
  
  
  8. 
  
  
  
  9. isOnline&&makeReservation(user);
    10.

(2) 事例2

带有IF的代码：

 
 
 
    
  
  
  
  1.  const active = true;
    2. 
  
  
  
  2.  const loan = {
    3. 
  
  
  
  3.      uuid:123456,
    4. 
  
  
  
  4.      ammount:10,
    5. 
  
  
  
  5.      requestedBy:'rick'
    6. 
  
  
  
  6.  };
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.  const sendMoney = ()=>{};
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10. if (active&&loan){
    11. 
  
  
  
  11.     sendMoney();
    12. 
  
  
  
  12. }
    13.

重构后代码：

 
 
 
    
  
  
  
  1. const active = true;
    2. 
  
  
  
  2. const loan = {
    3. 
  
  
  
  3.     uuid:123456,
    4. 
  
  
  
  4.     ammount:10,
    5. 
  
  
  
  5.     requestedBy:'rick'
    6. 
  
  
  
  6. };
    7. 
  
  
  
  7. 
  
  
  
  8. const sendMoney = ()=>{};
    9. 
  
  
  
  9. 
  
  
  
  10. ctive && loan && sendMoney();
    11.

3. 函数委托

事例1

带有IF的代码：

 
 
 
    
  
  
  
  1. function itemDropped(item, location) {
    2. 
  
  
  
  2.     if (!item) {
    3. 
  
  
  
  3.         return false;
    4. 
  
  
  
  4.     } else if (outOfBounds(location) {
    5. 
  
  
  
  5.         var error = outOfBounds;
    6. 
  
  
  
  6.         server.notify(item, error);
    7. 
  
  
  
  7.         items.resetAll();
    8. 
  
  
  
  8.         return false;
    9. 
  
  
  
  9.     } else {
    10. 
  
  
  
  10.        animateCanvas();
    11. 
  
  
  
  11.        server.notify(item, location);
    12. 
  
  
  
  12.        return true;
    13. 
  
  
  
  13.    }
    14.

重构后代码：

 
 
 
    
  
  
  
  1.  function itemDropped(item, location) {
    2. 
  
  
  
  2.      const dropOut = function() {
    3. 
  
  
  
  3.          server.notify(item, outOfBounds);
    4. 
  
  
  
  4.         items.resetAll();
    5. 
  
  
  
  5.          return false;
    6. 
  
  
  
  6.      }
    7. 
  
  
  
  7. 
  
  
  
  8.      const dropIn = function() {
    9. 
  
  
  
  9.          server.notify(item, location);
    10. 
  
  
  
  10.         animateCanvas();
    11. 
  
  
  
  11.         return true;
    12. 
  
  
  
  12.     }
    13. 
  
  
  
  13. 
  
  
  
  14.     return !!item && (outOfBounds(location) ? dropOut() : dropIn());
    15. 
  
  
  
  15. }
    16.

4. 非分支策略

此技巧尝试避免使用switch语句，相反是用键/值创建一个映射并使用一个函数访问作为参数传递的键的值。

(1) 事例1

带有switch的代码：

 
 
 
    
  
  
  
  1.  switch(breed){
    2. 
  
  
  
  2.      case 'border':
    3. 
  
  
  
  3.        return 'Border Collies are good boys and girls.';
    4. 
  
  
  
  4.        break;  
    5. 
  
  
  
  5.      case 'pitbull':
    6. 
  
  
  
  6.        return 'Pit Bulls are good boys and girls.';
    7. 
  
  
  
  7.        break;  
    8. 
  
  
  
  8.      case 'german':
    9. 
  
  
  
  9.        return 'German Shepherds are good boys and girls.';
    10. 
  
  
  
  10.       break;
    11. 
  
  
  
  11.     default:
    12. 
  
  
  
  12.       return 'Im default'
    13. 
  
  
  
  13. }
    14.

重构后代码：

 
 
 
    
  
  
  
  1. const dogSwitch = (breed) =>({
    2. 
  
  
  
  2.   "border": "Border Collies are good boys and girls.",
    3. 
  
  
  
  3.   "pitbull": "Pit Bulls are good boys and girls.",
    4. 
  
  
  
  4.   "german": "German Shepherds are good boys and girls.",  
    5. 
  
  
  
  5. })[breed]||'Im the default';
    6. 
  
  
  
  6. 
  
  
  
  7. 
  
  
  
  8. dogSwitch("border xxx")
    9.

5. 作为数据的函数

我们知道在JS中函数是第一个类，所以使用它我们可以把代码分割成一个函数对象。

带有IF的代码：

 
 
 
    
  
  
  
  1.  const calc = {
    2. 
  
  
  
  2.      run: function(op, n1, n2) {
    3. 
  
  
  
  3.          const result;
    4. 
  
  
  
  4.          if (op == "add") {
    5. 
  
  
  
  5.              result = n1 + n2;
    6. 
  
  
  
  6.          } else if (op == "sub" ) {
    7. 
  
  
  
  7.              result = n1 - n2;
    8. 
  
  
  
  8.          } else if (op == "mult" ) {
    9. 
  
  
  
  9.              result = n1 * n2;
    10. 
  
  
  
  10.         } else if (op == "div" ) {
    11. 
  
  
  
  11.             result = n1 / n2;
    12. 
  
  
  
  12.         }
    13. 
  
  
  
  13.         return result;
    14. 
  
  
  
  14.     }
    15. 
  
  
  
  15. }
    16. 
  
  
  
  16. 
  
  
  
  17. calc.run("sub", 5, 3); //2
    18.

重构后代码：

 
 
 
    
  
  
  
  1.  const calc = {
    2. 
  
  
  
  2.      add : function(a,b) {
    3. 
  
  
  
  3.          return a + b;
    4. 
  
  
  
  4.      },
    5. 
  
  
  
  5.      sub : function(a,b) {
    6. 
  
  
  
  6.          return a - b;
    7. 
  
  
  
  7.      },
    8. 
  
  
  
  8.      mult : function(a,b) {
    9. 
  
  
  
  9.          return a * b;
    10. 
  
  
  
  10.     },
    11. 
  
  
  
  11.     div : function(a,b) {
    12. 
  
  
  
  12.         return a / b;
    13. 
  
  
  
  13.     },
    14. 
  
  
  
  14.     run: function(fn, a, b) {
    15. 
  
  
  
  15.         return fn && fn(a,b);
    16. 
  
  
  
  16.     }
    17. 
  
  
  
  17. }
    18. 
  
  
  
  18. 
  
  
  
  19. calc.run(calc.mult, 7, 4); //28
    20.

6. 多态性

多态性是对象具有多种形式的能力。OOP中多态性最常见的用法是使用父类引用来引用子类对象。

带有IF的代码：

 
 
 
    
  
  
  
  1.  const bob = {
    2. 
  
  
  
  2.    name:'Bob',
    3. 
  
  
  
  3.    salary:1000,
    4. 
  
  
  
  4.    job_type:'DEVELOPER'
    5. 
  
  
  
  5.  };
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  const mary = {
    8. 
  
  
  
  8.    name:'Mary',
    9. 
  
  
  
  9.    salary:1000,
    10. 
  
  
  
  10.   job_type:'QA'
    11. 
  
  
  
  11. };
    12. 
  
  
  
  12. 
  
  
  
  13. const calc = (person) =>{
    14. 
  
  
  
  14. 
  
  
  
  15.     if (people.job_type==='DEVELOPER')
    16. 
  
  
  
  16.         return person.salary+9000*0.10;
    17. 
  
  
  
  17. 
  
  
  
  18.     if (people.job_type==='QA')
    19. 
  
  
  
  19.         return person.salary+1000*0.60;
    20. 
  
  
  
  20. }
    21. 
  
  
  
  21. 
  
  
  
  22. console.log('Salary',calc(bob));
    23. 
  
  
  
  23. console.log('Salary',calc(mary));
    24.

重构后代码：

 
 
 
    
  
  
  
  1.  const qaSalary  = (base) => base+9000*0.10;
    2. 
  
  
  
  2.  const devSalary = (base) => base+1000*0.60;
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.  //Add function to the object.
    5. 
  
  
  
  5.  const bob = {
    6. 
  
  
  
  6.    name:'Bob',
    7. 
  
  
  
  7.    salary:1000,
    8. 
  
  
  
  8.    job_type:'DEVELOPER',
    9. 
  
  
  
  9.    calc: devSalary
    10. 
  
  
  
  10. };
    11. 
  
  
  
  11. 
  
  
  
  12. const mary = {
    13. 
  
  
  
  13.   name:'Mary',
    14. 
  
  
  
  14.   salary:1000,
    15. 
  
  
  
  15.   job_type:'QA',
    16. 
  
  
  
  16.   calc: qaSalary
    17. 
  
  
  
  17. };
    18. 
  
  
  
  18. 
  
  
  
  19. console.log('Salary',bob.calc(bob.salary));
    20. 
  
  
  
  20. console.log('Salary',mary.calc(mary.salary));
    21.

分享文章：这些优化技巧可以避免我们在JS中过多的使用IF语句
标题来源：http://www.shufengxianlan.com/qtweb/news49/507649.html

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

广告

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

猜你还喜欢下面的内容

虚拟主机知识

分类信息网

德阳服务器托管　　 　自贡电信机房　　 　微博营销　　 　古蔺网站建设　　 　成都网络营销公司　　 　成都网站建设　　 　网站服务器租用　　 　江油网站建设　　 　小程序开发公司　　 　服务器租凭　　 　四川成都托管服务器　　 　内江做网站　　 　重庆手机网站建设　　 　重庆网站建设公司　　 　成都网站建设　　 　成都未宇聚　　 　主机租用　　 　雪茄烟　　 　重庆花箱　　 　成都网站推广