前端如何优化if/else, switch 结构代码

在实际的开发工作中，我们总会遇到很多种业务场景需要去一一判断不同的情况，然后再去做相应的业务处理，因此，我们通常会写很多if…else判断，或者用switch语句来使代码结构更清晰一点，但就算这样，我们还有没有更好一点的优化手段呢？

if 单一条件时，我们可以使用三元表达式来优化

if (type === 1) {
	console.log(1)
}
callMethod()
// 优化
type === 1 ? console.log(1) : callMethod()

1.多条件判断时用 Array.includes()

const fruitsArr = ['apple', 'peach', 'banana', 'cherry']
// Array.some() 用于检测数组中的元素是否有满足指定条件的，若满足返回true，否则返回false
// Array.every() 用于检测数组中所有元素是否都符合指定条件，若符合返回true，否则返回false
// Array.includes()
// (1) 对多个条件使用 Array.includes()
if (item === 'apple' || item === 'peach' || item === 'banana'){
	// callMethod
}	
// 用includes来重构
	if (fruitsArr.includes(item) {
		// callMethod
	}

if (type === 0) {
	// do sth ...
} else if (type === 1) {
	// do sth ...
} else if (type === 2) {
	// do sth ...
} else if (type === 3) {
	// do sth ...
}

switch (type) {
	case 0:
	// ...
	break
	case 1:
	/ ...
	break
	case 2:
	// ...
	break
	case 3:
	// ...
	break
	default:
	// ...
}

2.利用Map结构

Map结构的目的和基本用法
JavaScript的对象（Object），本质上是键值对的集合（Hash结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。
Map 类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
也就是说，Object结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构，Map比Object更合适。

Map构造函数接受数组作为参数，该数组的成员是一个个表示键值对的数组
因此我们可以用map来改造if else 结构代码：
定义一个map,里面存储对应的状态码和相应的操作

let typeMap = new Map([
	[0, doCaseZero],
	[1, doCaseOne],
	[2, doCaseTwo],
	[3, doCaseThree]
])
// 定义对应的方法：
doCaseZero(){}
doCaseOne(){}
doCaseTwo(){}
doCaseThree(){}
// 当符合某个状态时，执行相应的操作
typeMap.get(type)()
// typeMap.get(1)() 执行doCaseOne方法

这种优化的缺点也很明显，那就是如果状态很多，就要写很多对应的函数，造成重复切单一的行为操作。

3.策略模式：存到对象里面，然后利用 obj[] 这种对象动态属性名来实现

// 将所有可预知的状态统一封装在一个对象中，利用对象的多态性来实现
let typeUser = {
	buyer: () => { buyGoods() },
	seller: () => { sellGoods() },
	producer: () => { produceGoods() },
	agent: () => { recommendGoods() }
}
buyGoods() {
	console.log(111)
}
// 写一个应对所有状态的方法：
faceDiffUsers(role) {
	typeUser['role']()
}