【JS代码优化一】分支优化篇

序：如何让代码看起来更优雅？代码是由文字堆叠起来的可以被机器执行的程序。它记载着相关信息（状态）、表达相关的情绪（函数），所以如何能够写出简洁、优雅、健壮、可维护性强的程序至关重要。本系列笔记的目的，就是带着大家如何实现更有效、更优雅的编程。笔记涵盖：运算符、流程语句、设计模式、ES6 新增方法等多个方面。

JavaScript 基础到高级
Canvas游戏开发
原生JavaScipt案例合集
JavaScript +DOM基础

1. 逻辑或运算符 ||

逻辑或运算符，也叫短路运算符。当 || 运算符左边的值为 true 时，则返回左边表达式的值，反之则返回右边表达式的值。如下：

true || false   // true
false || true   // true
10 > 20 || "Hello"  // "Hello"
"" || 0   // 0
undefined || null   // null

上面代码是逻辑或最常用的场景，其实基于上面的场景，可以来优化大家经常写的 if…else 代码，如下：

let result
if (a) {
	result = a
} else {
	result = b
}

很简单的一段代码，但是使用短路运算符要简洁的多，如下：

let result = a || b

看到这里，是不是有一种 “柳暗花明又一村” 的感觉，那就让我们接着往下看吧。

2. 三元运算符 ? :

提到 if…else 优化，就不得不说一下三元运算符了。这个运算符在替换条件语句的时候也是很好用的。但是注意不要嵌套太多层哦！毕竟嵌套多了，可读性就不强了，也就背离了我们代码优化的目的。

语法格式：

条件表达式 ? 条件表达式成立的值 : 条件表达式不成立的值

这样上面的 if 语句，使用三元运算符表示如下：

let result = a ? a : b

当然，写到这里，见多识广的你可能会想到上面的语句还能再一步优化，这里先卖个关子，大家可以在后面的案例中查找彩蛋。

三元表达式在诸如：条件判断、条件赋值、递归等场景应用也是比较多的。如下，实现一个累加函数：
使用条件语句实现

let sum = 0;
function increment (n) {
	sum += n
	if (n === 1) 
		return sum
	else 
		return increment(n - 1)
}

使用三元运算符实现

let sum = 0;
function increment (n) {
	sum += n
	return n >= 2 ? increment(n - 1) : sum
}

3. 对象/数组配置

对于条件复杂的多重判断，三元运算符可读性不强，条件语句和选择语句可以实现，但是写起来很麻烦，代码变得很臃肿。如下：
条件语句实现：

let dayNum = 1
let getWeekDay = (dayNum) => {
	if (dayNum === 7) {
	    return "星期日"
	} else if (dayNum === 1) {
	    return "星期一"
	} else if (dayNum === 2) {
	    return "星期二"
	} else if (dayNum === 3) {
	    return "星期三"
	} else if (dayNum === 4) {
	    return "星期四"
	} else if (dayNum === 5) {
	    return "星期五"
	} else if (dayNum === 6) {
	    return "星期六"
	} else {
	    return "不是合法的值"
	}
}

选择语句实现：

let result;
switch (dayNum) {
    case 0: 
        result = "星期日"
        break
    case 1: 
        result = "星期一"
        break
    case 2: 
        result = "星期二"
        break
    case 3: 
        result = "星期三"
        break
    case 4: 
        result = "星期四"
        break
    case 5: 
        result = "星期五"
        break
    case 6: 
        result = "星期六"
        break
    default:
        result = "不是合法的值"
        break
}
return result;

看到这里，你应该已经不想看了，不禁吐槽：这也太麻烦了吧！是的，所以我们想办法优化他吧，比方把相关的数据封装到数组或者对象中，然后取对应的值呢？
数组方式实现：

let days = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"]
let result = days[dayNum] ?? "不是合法的值"

对象方式实现：

let days = {
    0: "星期日",
    1: "星期一",
    2: "星期二",
    3: "星期三",
    4: "星期四",
    5: "星期五",
    6: "星期六",
}
let result = days[dayNum] ?? "不是合法的值"

这样的代码，在你看来是不是有一种“神清气爽”的感觉。ES6 中新增 Map 对象，我们同样可以使用 Map 来实现上面的功能，原理都是一样的。

let days = new Map([
    [0, "星期日"],
    [1, "星期一"],
    [2, "星期二"],
    [3, "星期三"],
    [4, "星期四"],
    [5, "星期五"],
    [6, "星期六"]
])
let result = days.get(dayNum) || "不是合法的值"

4. 复杂条件分支优化

上面所列举的都是一些比较简单直接的判断条件，如果判断条件过于复杂，那么我们应该如何去处理呢？先看下面这段改造代码：

let days = {
   0: () => "星期日",
   1: () => "星期一",
   2: () => "星期二",
   3: () => "星期三",
   4: () => "星期四",
   5: () => "星期五",
   6: () => "星期六",
}
let result = days[dayNum] ? days[dayNum]() : "不是合法的值"

看过上面的代码，你可能会说这不还是 key-value 形式吗，无非就是多了一步，需要执行函数才能获得对应的值。没错，但是这样的好处是，你可以在对应的函数中执行任何你想实现的逻辑，相对更加灵活一些。
那么，回过头了，我们继续说复杂条件分支的优化问题，如下：

let score = 98;
let getResult = (score) => {
    if (score <= 100 && score >= 90) {
        return "优秀"
    } else if (score < 90 && score >= 80) {
        return "良好"
    } else if (score < 80 && score >= 70) {
        return "中等"
    } else if (score < 70 && score >= 60) {
        return "及格"
    } else if (score < 60 && score >= 0) {
        return "不及格"
    } else {
        return "非法字符"
    }
}

很明显，上面判断的条件表达式不再是简单的等值判断了，像这种情况，我们依旧可以按照上面的思想进行优化改造。可以考虑使用二维数组实现。

二维数组方式：

let scores = [
    [(score) => score <= 100 && score >= 90, () => "优秀"],
    [(score) => score <= 90 && score >= 80, () => "良好"],
    [(score) => score <= 80 && score >= 70, () => "中等"],
    [(score) => score <= 70 && score >= 60, () => "及格"],
    [(score) => score <= 60 && score >= 0, () => "不及格"]
]
let getResult = (score) => {
    // 判断符合条件的子数组
    let obj = scores.find(v => v[0](score))
    // 子数组存在，则运行数组中第二个函数元素，否则返回其它信息
    let result = obj ? obj[1]() : "非法字符"
    return result;
}

这里注重的是最终得到的结果，而不是获得结果的过程。当今硬件性能过剩下情况下，我们通过这种更加优雅、简洁、可维护性的方式来获取最终想要的结果，显然是更可取的。

你要记住：优雅永不过时,浪漫至死不渝。

好了，到这里《JS代码优化一》分享就已经结束了，如果感觉还不错记得点赞收藏。你还知道哪些代码优化的方案呢？那就写出来把。