深入浅出代码优化﹣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
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
