五种使 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)); 

很赞哦!（5）