关注我不定时分享更多精彩内容

JavaScript无处不在，从PC端到移动设备端，甚至是后端，都在使用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));

最后，谢谢你的阅读，祝编程愉快！

来源：前端大全
如有侵权请联系小编删除