关于前端:JavaScript-Weekly-570重新思考三元运算符

🥳 欢送有趣味的小伙伴，一起做点有意义的事！

我发动了一个 周刊翻译打算，仓库地址，拜访地址

当初还很缺气味相投的小伙伴，纯属个人兴趣，当然对于晋升英语和前端技能也会有帮忙，要求：英语不要差的离谱、github 纯熟应用、有恒心、虚心、对本人做的事负责。

想参加的小伙伴，能够 wx 私信，也能够给仓库发 issue 留言，我博客也有具体的集体联系方式：daodaolee.cn

前言

咱们都心愿编写的代码既清晰又简洁，然而有时候咱们只能二选一：要么清晰，要么简洁。更少的代码行意味着暗藏的谬误更少，然而清晰、可读的代码更容易保护和批改。总的来说，传统思路通知咱们，清晰胜过简洁 。如果您必须在可读性和简洁性之间做出抉择，请抉择 可读性。

因而，许多人对三元运算符持狐疑态度不是没有情理的。当然，它比 if 语句更简洁，然而把三元写成屎山也是很容易的。所以解决问题的时候要小心一点。我个别更喜爱 if 语句，只管他在可读性方面有点小问题。

三元的复杂度

那为什么有的开发者会狐疑三元运算符？让咱们认真看看其中的一些。

怪异

人们不喜爱三元运算符的起因之一是它们太怪异了。JavaScript 有很多二元运算符—作用于两个表达式的运算符。这里提一下算术运算符，例如 +、-、* 和 /，以及像 &&、|| 这样的布尔运算符和 ===，总共至多有 28 个二元运算符（这取决于以后的的 ECMAScript 版本）。它们用起来很直观：左侧的表达式、运算符符号和右侧的表达式。

一元运算符比拟少，但它们也没有那么怪异。这里提一下否定运算符：!。你可能也应用过一元模式的 + 和 -，例如 -1。大多数状况下，它们对符号右侧的表达式进行操作，而且应用更不便。

三元运算符，顾名思义，它对三个表达式进行操作。因而，咱们应用两个符号来编写它：? 和 :。不然，咱们无奈分辨两头表达式的开始和完结地位。所以写法就是这个样子：

(/* First expression*/) ? (/* Second expression */) : (/* Third expression */)

实在场景里，是这样子：

const protocol = (request.secure) ? 'https' : 'http';

如果第一个表达式是“truthy”，则三元解析为第二个表达式的值，否则它将解析为第三个表达式的值。

但这并不是它惟一的怪异之处。大多数二元运算符具备统一的类型：算术运算符解决数字，布尔运算符实用于布尔值，位运算符同样实用于数字。对于这些，两边的类型是雷同的。然而三元运算符有奇怪的类型：应用三元运算符，第二个和第三个表达式能够是任何类型，然而 解释器总是将第一个转换为布尔值。对于开发者而言，这就很怪异。

对初学者不敌对

与 if 语句不同的是，很难将三元语句解读为伪语法。例如，假如咱们有一个像这样的 if 语句：

if (someCondition) {takeAction();
} else {someOtherAction();
}

如果 someCondition 是 true，则调用函数 takeAction，否则调用函数 someOtherAction。相比拟，三元的特点不是很显著。三元运算符尽管由神秘符号组成，然而读起来不像失常的英文语法。对于初学者，可能会有点头疼。

不宜读

即便您不是初学者，三元组也很难浏览。特地是三元括号长表达式：

const ten = Ratio.fromPair(10, 1);
const maxYVal = Ratio.fromNumber(Math.max(...yValues));
const minYVal = Ratio.fromNumber(Math.min(...yValues));
const yAxisRange = (!maxYVal.minus(minYVal).isZero()) ? ten.pow(maxYVal.minus(minYVal).floorLog10()) : ten.pow(maxYVal.plus(maxYVal.isZero() ? Ratio.one : maxYVal).floorLog10());

是不是很难看懂产生了什么。三元组中的每个表达式至多有两个链接的办法调用。更不用说嵌套在最终表达式中的另一个三元组了。我很不倡议你写这样的代码！

当然，咱们能够通过增加空格和换行符使其略微好一点：

const ten        = Ratio.fromPair(10, 1);
const maxYVal    = Ratio.fromNumber(Math.max(...yValues));
const minYVal    = Ratio.fromNumber(Math.min(...yValues));
const yAxisRange = !maxYVal.minus(minYVal).isZero()
                 ? ten.pow(maxYVal.minus(minYVal).floorLog10())
                 : ten.pow(maxYVal.plus(maxYVal.isZero() ? Ratio.one : maxYVal).floorLog10());

正如马丁福勒所说：任何傻瓜都能够编写计算机能够了解的代码，只有优良的程序员才会编写人类能够了解的代码。

if 真的好么

三元组有本人的毛病，不过还是有点益处的：

1. 个别应用三元最大的起因是简洁
2. if 语句在三元的地位上也同样实用

当然它们还是有很大的不同，来看两段代码：

// if 语句
let result;
if (someCondition) {result = calculationA();
} else {result = calculationB();
}

// 三元
const result = (someCondition) ? calculationA() : calculationB();

从某种角度来说，两段代码是等价的。在这两段代码的开端，一个 result 变量将被设置为一个值：calculationA() 或者 calculationB() 的返回值。但从另一种角度看，这两个例子是齐全不同的：if 是一个语句，而三元是一个表达式，换句话说：表达式总是会计算出某个值，它是一个独自的代码块，而申明不是。

这是一个重要的概念。表达式的计算结果为一个值，而申明不能将语句的后果调配给变量，也不能将语句的后果作为函数参数传递。if 是一个语句，不是一个表达式。

在某种程度上，这是函数式编程的核心思想。为了防止代码无形中产生的小问题，会用语句来防止一些问题。能够的话，我更喜爱应用纯函数。如果一个函数是纯函数，晓得它除了进行逻辑解决并返回一个值之外什么都不做就能够了。

再来看这段代码：

if (someCondition) {takeAction();
} else {someOtherAction();
}

takeAction 和 someOtherAction 都没有返回值，并且会跳出以后块，那它们会不会造成肯定的隐患？

再来看三元运算符

咱们喜爱表达式，因为表达式比语句更能组合。咱们能够用运算符和函数把简略表达式构建进去简单表达式。例如，咱们能够应用连贯运算符构建简单的字符串：

('<h1>' + page.title + '</h1>');

咱们能够将这个表达式作为函数参数传递。或者咱们能够应用更多的运算符将它与其余表达式联合起来，组合表达式是编写代码的绝佳形式。

比方 if 语句和 for 循环，他们自身没有任何关系，然而他们能够随便嵌套。

表达式更像是乐高积木。它们的创作形式是无限的，顶部的小块与砖底部的缝隙相连。然而一旦退出，砖块就会造成新的形态。并且该形态能够与具备雷同配置的任何其余形态调换。思考下图。咱们有两个相连的形态。尽管形态由不同的块组成，但最终的形态是雷同的。换句话说，它们是能够调换的。同样，表达式能够与其计算的后果调换。如何计算并不重要，重要的是后果：

如何抉择

我能给出的倡议就是，思考团队的开发标准、编码格调和效率，衡量好可能会造成的问题(比方代码块，作用域等)。

说点别的

return

我倡议在 if 语句里增加 return：

if (someCondition) {return resultOfMyCalculation();
}

return 会将函数调用解析为一个值，函数调用当成表达式。这样就会像变量赋值一样了。

三元优化

如果你的三元很长，特地倡议做拆分解决：

const ten     = Ratio.fromPair(10, 1);
const maxYVal = Ratio.fromNumber(Math.max(...yValues));
const minYVal = Ratio.fromNumber(Math.min(...yValues));

// 创立四个变量
const rangeEmpty = maxYVal.minus(minYVal).isZero();
const roundRange = ten.pow(maxYVal.minus(minYVal).floorLog10());
const zeroRange  = maxYVal.isZero() ? Ratio.one : maxYVal;
const defaultRng = ten.pow(maxYVal.plus(zeroRange).floorLog10());

// 组合起来
const yAxisRange = !rangeEmpty ? roundRange : defaultRng;

如果感觉这样造成了更多的变量申明，那能够这样：

const ten     = Ratio.fromPair(10, 1);
const maxYVal = Ratio.fromNumber(Math.max(...yValues));
const minYVal = Ratio.fromNumber(Math.min(...yValues));

// 创立两个函数
const rangeEmpty = maxYVal.minus(minYVal).isZero();
const roundRange = () => ten.pow(maxYVal.minus(minYVal).floorLog10());
const defaultRng = () => {const zeroRange  = maxYVal.isZero() ? Ratio.one : maxYVal;
    return ten.pow(maxYVal.plus(zeroRange).floorLog10());
};

// 组合起来
const yAxisRange = !rangeEmpty ? roundRange() : defaultRng();

不过说实话，太多的三元嵌套的我更倡议应用 switch-case

相干链接

原文链接

翻译打算原文