什么是三元？
三元运算符是一个 Javascript 运算符，自 2015 年 7 月起可跨浏览器使用。它是 if/else 语句的简写替代方案。该运算符广泛应用于 java、c、python 等不同的编程语言中，但本文的重点将放在 JavaScript 上。
让我们看看三元运算符的一般语法。
condition ? iftrue : iffalse
从上面的示例中可以看到，三元运算符相应地替换了 if 和 else 语句，用 ?和 : 符号。将检查问号左侧的条件。如果为 true，则第一个表达式位于 ? 之间并且 : 标记将被执行。如果为 false，则执行 : 符号后面的最后一个表达式。
它是如何运作的？
为了理解三元运算符的工作原理，我们将其与常规 if/else 语句进行比较。
下面的 javascript 代码将有条件地将字符串记录到控制台。
let a = 10 if(a == 10){ console.log("variable is ten!") }else{ console.log("variable is not ten!") }
现在，让我们使用三元运算符重写此代码。
let a = 10 a == 10 ? console.log("variable is ten!") : console.log("variable is not ten!")
此代码块中的三元运算符按照我们想要的方式有条件地记录字符串。但是这个语句还有更好的写法。
三元运算符不仅执行表达式，还返回值。因此，我们可以用一种处理同一个 console.log 语句中两个不同值的方式来编写该语句，而不是使用运算符来处理两个不同的 console.log 表达式。
例如：
let a = 10 console.log(a == 10 ? "variable is ten!" : "variable is not ten!")
这行的输出将与我们之前编写的其他三元表达式完全相同。但这段代码更加紧凑，易于阅读。
我们可以使用三元运算符有条件地为变量赋值。让我们看一个包含常规 if/else 语句的示例，然后使用三元再次编写它。
let a = 10 let b if(a === 10){ b = a * 5 }else{ b = a * 2 }
如果 a 是 10，则代码块会将其乘以 5，否则会将变量乘以 2，并且在这两种情况下，都会将其分配给 b。
使用三元运算符的替代方案如下所示：
let a = 10 let b = a === 10 ? a * 5 : a * 2
如您所见，为这样的基本操作编写单行代码会更方便。
嵌套条件
有时我们必须在彼此内部使用多个 if/else 条件。三元运算符可用于链接条件。
let a = 5 if(a === 1){ console.log("1") }else if(a === 2){ console.log("2") }else{ console.log("a is not 1 or 2") }
上面显示的条件链可以使用三元运算符表示，如下所示：
let a = 5 console.log(a === 1 ? "1" : a === 2 ? "2" : "a is not 1 or 2")
正如你所预料的那样，这很容易变得非常混乱。这就是为什么不需要在复杂的条件语句中使用三元运算符。
react 中的三元
如果您之前构建过 react 应用程序，您可能知道条件渲染是一个重要的主题。三元运算符使这个操作变得更容易。让我们看一下 react 官方页面的示例。
这是编写声明的常规方式：
if (ispacked) { return <li classname="item">{name} ✅</li>; } return <li classname="item">{name}</li>;
这是相同的语句，但使用三元运算符。
return ( <li className="item"> {isPacked ? name + ' ✅' : name} </li> );
正如你所看到的，它看起来好多了。因此，有时使用三元编写语句是更干净、更好的方法，尤其是在使用 react 时。但在某些情况下，三元运算符会使代码更难阅读。
您认为在哪些其他情况下我们必须使用或避免三元运算符？请在评论中让我知道您的想法！
感谢您的阅读。
请查看这些链接以进一步阅读。
- 有关三元运算符的更多信息：条件（三元）运算符 – mdn web 文档
- 有关 react 中条件渲染的更多信息：条件渲染 – react
