代码优化之if-else

前言

当项目中有越来越多的 if else的时候，不免会有些头痛，一个接着一个，一层嵌套一层，十分影响代码可读性和代码维护。

为了解决这个问题，在这里以购买订单状态为例举例

优化过程

刚开始拿到需求的时候，可能会写出以下的代码：

	// 获取状态
	let status = getStatus()
	if (status === 'waiting') {
		console.log('等待支付')
	} else if (status === 'paying') {
		console.log('正在支付')
	} else if (status === 'success') {
		console.log('支付成功')
	} else if (status === 'failed') {
		console.log('支付失败')
	}

优化一

可以通过switch case增加可读性

	// 获取状态
	let status = getStatus()
	switch (status) {
		case 'waiting':
			console.log('等待支付')
			break
		case 'paying':
			console.log('正在支付')
			break
		case 'success':
			console.log('支付成功')
			break
		case 'failed':
			console.log('支付失败')
			break
	}

优化二

项目中，每种状态下可能会做很多事，这个可以相应配置多个方法

	//获取状态
	let status = getStatus()
	let fnObj = {
		waitingTodo: function () {
			// do something
			console.log('等待支付')
		},
		payingTodo: function () {
			// do something
			console.log('正在支付')
		},
		successTodo: function () {
			// do something
			console.log('支付成功')
		},
		failedTodo: function () {
			// do something
			console.log('支付失败')
		}
	}
	let statusObj = {
		'waiting': fnObj.waitingTodo,
		'paying': fnObj.payingTodo,
		'success': fnObj.successTodo,
		'failed': fnObj.failedTodo
	}
	statusObj[status]()

优化片段

优化片段一

if语句里只有一行代码的时候可以省略大括号

	//获取状态
	let status = getStatus()
	if (status === 'success') console.log('支付成功')

优化片段二

使用运算符 &&

	//获取状态
	let status = getStatus()
	status === 'success' && console.log('支付成功')

优化片段三

使用三元运算符

	//获取状态
	let status = getStatus()
	let flag = null
	status === 'success' ? flag = true : flag = false

优化片段四

赋值布尔情况

	//获取状态
	let status = getStatus()
	let flag = null
	flag = status === 'success'

优化片段五

在遇到以下情况下：

	//获取状态
	let status = getStatus()
	// 实际情况 || 运算符可能需要很多
	if (status === 'waiting' || status === 'success' || status === 'paying') {
		// do something
	}

使用数组及其includes方法

	//获取状态
	let status = getStatus()
	let statusArr = ['waiting', 'paying', 'success']
	if (statusArr.includes(status)) {
		// do something
	}

优化道路任重而道远，这还只是个开始，大家有什么好的优化方法不妨分享分享，持续更新