五种使 JavaScript 代码库更干净的方法

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/