深入浅出代码优化﹣if/else

前言

对于代码裡面的 if else，我们可以使用逻辑判断式，或更好的三元判断式来优化代码。除了可以降低维护项目的成本之外，还可以提升代码可读性。就让我们从最简单的 if else 例子开始吧。

最简单的 if...else... 或者 switch 都是 JavaScript 的入门，我们这裡就简单说一下：

if (workIsDone === true){
  eatDinner();
} else {
  keepCoding();
}

表达式与陈述句

首先我们要了解什麽是表达式（Expressions），什麽是陈述句（Statements）。

表达式是任何句子用来给 JavaScript 引擎展开，并产生值。

例如，它可以是一个数字，数组，对象，正则表达式，赋值，函数。

陈述句这是任何句子用来给 JavaScript 引擎让某些事物发生，或者由副作用。

例如：条件命令式，变量，循环，返回，try/catch/finally。

条件和真假值

何为真？何为假？万物有所变，但 JavaScript 引擎却有所定义。

假

我们可以简单地用 A == false 来判断假的值。

'' 或 "" 或 ``
0 或 -0
null
undefined
NaN
false

值得注意的是，使用模板字符串而裡面没有填充任何值的话，也是会返回 false 的。

真

非假为真

如何优雅地写出条件判断式

还记得 De Morgan's Laws 吗？

我们可以用它来简化複杂的条件判断式：

!(A || B) === (!A && !B) // true
!(A && B) === (!A || !B) // true

实战部分

对于 Google Analytics（GA)，我们不希望把作者本人的数据，以及测试环境的数据也上传上去，以免干扰资料正确性。我们就可以问用户是否已经作者本人，以及是否在测试环境上，来判断是否需要寄送 Google Analytics 数据到 Google 服务器上。

假设两个函数已经写好了，比如说 isAuthor() 和 isTestingEnvironment()。只有在不是作者本人，或者当前环境不是测试环境，我们才寄送数据到 Google 服务器上。

const enableGA = !(isAuthor() || isTestingEnvironment());
const betterEnableGA = !isAuthor() && !isTestingEnvironment();

当然，更加好的写法是只有当用户不是作者本人，以及不在测试环境上，我们才寄送数据到 Google 服务器上。

const enableGA = isNotAuthor() && isNotTestingEnvironment();

优化 if else 的不同手段

以 && 取代单纯的 if 语句

if (user && user.canDeletePost) {
  deletePost();
}

以上的代码可以取代为：

user && user.canDeletePost && deletePost();

当然，如果你认为这样写的代码太长，会有副作用，那麽你可以简化为：

const userCanDeletePost = user && user.canDeletePost;
userCanDeletePost && deletePost();

以 || 取代 if else 语句

我们这裡会用一个判断用户密码长度的简单函数作为例子。如果你有更加好的代码片段，欢迎在底部的评论区留言。

let strength = null;
    
if (password.length > 7) {
  strength = 'Strong';
} else {
  strength = 'Weak';
}

以上的代码可以取代为：

const strength = (password.length > 7) && 'Strong' || 'Weak';

然而，使用 && 加 || 的组合会增加程序员阅读代码的思维层数，一种更加好的做法是使用三元运算符（ternary operator)。

值得注意的是，如果你的 && 之后的 A 是一个 falsy 的值，它永远不会返回，而是返回 B。

condition && A || B;
    
// 例如：
let password = 'abcdefg1234';
(password.length > 7) && false || 'Weak'; // 'Weak'

password = 'a';
(password.length > 7) && false || 'Weak'; // 'Weak'

我们可以使用三元运算符而不是逻辑运算符来更好地表达语句。

三元运算符

最简单的三元运算符会是，条件为真？返回 A，不然返回 B。

condition ? A : B;

针对以上的例子，判断密码长度的代码片段可以改为：

const strength = (password.length > 7) ? 'Strong' : 'Weak';

另外一个例子，就是在支持多浏览器的 AJAX 库裡面可以得出的代码片段：

let xmlhttp = null;
    
if (window.XMLHttpRequest) {
  // 現代瀏覽器
  xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
  // 舊 IE 版本 (IE <= 6)
  xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}

我们可以使用逻辑运算符来优化以上代码片段：

const xmlhttp = window.XMLHttpRequest && new XMLHttpRequest()
      || window.ActiveXObject && new ActiveXObject('Microsoft.XMLHTTP')
      || null;

或使用更加好的三元运算符来优化以上代码片段：

const xmlhttp = window.XMLHttpRequest
  ? new XMLHttpRequest()
  : window.ActiveXObject
    ? new ActiveXObject('Microsoft.XMLHTTP')
    : null;

值得注意的是，三元判断式是从右到左结合的：

// 這個判斷式
A ? B : C ? D : E ? F : G
    
// 等同以下判斷式
(A ? B : (C ? D : (E ? F : G))) // B

然而，你可能是想写：

(((A ? B : C) ? D : E )? F : G) // F

所以，记得自己加括号来控制代码如何结合解析。

后记

上个星期，组织举办了一场前端 Code Review 的大会，其中优化 if...else... 的手法，让我有所体悟。之后，我花了点时间研究逻辑判断式及三元判断式。希望能够达到知其然，知其所以然的阶段。

对于第一段代码，我们可以简化为以下代码：

workIsDone ? eatDinner() : keepCoding();

来自：https://calpa.me

链接: https://fly63.com/article/detial/1198