【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;
}