【JS】优化代码分支-CSDN博客

本文链接：https://blog.csdn.net/owo_ovo/article/details/136747613

本文讨论了如何通过对象映射和元组结构优化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('参数不合法')
	}
}