【JS】优化代码分支

本文讨论了如何通过对象映射和元组结构优化JavaScript代码中的条件判断,以提高代码的可读性和维护性,特别关注了根据不同参数执行不同操作的情况。
摘要由CSDN通过智能技术生成

判断条件很多时,会降低代码的可读性,例如下面这段代码

function fn(type){
	if(type === 1){
		console.log('待把相思灯下诉')
	}else if(type === 2){
		console.log('一缕新欢')
	}else if(type === 3){
		console.log('旧恨千千缕')
	}else if(type === 4){
		console.log('最是人间留不住')
	}else if(type === 5){
		console.log('朱颜辞镜花辞树')
	}
}

可以使用一个对象进行映射,优化后写法如下

function fn(type){
	let obj = {
		1: '待把相思灯下诉',
		2: '一缕新欢',
		3: '旧恨千千缕',
		4: '最是人间留不住',
		5: '朱颜辞镜花辞树'
	}
	if(obj[type]){
		console.log(obj[type])
	}else{
		console.log('参数不合法')
	}
}

但上述举例过于绝对,真是开发中可能不同的参数有着不同的逻辑,如:type为1:打印、2:保存数据、3:发送请求、4:…

这里可以优化对象进行映射

function fn(type){
	let obj = {
		1: () => {console.log('待把相思灯下诉')}, // 在函数内处理相应操作
		2: () => {console.log('一缕新欢')},
		3: () => {console.log('旧恨千千缕')},
		4: () => {console.log('最是人间留不住')},
		5: () => {console.log('朱颜辞镜花辞树')},
	}
	if(obj[type]){
		obj[type]() // 调用对应处理函数
	}else{
		console.log('参数不合法')
	}
}

上述场景虽已经然适用于大部分场景,但是部分情境下,判断条件会比直接判断参数更加复杂,如参数是否处于某一区间,是否为number类型,能否被2整除…

这里只是表明每个参数判断逻辑不同

function fn(type){
	if(type === 1){
		console.log('待把相思灯下诉')
	}else if(type % 2 === 0){
		console.log('一缕新欢')
	}else if(type === [3][0]){
		console.log('旧恨千千缕')
	}else if([5].includes(type)){
		console.log('最是人间留不住')
	}else if(type === 7){
		console.log('朱颜辞镜花辞树')
	}
}

可以使用元组来映射,将判断条件也变为函数

function fn(type){
	let map = [
		[
			() => type === 1,     // 条件
			() => console.log('待把相思灯下诉'),  // 处理函数
		],
		[
			() => type % 2 === 0,
			() => console.log('一缕新欢'), 
		],
		[
			() => type === [3][0],
			() => console.log('旧恨千千缕'), 
		],
		[
			() => [5].includes(type),
			() => console.log('最是人间留不住'), 
		],
		[
			() => type === 7,
			() => console.log('朱颜辞镜花辞树'), 
		],
	]
	
	// 根据每个数组第一项
	const target = map.find(m=>m[0]())  // 找到符合判断条件的元组
	if(target){
		target[1]()
	}else{
		console.log('参数不合法')
	}
}
  • 8
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

田本初

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值