點(diǎn)擊上方關(guān)注?前端技術(shù)江湖，一起學(xué)習(xí)，天天進(jìn)步

JavaScript無(wú)處不在，從PC端到移動(dòng)設(shè)備端，甚至是后端，都在使用JavaScript。

在本文中，我將嘗試一些可用來(lái)使代碼看起來(lái)更簡(jiǎn)潔的實(shí)踐方案。

1、使用默認(rèn)參數(shù)代替短路或條件

默認(rèn)參數(shù)通常比短路更干凈。

function?SomeMethod(paramThatCanBeUndefined)?{

???const?localValue?=?paramThatCanBeUndefined?||?"Default?Value";
???console.log(localValue)
???//?...
}
SomeMethod()?//?Default?Value
SomeMethod("SomeValue")?//?SomeValue

嘗試以下方法：

function?SomeMethod(
??console.log(paramThatCanBeUndefined)
??//?...
}
SomeMethod()?//?Default?Value
SomeMethod("SomeValue")?//?SomeValue

聲明：Falsy值，如''，""，false，null，0，和NaN將不會(huì)被默認(rèn)值替代：

function?SomeMethod(paramThatCanBeUndefined?=?"Default?Value")?{????????
??console.log(paramThatCanBeUndefined)??
??//?...
}
SomeMethod(null)?//?will?not?Default?Value,?will?null?Instead
SomeMethod("SomeValue")?//?SomeValue

2、處理多個(gè)條件

const?conditions?=?["Condition?2","Condition?String2"];
someFunction(str){
??if(str.includes("someValue1")?||?str.includes("someValue2")){
????return?true
??}else{
????return?false
??}
}

一種更干凈的方法是：

someFunction(str){
???const?conditions?=?["someValue1","someValue2"];
???return?conditions.some(condition=>str.includes(condition));
}

3、用動(dòng)態(tài)鍵值對(duì)替換開關(guān)（即對(duì)象文字）

開關(guān)版本（或?qū)㈤_關(guān)替換為if / else）：

const?UserRole?=?{
??ADMIN:?"Admin",
??GENERAL_USER:?"GeneralUser",
??SUPER_ADMIN:?"SuperAdmin",
};
function?getRoute(userRole?=?"default?role"){


??switch(userRole){
????case?UserRole.ADMIN:
??????return?"/admin"
????case?UserRole.GENERAL_USER:
????????return?"/GENERAL_USER"
????case?UserRole.SUPER_ADMIN:
????????return?"/superadmin"
????default:
??????return?"/"?
??}

}
console.log(getRoute(UserRole.ADMIN))?//?return?"/admin"
console.log(getRoute("Anything"))?//?return?Default?path
console.log(getRoute())?//?return?Default?path
console.log(getRoute(null))?//?return?Default?path

//?More?cases?if?new?arrive
//?You?can?think?if?else?instead?of?switch

動(dòng)態(tài)鍵值對(duì)版本：

const?UserRole?=?{
???ADMIN:?"Admin",
???GENERAL_USER:?"GeneralUser",
???SUPER_ADMIN:?"SuperAdmin",
};
function?getRoute(userRole?=?"default?role"){
?const?appRoute?=?{
??[UserRole.ADMIN]:?"/admin",
??[UserRole.GENERAL_USER]:?"/user",
??[UserRole.SUPER_ADMIN]:?"/superadmin"
?};
?return?appRoute[userRole]?||?"Default?path";
}
console.log(getRoute(UserRole.ADMIN))?//?return?"/admin"
console.log(getRoute("Anything"))?//?return?Default?path
console.log(getRoute())?//?return?Default?path
console.log(getRoute(null))?//?return?Default?path
//?No?more?switch/if-else?here.
//?Easy?to?Further?expansion

4、避免過(guò)多的函數(shù)參數(shù)

function?myFunction(employeeName,jobTitle,yrExp,majorExp){
?return?`${employeeName}?is?working?as?${jobTitle}?with?${yrExp}????years?of?experience?in?${majorExp}`
}
//output?be?like?John?is?working?as?Project?Manager?with?12?year?of?experience?in?Project?Management
//?you?can?call?it?via
console.log(myFunction("John","Project?Manager",12,"Project?Management"))
//????*****?PROBLEMS?ARE?*****
//?Violation?of?'clean?code'?principle
//?Parameter?sequencing?is?important
//?Unused?Params?warning?if?not?used
//?Testing?need?to?consider?a?lot?of?edge?cases.

這是一種更清潔的方法：

function?myFunction({employeeName,jobTitle,yrExp,majorExp}){
?return?`${employeeName}?is?working?as?${jobTitle}?with?${yrExp}?years?of?experience?in?${majorExp}`
}
//output?be?like?John?is?working?as?Project?Manager?with?12?year?of?experience?in?Project?Management
//?you?can?call?it?via
const?mockTechPeople?=?{
??employeeName:"John",
??jobTitle:"Project?Manager",
??yrExp:12,
??majorExp:"Project?Management"
}
console.log(myFunction(mockTechPeople))
//?ES2015/ES6?destructuring?syntax?is?in?action
//?map?your?desired?value?to?variable?you?need.

5、使用Object.assign設(shè)置默認(rèn)對(duì)象

這看起來(lái)很繁瑣：

const?someObject?=?{
?title:?null,
?subTitle:?"Subtitle",
?buttonColor:?null,
?disabled:?true
};
function?createOption(someObject)?{
?someObject.title?=?someObject.title?||?"Default?Title";
?someObject.subTitle?=?someObject.subTitle?||?"Default?Subtitle";
?someObject.buttonColor?=?someObject.buttonColor?||?"blue";
?someObject.disabled?=?someObject.disabled?!==?undefined????someObject.disabled?:?true;
?return?someObject
}
console.log(createOption(someObject));

//?Output?be?like?
//?{title:?'Default?Title',?subTitle:?'Subtitle',?buttonColor:?'blue',?disabled:?true}

這種方法看起來(lái)更好：

const?someObject?=?{
??title:?null,
??subTitle:?"Subtitle",
??buttonColor:?null,
??disabled:?true
?};
?function?creteOption(someObject)?{
??const?newObject?=?Object.assign({
???title:?"Default?Title",
???subTitle:?"Default?Subtitle",
???buttonColor:?"blue",
???disabled:?true
?},someObject)
?return?newObject
?}
?console.log(creteOption(someObject));

最后，謝謝你的閱讀，祝編程愉快！

The End

歡迎自薦投稿到《前端技術(shù)江湖》，如果你覺(jué)得這篇內(nèi)容對(duì)你挺有啟發(fā)，記得點(diǎn)個(gè)?「在看」哦

點(diǎn)個(gè)『在看』支持下?