JavaScript之if else分支优化

正文

在我们的项目中会不会出现这样的代码，分支套分支

function run(name) {
	if (name == '张三') {
		console.log(`${nmae}开始跑步了`)
	} else if (name == '李四') {
		console.log(`${name}已经跑完了`)
	} else if (name == '王五') {
		console.log(`${name}他腿疼，没办法跑步了`)
	} else {
		console.log('赛道被炸了，都没办法跑步了')
	}
}
run('张三')

接下来我们来优化一下我们的代码
首先我们可以知道 name == 某一个值 的时候去输出另一个值
我们来修改一下代码

无论有多少个分支最终会转成两个分支
以后都方便我们后期的扩展

function run(name) {
    const map = {
        张三: '张三开始跑步了',
        李四: '李四已经跑完了',
        王五: '王五他腿疼，没办法跑步了',
        赵六: '赵六已经是第一名了' // 扩展
    }
    if (map[name]) {
        console.log(map[name])
    } else {
        console.log('赛道被炸了，都没办法跑步了')
    }
}
run('张三')

当然了，这个时候就出现问题了
比如，在我们的值等于“张三”的时候我做输出，等于“李四”的时候我要执行一个方法，而“王五”我要去请求接口等等不同的操作
我们来修改一下代码

function run(name) {
    const map = {// 我们把属性对应的东西变成一个函数
        张三: () => { console.log('张三开始跑步了') },
        李四: () => { console.log('执行了一个方法') },// 这里我就还是用console.log()代替了
        王五: () => { console.log('请求了服务器接口') }
    }
    if (map[name]) {
        // 我们这里就不是输出了，而是去调用
        map[name]()
    } else {
        console.log('赛道被炸了，都没办法跑步了')
    }
}
run('张三')

如果我们的判断不单单只是判断是否等于某个值的时候应该怎么去处理呢，我们看下面的代码
举个例子🌰

 * 比如张三的话，只要名字里包含“三”就执行
 * 李四的话，必须要结尾是“四”并且长度不能大于四
 * 王五了，必须要结尾是“五”并且长度只能等于二
 * 这个时候我们该怎么做呢

function run(name) {
    // 我们可以吧它映射成一个元组
    const map = [
        [
            () => name.includes('三'), // 第一项表示的是条件，返回true或者false
            () => console.log('张三开始跑步了') // 第二项表示的是条件满足执行的事情
        ],
        [
            () => name.endsWith('四') && name.length <= 4,
            () => console.log('李四已经跑完了')
        ],
        [
            () => name.endsWith('五') && name.length == 2,
            () => console.log('王五他腿疼，没办法跑步了')
        ]
    ]
    // 接下来我们只需要去便利map找到条件成立的对象去执行即可
    const targer = map.find(i => i[0]())
    // 判断一下有没有找到
    if (targer) {
        targer[1]()
    } else {
        console.log('赛道被炸了，都没办法跑步了') // 指所有的条件都不满足
    }
}
run('张三')

到这里就结束了，感谢大家的观看，谢谢～