5个让JavaScript代码更简洁的小技巧

淩亂°似流年 2023-01-21 14:27 239阅读 0赞

![ccd08d1c9daeec7334d839f3ecda9bae.png][]

英文 | https://betterprogramming.pub/5-practices-to-make-your-javascript-code-base-cleaner-611300dfe088

翻译 | 杨小二

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

动态键值对版本：

# **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 creteOption(someObject) {
      const newObject = Object.assign({
       title: "Default Title",
       subTitle: "Default Subtitle",
       buttonColor: "blue",
       disabled: true
     },someObject)
     return newObject
     }
     console.log(creteOption(someObject));

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

[ccd08d1c9daeec7334d839f3ecda9bae.png]: /images/20221020/7993a17a5d01492ebea9c6f8906cc84a.png