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

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

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 += nif (n === 1) return sumelse return increment(n - 1)
}

使用三元运算符实现

let sum = 0;
function increment (n) {sum += nreturn 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 = "星期日"breakcase 1: result = "星期一"breakcase 2: result = "星期二"breakcase 3: result = "星期三"breakcase 4: result = "星期四"breakcase 5: result = "星期五"breakcase 6: result = "星期六"breakdefault: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代码优化一》分享就已经结束了，如果感觉还不错记得点赞收藏。你还知道哪些代码优化的方案呢？那就写出来把。