多重判断优化

@多重判断优化 [多重判断优化 ]

多重判断优化

如果我们有这么一个需求 后台返回一个数据 我们对返回的数据进行不同的处理那么我们先来还原一下场景

const data = {type:1,role:'admin'} // 后台返回给我们的数据
let {type,role} = data; //通过结构赋值拿到type 和 role
 let buttonEvent=(type) => {
 	if(type === 1) {
 		console.log('color1')
 		console.log('index1.html')
 	} else if(type === 2) {
 		console.log('color2')
 		console.log('index2.html')
	}
}
buttonEvent(type,role);

用switch替换掉if 这样看起来更方便一点

const data = {type:1,role:'admin'} // 后台返回给我们的数据
let {type,role} = data; //通过结构赋值拿到type 和 role
let buttonEvent=(type,role) => {
	if(role === 'admin') {
		switch(type) {
			case 1:
				console.log('color1')
				console.log('index1.html')
			break;
			case 2:
				console.log('color2')
				console.log('index2.html')
			break;
			
		}
	}
	buttonEvent(type,role);
	

如果代码太多的话，或者加上role判断还是感觉一坨，再优化一下switch

const data = {type:1,role:'admin'} // 后台返回给我们的数据
let {type,role} = data; //通过结构赋值拿到type 和 role
let actions = {  //我们吧他放在一个对象里那么我们下下面直接取就可以了 
	1:['color1', 'index1'],
	2:['color2', 'index2'],
	3:['color2', 'index2'],
}
let buttonEvent = (type,role) => {
	let [color, target] = actions[type]
	console.log(color)
	console.log(target)
}
buttonEvent(type,role);

我们这样做虽然看起来简洁但是不是很好维护，role也不止是一种角色 我们试试通过拼接让他看起来更简洁好维护

const data = {type:1,role:'admin'} // 后台返回给我们的数据
let {type,role} = data; //通过结构赋值拿到type 和 role
let actions = {
	'admin_1':['color1', 'index1'], //通过对key的拼接实现
	'admin_2':['color2', 'index2'],
	'admin_3':['color3', 'index3'],
	'guest_4':['color4', 'index4'],
}
let buttonEvent = (type,role) => {
	let [color, target] = actions[`${role}_${type}`]
	console.log(color)
	console.log(target)
}
buttonEvent(type,role);

拼接的方法看着有点别扭，我们继续优化 使用map类型 试一下

const data = {type:1,role:'admin'} // 后台返回给我们的数据
let {type,role} = data; //通过结构赋值拿到type 和 role
let actions = new Map([  // 我们新建了一个map类型
	[{role:'admin',type:1},['color1','index1']],
	[{role:'admin',type:2},['color1','index2']],
	[{role:'admin',type:3},['color1','index3']],
	[{role:'guest',type:4},['color4','index4']],
])
let buttonEvent = (type, role) => {
	[...actions].filter(item => {//[...actions].将map类型转化成一个数组
		return item[0].role === role && item[0].type === type
	}).forEach(item => {
		let [color, target] = item[1];
			console.log(color)
			console.log(target)
	})    
	
}
buttonEvent(type,role);

上边的代码使用结构赋值再优化下吧

const data = {type:1,role:'admin'} // 后台返回给我们的数据
let {type,role} = data; //通过结构赋值拿到type 和 role
let actions = new Map([
	[{role:'admin',type:1},['color1','index1']],
	[{role:'admin',type:2},['color1','index2']],
	[{role:'admin',type:3},['color1','index3']],
	[{role:'guest',type:4},['color4','index4']],
])
let buttonEvent = (type, role) => {
	[...actions].filter(([key]) =>key.role === role && key.type === type)  //这里只是使用了结构赋值
	.forEach(([key,value]) => {
		let [color, target] =value;
		console.log(color)
		console.log(target)
	})    
}
buttonEvent(type,role);

对于不确定的值我们还是希望用正则来表示的 那么我们继续优化。方便日后的维护

const data = {type:1,role:'admin'} // 后台返回给我们的数据
let {type,role} = data; //通过结构赋值拿到type 和 role
let actions = new Map([
	[/^admin_[1-4]$/,['color1','index1']],
	[/^guest_[1-4]$/,['color1','index2']],
])
let buttonEvent = (type, role) => {
	[...actions].filter(([reg]) =>reg.test(`${role}_${type}`))
	.forEach(([key,value]) => {
		let [color, target] =value;
		console.log(color)
		console.log(target)
	})    
}
buttonEvent(type,role);

这样的正则有什么好处呢 ？我们来做最后一步的展示 这样的优化 不管后边如何变我们只需改动很小的部分就完工了

const data = {type:1,role:'admin'} // 后台返回给我们的数据
let {type,role} = data; //通过结构赋值拿到type 和 role
let actions = () => {
	function admin() {
		console.log('admin')
	}
	function guest() {
		console.log('guest')
	}
	function adminOther() {
		console.log('adminOther')
	}
	return new Map([
		[/^admin_[1-4]$/,admin],
		[/^guest_[1-4]$/,guest],
		[/^admin.*/,adminOther],
	])
}
let buttonEvent = (type, role) => {
	[...actions()].filter(([reg]) =>reg.test(`${role}_${type}`))
	.forEach(([key,value]) => {
		value()
	})    
	
}
buttonEvent(type,role);

简单粗暴 认真学看代码 你会受益匪浅。 如果喜欢的话 可以百度《冰山工作室》