5個讓JavaScript代碼更簡潔的小技巧

1、使用默認參數(shù)代替短路或條件
function SomeMethod(paramThatCanBeUndefined) {const localValue = paramThatCanBeUndefined || "Default Value";console.log(localValue)// ...}SomeMethod() // Default ValueSomeMethod("SomeValue") // SomeValue
嘗試以下方法:
function SomeMethod(console.log(paramThatCanBeUndefined)// ...}SomeMethod() // Default ValueSomeMethod("SomeValue") // SomeValue
聲明:Falsy值,如'',"",false,null,0,和NaN將不會被默認值替代:
function SomeMethod(paramThatCanBeUndefined = "Default Value") {console.log(paramThatCanBeUndefined)// ...}SomeMethod(null) // will not Default Value, will null InsteadSomeMethod("SomeValue") // SomeValue
2、處理多個條件
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、用動態(tài)鍵值對替換開關(guān)(即對象文字)
開關(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 pathconsole.log(getRoute()) // return Default pathconsole.log(getRoute(null)) // return Default path// More cases if new arrive// You can think if else instead of switch
動態(tài)鍵值對版本:
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 pathconsole.log(getRoute()) // return Default pathconsole.log(getRoute(null)) // return Default path// No more switch/if-else here.// Easy to Further expansion
4、避免過多的函數(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 viaconsole.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 viaconst 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è)置默認對象
這看起來很繁瑣:
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}
這種方法看起來更好:
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));
最后,謝謝你的閱讀,祝編程愉快!
評論
圖片
表情
