JS 中的三元运算符：你需要知道的一切

什么是三元？

三元运算符是一种 JavaScript 运算符，自 2015 年 7 月起可在各种浏览器中使用。它是 `if/else` 语句的简写替代。该运算符广泛用于 Java、C、Python 等不同编程语言，但本文将重点介绍 JavaScript。

让我们来看看三元运算符的一般语法。

condition ? ifTrue : ifFalse

从上面的例子中可以看出，三元运算符用 `?` 和 `:` 符号替换了 if 和 else 语句。将检查问号左侧的 `condition`。如果为真，则执行 `?` 和 `:` 标记之间的第一个表达式。如果为假，则执行 `:` 符号后面的最后一个表达式。

它是如何工作的？

为了理解三元运算符的工作原理，让我们将其与常规 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 
{name} ✅
;
}
return 
{name}
;

这是相同的语句，但使用三元运算符。

return (
  

    {isPacked ? name + ' ✅' : name}
  
);

如您所见，它看起来好多了。因此，有时使用三元运算符编写语句是一种更干净、更好的方法，尤其是在使用 React 时。但在某些情况下，三元运算符会使代码更难阅读。

您认为在哪些其他情况下我们必须使用或避免使用三元运算符？请在评论中告诉我您的想法！

感谢您的阅读。

请查看这些链接以了解更多信息。