今天向大家介绍5种使JavaScript代码库更干净的方法，一起来看一下都有哪些吧！

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