日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
這些優(yōu)化技巧可以避免我們?cè)贘S中過(guò)多的使用IF語(yǔ)句

最近在重構(gòu)代碼時(shí)，我發(fā)現(xiàn)早期的代碼使用太多的 if 語(yǔ)句，其程度是我從未見(jiàn)過(guò)的。這就是為什么我認(rèn)為分享這些簡(jiǎn)單的技巧是非常重要的，這些技巧可以幫助我們避免過(guò)多的使用 if 語(yǔ)句。

創(chuàng)新互聯(lián)建站服務(wù)項(xiàng)目包括鷹潭網(wǎng)站建設(shè)、鷹潭網(wǎng)站制作、鷹潭網(wǎng)頁(yè)制作以及鷹潭網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，鷹潭網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到鷹潭省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

接下來(lái)會(huì)介紹6種方式來(lái)代替 if 的使用，這樣做不是堅(jiān)決不使用 if 偏執(zhí)狂，而是換個(gè)方式思考我們的編碼思路。

1. 三元運(yùn)算符

(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.

重構(gòu)后代碼：

 
 
 
    
  
  
  
  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.

重構(gòu)后代碼：

 
 
 
    
  
  
  
  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.

重構(gòu)后代碼：

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

2. 短路運(yùn)算符

(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.

重構(gòu)后代碼：

 
 
 
    
  
  
  
  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.

重構(gòu)后代碼：

 
 
 
    
  
  
  
  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. 函數(shù)委托

事例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.

重構(gòu)后代碼：

 
 
 
    
  
  
  
  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語(yǔ)句，相反是用鍵/值創(chuàng)建一個(gè)映射并使用一個(gè)函數(shù)訪問(wèn)作為參數(shù)傳遞的鍵的值。

(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.

重構(gòu)后代碼：

 
 
 
    
  
  
  
  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. 作為數(shù)據(jù)的函數(shù)

我們知道在JS中函數(shù)是第一個(gè)類(lèi)，所以使用它我們可以把代碼分割成一個(gè)函數(shù)對(duì)象。

帶有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.

重構(gòu)后代碼：

 
 
 
    
  
  
  
  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. 多態(tài)性

多態(tài)性是對(duì)象具有多種形式的能力。OOP中多態(tài)性最常見(jiàn)的用法是使用父類(lèi)引用來(lái)引用子類(lèi)對(duì)象。

帶有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.

重構(gòu)后代碼：

 
 
 
    
  
  
  
  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.

當(dāng)前題目：這些優(yōu)化技巧可以避免我們?cè)贘S中過(guò)多的使用IF語(yǔ)句
URL網(wǎng)址：http://www.dlmjj.cn/article/cdhjgdp.html