JavaScript中，if条件语句的优化方略

在项目开发中，我们难免会遇到一些条件判断语句的编写，但是，当if过多时，显得我们的代码过于冗余，且不便于阅读，本地旨在介绍几种优化后的if使用方法，这不是抵制使用if的偏执，也不是不让大家以后不要用if，而是换一种方式来思考我们的编码思路。

一、条件运算符（三目运算）

使用 if：

function customerValidation(formInfo) {
  if (!formInfo.phone) {
    return error('phone is require')
  } else if (!formInfo.name) {
    return error('name is required')
  } else if (!formInfo.address) {
    return error('address is required')
  } else {
    return formInfo
  }
}

重构代码后：

const customerValidation = formInfo =>
  !formInfo.phone   ? error('phone is required')
  : !formInfo.name ? error('name is required')
  : !formInfo.address  ? error('address is required')
                    : formInfo

二、条件运算符（与或）

使用 if ：

function getEventTarget(evt) {
    if (!evt) {
        evt = window.event;
    }
    if (!evt) {
        return;
    }
    const target;
    if (evt.target) {
        target = evt.target;
    } else {
        target = evt.srcElement;
    }
    return target;
}

重构代码后：

function getEventTarget(evt) {
  evt = evt || window.event;
  return evt && (evt.target || evt.srcElement);
}

三、&& 逻辑运算符 1

使用 if ：

const flag = true;
const getInfo= () => {};
const info = {
    name:'Jimy',
    age:32,
    tel:040125861
};

if (flag){
    getInfo(info);
}

重构代码后：

const flag = true;
const getInfo= () => {};
const info = {
    name:'Jimy',
    age:32,
    tel:040125861
};

flag && getInfo(info);

四、&& 逻辑运算符 2

使用 if ：

const flag = true;
const getInfo= () => {};
const info = {
    name:'Jimy',
    age:32,
    tel:040125861,
    status: false
};

if (flag && info.status){
    getInfo(info);
}

重构代码后：

const flag = true;
const getInfo= () => {};
const info = {
    name:'Jimy',
    age:32,
    tel:040125861,
    status: false
};

flag && info.status && getInfo(info);

五、函数委派

function IKun(checken, skill) {
    if (!checken) {
        return false;
    } else if (!skill.rap) {
    
        learn.sing();
        learn.jump()
        learn.rap()
        
        showTime(checken, skill);
        
        return false;
    } else {
    
        strengthenSkill()
        showTime(checken, skill);
        
        return true;
    }
}

重构代码后：

function IKun(checken, skill) {
    const larenUse = () => {
        learn.sing();
        learn.jump()
        learn.rap()
        
        showTime(checken, skill);
        
        return false;
    }
    
    const showNow = () => {
        strengthenSkill()
        showTime(checken, skill);
        
        return false;
    }
    
     return !!checken &&  ( !skill.rap ? larenUse() : showNow() );
}

六、非分支策略

switch(breed){
    case 'border':
      return 'Border Collies are good boys and girls.';
      break;  
    case 'pitbull':
      return 'Pit Bulls are good boys and girls.';
      break;  
    case 'german':
      return 'German Shepherds are good boys and girls.';
      break;
    default:
      return 'Im default'
}

重构代码：

const dogSwitch = (breed) =>({
  "border": "Border Collies are good boys and girls.",
  "pitbull": "Pit Bulls are good boys and girls.",
  "german": "German Shepherds are good boys and girls.",  
})[breed]||'Im the default';

dogSwitch("border xxx")

七、函数对象

使用 if

const calc = {
    run: function(op, n1, n2) {
        const result;
        if (op == "add") {
            result = n1 + n2;
        } else if (op == "sub" ) {
            result = n1 - n2;
        } else if (op == "mult" ) {
            result = n1 * n2;
        } else if (op == "div" ) {
            result = n1 / n2;
        }
        return result;
    }
}

calc.run("sub", 5, 3); //2

重构代码：

const calc = {
    add : function(a,b) {
        return a + b;
    },
    sub : function(a,b) {
        return a - b;
    },
    mult : function(a,b) {
        return a * b;
    },
    div : function(a,b) {
        return a / b;
    },
    run: function(fn, a, b) {
        return fn && fn(a,b);
    }
}

calc.run(calc.mult, 7, 4); //28

八、多态性

使用 if ：

const bob = {
  name:'Bob',
  salary:1000,
  job_type:'DEVELOPER'
};

const mary = {
  name:'Mary',
  salary:1000,
  job_type:'QA'
};

const calc = (person) =>{

    if (people.job_type==='DEVELOPER')
        return person.salary+9000*0.10;

    if (people.job_type==='QA')
        return person.salary+1000*0.60;
}

console.log('Salary',calc(bob));
console.log('Salary',calc(mary));

重构代码：

const qaSalary  = (base) => base+9000*0.10;
const devSalary = (base) => base+1000*0.60;

//Add function to the object.
const bob = {
  name:'Bob',
  salary:1000,
  job_type:'DEVELOPER',
  calc: devSalary
};

const mary = {
  name:'Mary',
  salary:1000,
  job_type:'QA',
  calc: qaSalary
};

console.log('Salary',bob.calc(bob.salary));
console.log('Salary',mary.calc(mary.salary));

今天的分享如果对您有用的话，还恳请多多点赞收藏呀~