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

前端知识分享喵

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

逻辑或运算符 ||

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

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

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

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

三元运算符 ? :

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

语法格式：

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

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

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

使用条件语句实现

使用三元运算符实现

对象/数组配置

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

条件语句实现：

选择语句实现：

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

数组方式实现：

对象方式实现：

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

复杂条件分支优化

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

看过上面的代码，你可能会说这不还是 `key-value` 形式吗，无非就是多了一步，需要执行函数才能获得对应的值。没错，但是这样的好处是，你可以在对应的函数中执行任何你想实现的逻辑，相对更加灵活一些。

那么，回过头了，我们继续说复杂条件分支的优化问题，如下：

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

二维数组方式：

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