Front-end Algorithms - Tips to reduce if-else

    1. Short circuit operation

    The logic of Javascript or the short-circuit operation of || can sometimes be used to replace some relatively simple if else

    Short-circuit operation of logical or ||: If the left side can be turned into true, return the value of the left formula, otherwise return the value of the right formula. Let's use a simple case to express:

    let c
    if(a){
        c = a
    } else {
        c = b
    }
    

    Short circuit algorithm simplified:

    let c = a || b
    


    2. Ternary operator

    In many cases, we can use ternary operators to replace if else for simple judgments. Only one layer of ternary operators is recommended here, because multi-layer nested ternary operators are not very readable.

    Example: Return 1 if the condition is true, otherwise return 0:

    const fn = (nBoolean) {
         if (nBoolean) {
             return 1
         } else {
             return 0
         }
    
    }
    
    // use ternary operator
    const fn = (nBoolean) {
         return nBoolean ? 1 : 0
    }
    

    Ternary operators are also used in many places, such as: conditional assignment, recursion...

    // num value is 10 when nBoolean is true, otherwise it is 5
    let num = nBoolean ? 10 : 5
    
    // Find the sum of integers between 0-n
    let sum = 0;
    function add(n){
         sum += n
         return n >= 2 ? add(n - 1) : result;
    };
    let num = add(10);//55
    


    3. Switch case

    The above two methods: short-circuit operation and ternary operation are very useful, and the code is very concise, but they can only be used for simple judgments, and cannot be used when encountering multiple conditions. For switch case, although its readability is indeed higher than else if, but writing is more troublesome, there are advantages and disadvantages

    Example: There are four types of A, B, C, and D. When A and B are used, output 1, C outputs 2, D outputs 3, and the default output is 0.

    let type = 'A'
    
    //if else if
    if (type === 'A' || type === 'B') {
        console.log(1);
    } else if (type === 'C') {
        console.log(2);
    } else if(type === 'D') {
        console.log(3);
    } else {
        console.log(0)
    }
    
    //switch case
    switch (type) {
        case 'A':
        case 'B':
            console.log(1)
            break
        case 'C':
            console.log(2)
            break
        case 'D':
            console.log(3);
            break;
        default:
            console.log(0)
    }
    


    4. Object Configuration/Strategy Pattern

    Object configuration looks similar to the strategy pattern, which uses different data/algorithms/functions according to different parameters.

    The strategy pattern is to encapsulate a series of algorithms and make them replaceable with each other. The encapsulated algorithm is independent, and its characteristics cannot be changed externally.

    The object configuration method implements the above example:

    let type = 'A'
    
    let tactics = {
        'A': 1,
        'B': 1,
        'C': 2,
        'D': 3,
        default: 0
    }
    console.log(tactics[type]) // 1
    

    Example2:
    Different discounts are used according to different users, such as: no discount for ordinary users, 10% discount for ordinary member users, 15% discount for annual fee members, 20% discount for super members

    Use if else to implement:

    const getDiscount = (userKey) => {
         if (userKey === 'ordinary member') {
             return 0.9
         } else if (userKey === 'annual membership') {
             return 0.85
         } else if (userKey === 'super member') {
             return 0.8
         } else {
             return 1
         }
    }
    console.log(getDiscount('ordinary member')) // 0.9
    

    Implemented using the Object Configuration/Strategy pattern

    const getDiscount = (userKey) => {
         // We can generate our discount object based on user type
         let discounts = {
             'Normal Member': 0.9,
             'Annual membership': 0.85,
             'Super Member': 0.8,
             'default': 1
         }
         return discounts[userKey] || discounts['default']
    }
    console.log(getDiscount('ordinary member')) // 0.9
    


    5. Using the Map keyword

    Object configuration does not necessarily have to use objects to manage our key-value pairs, you can alsouse Map to manage

    const getDiscount = (userKey) => {
         // We can generate our discount object based on user type
         let discounts = new Map([
             ['ordinary member', 0.9],
             ['Annual membership', 0.85],
             ['super member', 0.8],
             ['default', 1]
         ])
         return discounts.get(userKey) || discounts.get('default')
    }
    console.log(getDiscount('ordinary member')) // 0.9
    

    Case 2 Year-end bonus:

    The company's year-end bonus is issued according to the employee's salary base and performance level. For example, the year-end bonus for those with performance A is 4 times the salary, for those with performance B, it is 3 times, and for those with performance C, it is only 2 times. Adding a division of departments, assuming that the company has two departments D and F, the performance of D department is better, so the year-end bonus is doubled by 1.2 times, and the performance of F department is poor, and the year-end bonus is 10% off

    let strategies = new Map([
         ['A_D', 4 * 1.2],
         ['B_D', 3 * 1.2],
         ['C_D', 2 * 1.2],
         ['A_F', 4 * 0.9],
         ['B_F', 3 * 0.9],
         ['C_F', 2 * 0.9]
    ])
    const calculateBonus = (performanceLevel, salary, department) => {
         return strategies. get(`${performanceLevel}_${department}`) * salary
    }
    calculateBonus( 'A', 20000, 'D' ) // output: 96000
    

    Popular posts from this blog

    大学资料分享——广工计院各个科目实验报告、课设及期末复习资料!!

    JAVA Traffic Signal Light Course Design (Source Code + Report + Video Demonstration)

    Win10 远程计算机或设备将不接受连接