[[442863]]

1、使用默認參數代替短路或條件

默認參數通常比短路更干凈。

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將不會被默認值替代：

function SomeMethod(paramThatCanBeUndefined = "Default Value") {         
  console.log(paramThatCanBeUndefined)   
  // ... 
} 
SomeMethod(null) // will not Default Value, will null Instead 
SomeMethod("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、用動態鍵值對替換開關(即對象文字)

開關版本(或將開關替換為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 

動態鍵值對版本：

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、避免過多的函數參數

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設置默認對象

這看起來很繁瑣：

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));