如何在 JavaScript 中使用 if/else 语句的简写

在 JavaScript 中使用 if/else 语句的简写

How to use shorthand for if/else statement in JavaScript

使用三元运算符来使用 if/else 语句的简写。

三元运算符以一个条件开头，后跟一个问号?，然后是如果条件为真则返回的值、一个冒号:以及如果条件为假则返回的值。

const result1 = 10 > 5 ? 'yes' : 'no';
console.log(result1); // 👉️ 'yes'

const result2 = 10 > 100 ? 'yes' : 'no';
console.log(result2); // 👉️ 'no'

我们使用
三元运算符
作为 if/else 语句的简写。

:如果条件被评估为真值，则返回冒号之前的值
，否则返回冒号之后的值。

虚假值是：false, null, undefined, 0, ""（空字符串），
NaN（不是数字）。

所有其他值都是真实的。

考虑三元运算符的一种简单方法是：

• 冒号前的值是你的if块
• 冒号后的值是你的else块

在三元运算符中调用函数

这是一个更复杂的例子。

function sum(a, b) {
  return a + b;
}

const result = sum(10, 10) > 1 ? sum(5, 5) : sum(1, 1);

console.log(result); // 👉️ 10

我们可以使用表达式来计算三元运算符的返回值。

使用三元运算符插入字符串

一个非常常见的用例是在插入字符串时使用 if/else 速记。

const color = 'green';

const str = `color is ${color === 'blue' ? 'blue-100' : 'red-100'}`;

console.log(str); // 👉️ 'color is red-100'

在此示例中，我们在模板文字中使用了三元运算符。

美元符号和花括号${}标记一个被计算的表达式。

我们检查color变量是否等于blue，因为它不等于，所以冒号后的值从三元运算符返回并插值到字符串中。

使用三元运算符检查数组是否包含元素

三元运算符的另一个非常常见的用例是检查数组是否至少包含 1 个元素。

const result = [].length ? 'contains elements' : 'is empty';

console.log(result); // 👉️ is empty

我们访问length一个空数组上的属性，它返回0。

0是一个假值，所以冒号后的值从三元运算符返回。

使用嵌套的三元运算符

您可能会遇到嵌套的三元运算符，尽管嵌套的三元运算符的可读性不如多个 if/else 语句。

这是嵌套三元的示例。

const result = 1 + 1 === 2 ? (2 > 0 ? 'yes' : 'no') : 'idk';

console.log(result); // 👉️ yes

条件（在 之前?）得到评估并返回true。

然后评估冒号之前的部分 – 另一个三元组。

嵌套三元得到评估，它也返回true，因此返回冒号之前的嵌套三元部分。

我不是嵌套三元运算符的忠实拥护者，但是，有几个您可能需要它们的用例，例如在 React.js 组件中。

这是if/else上面示例中嵌套三元的实现。

let result;

if (1 + 1 === 2) {
  if (2 > 0) {
    result = 'yes';
  } else {
    result = 'no';
  }
} else {
  result = 'idk';
}

console.log(result); // 👉️ yes

嵌套if/else语句不那么简洁，但是，它们更具可读性。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：

• 使用JS计算数组中与条件匹配的元素
• 在 JavaScript 中使用多个条件过滤数组
• 在 JS 中查找第一个匹配条件的数组元素
• 在 JavaScript 中使用 querySelectorAll 的多个条件
• 在 JS 的 if 语句中指定多个条件