推薦教學：《JavaScript影片教學》
#最近在重構程式碼時，我發現早期的程式碼使用太多的if 語句，其程度是我從未見過的。這就是為什麼我認為分享這些簡單的技巧是非常重要的，這些技巧可以幫助我們避免過多的使用 if 語句。
接下來會介紹6種方式來取代if 的使用，這樣做不是堅決不使用if 偏執狂，而是換個方式思考我們的編碼思路。
1. 三元運算子
#範例1
有IF的程式碼：
function saveCustomer(customer) {
if (isCustomerValid(customer)) {
database.save(customer)
} else {
alert('customer is invalid')
}
}登入後複製
重構後程式碼：
function saveCustomer(customer) {
return isCustomerValid(customer)
? database.save(customer)
: alert('customer is invalid')
}登入後複製
使用ES6
const saveCustomer = customer =>
isCustomerValid(customer)?
database.save(customer) : alert('customer is invalid')登入後複製
範例2
有IF的程式碼：
function customerValidation(customer) {
if (!customer.email) {
return error('email is require')
} else if (!customer.login) {
return error('login is required')
} else if (!customer.name) {
return error('name is required')
} else {
return customer
}
}登入後複製
重構後程式碼：
const customerValidation = customer =>
!customer.email ? error('email is required')
: !customer.login ? error('login is required')
: !customer.name ? error('name is required')
: customer登入後複製
範例3
#有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);
}登入後複製
2.短路運算子
#範例1
有IF的程式碼：
const isOnline = true;
const makeReservation= ()=>{};
const user = {
name:'Damian',
age:32,
dni:33295000
};
if (isOnline){
makeReservation(user);
}登入後複製
重構後程式碼：
const isOnline = true;
const makeReservation= ()=>{};
const user = {
name:'Damian',
age:32,
dni:33295000
};
isOnline&&makeReservation(user);登入後複製
範例2
#有IF的程式碼：
const active = true;
const loan = {
uuid:123456,
ammount:10,
requestedBy:'rick'
};
const sendMoney = ()=>{};
if (active&&loan){
sendMoney();
}登入後複製
重構後程式碼：
const active = true;
const loan = {
uuid:123456,
ammount:10,
requestedBy:'rick'
};
const sendMoney = ()=>{};
active && loan && sendMoney();登入後複製
3.函數委託:
#例子1
有IF的程式碼：
function itemDropped(item, location) {
if (!item) {
return false;
} else if (outOfBounds(location) {
var error = outOfBounds;
server.notify(item, error);
items.resetAll();
return false;
} else {
animateCanvas();
server.notify(item, location);
return true;
}
}登入後複製
重構後程式碼：
function itemDropped(item, location) {
const dropOut = function() {
server.notify(item, outOfBounds);
items.resetAll();
return false;
}
const dropIn = function() {
server.notify(item, location);
animateCanvas();
return true;
}
return !!item && (outOfBounds(location) ? dropOut() : dropIn());
}登入後複製
大家都說履歷沒項目寫，我就幫大家找了一個項目，還附贈【搭建教學】。
我和阿里雲合作伺服器，折扣價比較便宜：89/年，223/3年，比學生9.9每月還便宜，買了搭建個項目，熟悉技術棧比較香（老用戶用家人帳號買就好了，我用我媽的)推薦買三年的划算點，點擊本條就可以查看。
4.非分支策略
此技巧嘗試避免使用switch語句，相反地用鍵/值創建一個映射並使用一個函數存取作為參數傳遞的鍵的值。
範例1
有switch的程式碼：
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")登入後複製
5.作為資料的函數
我們知道在JS中函數是第一個類，所以使用它我們可以把程式碼分割成一個函數物件。
有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 == "p" ) {
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;
},
p : function(a,b) {
return a / b;
},
run: function(fn, a, b) {
return fn && fn(a,b);
}
}
calc.run(calc.mult, 7, 4); //28登入後複製
6.多態性
多態性是物件具有多種形式的能力。 OOP中多態性最常見的用法是使用父類別引用來引用子類別物件。
有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));登入後複製
原文：https://dev.to/damxipo/avoid-use- if-on-our-js-scripts-1b95
作者：Damian Ciplat
更多程式相關知識，請造訪：程式設計課程 ！ ！
以上是避免在JS腳本中過度使用 if 語句，6種代替 if 的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
