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

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

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

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

[[322188]]

1. 三元运算符

(1) 事例1

带有IF的代码：

functionsaveCustomer(customer){
if(isCustomerValid(customer)){
database.save(customer)
}else{
alert('customerisinvalid')
}
}

重构后代码：

functionsaveCustomer(customer){
returnisCustomerValid(customer)
?database.save(customer)
:alert('customerisinvalid')
}

使用 ES6

constsaveCustomer=customer=>
isCustomerValid(customer)?
database.save(customer):alert('customerisinvalid')

(2) 事例2

带有IF的代码：

functioncustomerValidation(customer){
if(!customer.email){
returnerror('emailisrequire')
}elseif(!customer.login){
returnerror('loginisrequired')
}elseif(!customer.name){
returnerror('nameisrequired')
}else{
returncustomer
}
}

重构后代码：

constcustomercustomerValidation=customer=>
!customer.email?error('emailisrequired')
:!customer.login?error('loginisrequired')
:!customer.name?error('nameisrequired')
:customer

(3) 事例3

带有IF的代码：

functiongetEventTarget(evt){
if(!evt){
evt=window.event;
}
if(!evt){
return;
}
consttarget;
if(evt.target){
target=evt.target;
}else{
target=evt.srcElement;
}
returntarget;
}

重构后代码：

functiongetEventTarget(evt){
evtevt=evt||window.event;
returnevt&&(evt.target||evt.srcElement);
}

2. 短路运算符

(1) 事例1

带有IF的代码：

constisOnline=true;
constmakeReservation=()=>{};
constuser={
name:'Damian',
age:32,
dni:33295000
};
if(isOnline){
makeReservation(user);
}

重构后代码：

constisOnline=true;
constmakeReservation=()=>{};
constuser={
name:'Damian',
age:32,
dni:33295000
};
isOnline&&makeReservation(user);

(2) 事例2

带有IF的代码：

constactive=true;
constloan={
uuid:123456,
ammount:10,
requestedBy:'rick'
};
constsendMoney=()=>{};
if(active&&loan){
sendMoney();
}

重构后代码：

constactive=true;
constloan={
uuid:123456,
ammount:10,
requestedBy:'rick'
};
constsendMoney=()=>{};
ctive&&loan&&sendMoney();

3. 函数委托

事例1

带有IF的代码：

functionitemDropped(item,location){
if(!item){
returnfalse;
}elseif(outOfBounds(location){
varerror=outOfBounds;
server.notify(item,error);
items.resetAll();
returnfalse;
}else{
animateCanvas();
server.notify(item,location);
returntrue;
}

重构后代码：

functionitemDropped(item,location){
constdropOut=function(){
server.notify(item,outOfBounds);
items.resetAll();
returnfalse;
}
constdropIn=function(){
server.notify(item,location);
animateCanvas();
returntrue;
}
return!!item&&(outOfBounds(location)?dropOut():dropIn());
}

4. 非分支策略

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

(1) 事例1

带有switch的代码：

switch(breed){
case'border':
return'BorderColliesaregoodboysandgirls.';
break;
case'pitbull':
return'PitBullsaregoodboysandgirls.';
break;
case'german':
return'GermanShepherdsaregoodboysandgirls.';
break;
default:
return'Imdefault'
}

重构后代码：

constdogSwitch=(breed)=>({
"border":"BorderColliesaregoodboysandgirls.",
"pitbull":"PitBullsaregoodboysandgirls.",
"german":"GermanShepherdsaregoodboysandgirls.",
})[breed]||'Imthedefault';
dogSwitch("borderxxx")

5. 作为数据的函数

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

带有IF的代码：

constcalc={
run:function(op,n1,n2){
constresult;
if(op=="add"){
result=n1+n2;
 }elseif(op=="sub"){
result=n1-n2;
}elseif(op=="mult"){
result=n1*n2;
}elseif(op=="div"){
result=n1/n2;
}
returnresult;
}
}
calc.run("sub",5,3);//2

重构后代码：

constcalc={
add:function(a,b){
returna+b;
},
sub:function(a,b){
returna-b;
},
mult:function(a,b){
returna*b;
},
div:function(a,b){
returna/b;
},
run:function(fn,a,b){
returnfn&&fn(a,b);
}
}
calc.run(calc.mult,7,4);//28

6. 多态性

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

带有IF的代码：

constbob={
name:'Bob',
salary:1000,
job_type:'DEVELOPER'
};
constmary={
name:'Mary',
salary:1000,
job_type:'QA'
};
constcalc=(person)=>{
if(people.job_type==='DEVELOPER')
returnperson.salary+9000*0.10;
if(people.job_type==='QA')
returnperson.salary+1000*0.60;
}
console.log('Salary',calc(bob));
console.log('Salary',calc(mary));

重构后代码：

constqaSalary=(base)=>base+9000*0.10;
constdevSalary=(base)=>base+1000*0.60;
//Addfunctiontotheobject.
constbob={
name:'Bob',
salary:1000,
job_type:'DEVELOPER',
calc:devSalary
};
constmary={
name:'Mary',
salary:1000,
job_type:'QA',
calc:qaSalary
};
console.log('Salary',bob.calc(bob.salary));
console.log('Salary',mary.calc(mary.salary));