JS 中的三元运算符：您需要了解的一切

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《JS 中的三元运算符：您需要了解的一切》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

什么是三元？

三元运算符是一个 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

理论要掌握，实操不能落！以上关于《JS 中的三元运算符：您需要了解的一切》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！