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