【JS代码规范】如何优化if-else代码规范

1. 快速结束，减少没必要的else

案例一：2种互斥的条件判断

function test(data) {
  let result = '';
  if (data < 0) {
    result = '负数';
  } else {
    result = '非负数';
  }
  return result;
}

优化一：

function test(data) {
  if (data < 0) {
    return '负数';
  } 
  return '非负数';
}

优化二：三元表达式

function test(data) {
    return data < 0 ? '负数' : '非负数';
}

案例二：多种互斥的条件判断

function test(data) {
    let result = '';
    if (data < 0) {
        result = '负数';
    } else if (data === 0) {
        result = '0';
    } else {
        result = '正数';
    }
    return result;
}

这个函数可以进一步简化，可以去掉不必要的变量 result，并直接在 if-else 结构中返回结果。这样可以减少代码行数并使代码更加简洁。以下是优化后的函数：

function test(data) {
    if (data < 0) {
        return '负数';
    } else if (data === 0) {
        return '0';
    } 
    return '正数';
}

在这个优化后的函数中，我们直接在每个条件分支中使用 return 语句来返回结果，而不再使用 result 变量。这样可以使代码更加清晰简洁。

案例三：前提条件检查

保护子句是一种防御性编程技术，用于处理可能导致程序失败的输入或条件。在这种情况下，我们可以添加输入值的检查，以确保方法在接收到有效输入后才继续执行

如果入参只能是 0和1 ，那么其他的入参没有必要去判断，用return终止

function test(data) {
    if (data < 0) throw new Error("invalid arguments");
	  if(data > 1) throw new Error("invalid arguments");
    return data === 0?"default":"admin";
}

2. 多种条件相同的处理

function region(province) {
 let result = '';
 if (
   province === '广东' ||
   province === '广西' ||
   province === '福建' ||
   province === '浙江' ||
   province === '云南'
 ) {
   result = '南方';
 }
 if (
   province === '河北' ||
   province === '黑龙江' ||
   province === '辽宁' ||
   province === '山东' ||
   province === '吉林'
 ) {
   result = '北方';
 }
}

优化一：switch case

function region(province) {
    switch (province) {
        case '广东':
        case '广西':
        case '福建':
        case '浙江':
        case '云南':
            return '南方';
        case '河北':
        case '黑龙江':
        case '辽宁':
        case '山东':
        case '吉林':
            return '北方';
        default:
            return '未知';
    }
}

优化二：对象字面量或者 Map 结构

您可以优化这个函数，使用对象字面量或者 Map 结构来存储省份和对应的地区信息，以减少重复的比较。以下是一个优化后的版本：

function region(province) {
    const regionMap = {
        '广东': '南方',
        '广西': '南方',
        '福建': '南方',
        '浙江': '南方',
        '云南': '南方',
        '河北': '北方',
        '黑龙江': '北方',
        '辽宁': '北方',
        '山东': '北方',
        '吉林': '北方'
    };

    return regionMap[province] || '未知'; // 返回对应省份的地区信息，如果未知则返回'未知'
}

优化三：数组 includes

另一种优化方式是将省份和地区的映射关系分组存储，而不是逐个列举所有省份。这样可以使代码更具可扩展性和易维护性。以下是另一种优化后的版本：

function region(province) {
    const regions = {
        '南方': ['广东', '广西', '福建', '浙江', '云南'],
        '北方': ['河北', '黑龙江', '辽宁', '山东', '吉林']
    };

    for (const region in regions) {
        if (regions[region].includes(province)) {
            return region;
        }
    }

    return '未知';
}

3. 策略模式 多种条件,条件是常量

案例一：按照不同的事件类型，处理不同的事件

function handleEvent(eventType) {
  if (eventType=== 'click') {
    handleClickEvent();
  } else if (eventType=== 'hover') {
    handleHoverEvent();
  } else if (eventType=== 'keyup') {
    handleKeyEvent();
  } else {
    handleDefaultEvent();
  }
}

优化一：

function handleEvent(eventType) {
    switch (eventType) {
        case 'click':
            handleClickEvent();
            break;
        case 'hover':
            handleHoverEvent();
            break;
        case 'keyup':
            handleKeyEvent();
            break;
        default:
            handleDefaultEvent();
    }
}

进一步优化：

策略模式：

function handleEvent(eventType) {
    const eventHandlers = {
        'click': handleClickEvent,
        'hover': handleHoverEvent,
        'keyup': handleKeyEvent
    };

    const eventHandler = eventHandlers[eventType] || handleDefaultEvent;
    eventHandler();
}

4. 多种条件嵌套

假设我们有一个简单的电商网站，根据用户的购物车中商品的种类和总金额来给用户不同的折扣。以下是一个使用 if-else 实现多个条件判断和子条件判断的示例：

function calculateDiscount(cartItems, totalAmount) {
    let discount = 0;

    if (cartItems.length >= 3) {
        if (totalAmount > 100) {
            discount = 0.2; // 20% discount for more than 3 items and total amount over 100
        } else {
            discount = 0.1; // 10% discount for more than 3 items and total amount 100 or less
        }
    } else {
        if (totalAmount > 50) {
            discount = 0.15; // 15% discount for 3 or fewer items and total amount over 50
        } else {
            discount = 0; // No discount for 3 or fewer items and total amount 50 or less
        }
    }

    return discount;
}

在这个示例中，根据购物车中商品的种类和总金额来计算折扣。通过嵌套的 if-else 语句，根据不同的条件组合来计算不同的折扣值。这种方式可以根据不同条件灵活地计算折扣，但随着条件的增加，代码会变得复杂且难以维护。

优化：将不同的折扣规则存储在一个数组。

function calculateDiscount(cartItems, totalAmount) {
  let discount = 0;
  const isCartItemsMoreThan3 = cartItems.length >= 3;
  const isTotalMorethen100 = totalAmount > 100;
  const discountArr = [
    { isCartItemsMoreThan3: true, isTotalMorethen100: true, discount: 0.2 },
    {
      isCartItemsMoreThan3: true,
      isTotalMorethen100: false,
      discount: 0.1,
    },
    {
      isCartItemsMoreThan3: false,
      isTotalMorethen100: true,
      discount: 0.15,
    },
    {
      isCartItemsMoreThan3: false,
      isTotalMorethen100: false,
      discount: 0,
    },
  ];
  discount = discountArr.filter(
    (item) =>
      item.isCartItemsMoreThan3 === isCartItemsMoreThan3 &&
      item.isTotalMorethen100 === isTotalMorethen100
  )[0].discount;

  return discount;
}