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

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

1. function SomeMethod(paramThatCanBeUndefined) { 
2.  
3.    const localValue = paramThatCanBeUndefined || "Default Value"; 
4.    console.log(localValue) 
5.    // ... 
6. } 
7. SomeMethod() // Default Value 
8. SomeMethod("SomeValue") // SomeValue 

嘗試以下方法：

1. function SomeMethod( 
2.   console.log(paramThatCanBeUndefined) 
3.   // ... 
4. } 
5. SomeMethod() // Default Value 
6. SomeMethod("SomeValue") // SomeValue 

聲明：Falsy值，如''，""，false，null，0，和NaN將不會被默認值替代：

1. function SomeMethod(paramThatCanBeUndefined = "Default Value") {         
2.   console.log(paramThatCanBeUndefined)   
3.   // ... 
4. } 
5. SomeMethod(null) // will not Default Value, will null Instead 
6. SomeMethod("SomeValue") // SomeValue 

2、處理多個條件

1. const conditions = ["Condition 2","Condition String2"]; 
2. someFunction(str){ 
3.   if(str.includes("someValue1") || str.includes("someValue2")){ 
4.     return true 
5.   }else{ 
6.     return false 
7.   } 
8. } 

一種更干凈的方法是：

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

3、用動態鍵值對替換開關(即對象文字)

開關版本(或將開關替換為if / else)：

1. const UserRole = { 
2.   ADMIN: "Admin", 
3.   GENERAL_USER: "GeneralUser", 
4.   SUPER_ADMIN: "SuperAdmin", 
5. }; 
6. function getRoute(userRole = "default role"){ 
7.  
8.  
9.   switch(userRole){ 
10.     case UserRole.ADMIN: 
11.       return "/admin" 
12.     case UserRole.GENERAL_USER: 
13.         return "/GENERAL_USER" 
14.     case UserRole.SUPER_ADMIN: 
15.         return "/superadmin" 
16.     default: 
17.       return "/"  
18.   } 
19.  
20. } 
21. console.log(getRoute(UserRole.ADMIN)) // return "/admin" 
22. console.log(getRoute("Anything")) // return Default path 
23. console.log(getRoute()) // return Default path 
24. console.log(getRoute(null)) // return Default path 
25.  
26. // More cases if new arrive 
27. // You can think if else instead of switch 

動態鍵值對版本：

1. const UserRole = { 
2.    ADMIN: "Admin", 
3.    GENERAL_USER: "GeneralUser", 
4.    SUPER_ADMIN: "SuperAdmin", 
5. }; 
6. function getRoute(userRole = "default role"){ 
7.  const appRoute = { 
8.   [UserRole.ADMIN]: "/admin", 
9.   [UserRole.GENERAL_USER]: "/user", 
10.   [UserRole.SUPER_ADMIN]: "/superadmin" 
11.  }; 
12.  return appRoute[userRole] || "Default path"; 
13. } 
14. console.log(getRoute(UserRole.ADMIN)) // return "/admin" 
15. console.log(getRoute("Anything")) // return Default path 
16. console.log(getRoute()) // return Default path 
17. console.log(getRoute(null)) // return Default path 
18. // No more switch/if-else here. 
19. // Easy to Further expansion 

4、避免過多的函數參數

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

這是一種更清潔的方法：

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

5、使用Object.assign設置默認對象

這看起來很繁瑣：

1. const someObject = { 
2.  title: null, 
3.  subTitle: "Subtitle", 
4.  buttonColor: null, 
5.  disabled: true 
6. }; 
7. function createOption(someObject) { 
8.  someObject.title = someObject.title || "Default Title"; 
9.  someObject.subTitle = someObject.subTitle || "Default Subtitle"; 
10.  someObject.buttonColor = someObject.buttonColor || "blue"; 
11.  someObject.disabled = someObject.disabled !== undefined ?  someObject.disabled : true; 
12.  return someObject 
13. } 
14. console.log(createOption(someObject)); 
15.  
16. // Output be like  
17. // {title: 'Default Title', subTitle: 'Subtitle', buttonColor: 'blue', disabled: true} 

這種方法看起來更好：

1. const someObject = { 
2.   title: null, 
3.   subTitle: "Subtitle", 
4.   buttonColor: null, 
5.   disabled: true 
6.  }; 
7.  function creteOption(someObject) { 
8.   const newObject = Object.assign({ 
9.    title: "Default Title", 
10.    subTitle: "Default Subtitle", 
11.    buttonColor: "blue", 
12.    disabled: true 
13.  },someObject) 
14.  return newObject 
15.  } 
16.  console.log(creteOption(someObject)); 

原文鏈接：https://www.toutiao.com/a7046985686419014157/