JavaScript If-Else 和 If-Then – JS 条件从句

原文： JavaScript If-Else and If-Then – JS Conditional Statements

有的时候，你会想写一些命令来处理你代码中的不同决定。

例如，如果你正在编写一个机器人，你可以让它根据它收到的一组命令来回应不同的信息。

在这篇文章中，我将解释什么是 if...else 语句，并提供代码实例。我们还将看看条件（三元）运算符，你可以用它来作为 if...else 语句的简写。

JavaScript 中的 if...else 语句是什么

if...else 是一种条件语句，当 if 语句中的条件是真实的，它将执行一个代码块。如果条件是假的，那么 else 块将被执行。

在 if 语句中，真值和假值被转换为 true 或 false。

if (condition is true) {
   // 执行代码
} else {
   // 执行代码
}

在 JavaScript 中，任何没有被定义为假值的值都会被认为是真值。

下面是一个假值的列表：

• false
• 0（零）
• -0（负零）
• 0n（BigInt 零）
• ""、''、``(空字符串)
• null（空）
• undefined（未定义）
• NaN（不是一个数字）

JavaScript 中 if...else 语句的例子

在这个例子中，if 语句的条件是真的，所以打印到控制台的信息将是 “Nick is an adult.”。

const age = 18;

if (age >= 18) {
  console.log("Nick is an adult.");
} else {
  console.log("Nick is a child.");
}

但是，如果我把 age 变量改为小于 18 岁，那么条件将是假的，代码将执行 else 块。

const age = 12;

if (age >= 18) {
  console.log("Nick is an adult.");
} else {
  console.log("Nick is a child.");
}

JavaScript 中多个条件（if...else if...else 语句）的例子

有的时候，你想测试多个条件。这就是 else if 块出现的地方。

if (condition 1 is true) {
   // 执行代码
} else if (condition 2 is true) {
  // 执行代码
} else {
   // 执行代码
}

当 if 语句为假时，计算机将转入 else if 语句。如果该语句也是假的，那么它将进入 else 块。

在这个例子中，else if 块将被执行，因为 Alice 的年龄在 18 至 21 岁之间。

const age = 18;

if (age < 18) {
  console.log("Alice is under 18 years old.");
} else if (age >= 18 && age <= 21) {
  console.log("Alice is between the ages of 18 and 21.");
} else {
  console.log("Alice is over 21 years old.");
}

什么时候使用 switch 语句而不是 if...else 语句

在 JavaScript 中，有些时候你可以考虑使用 switch 语句而不是 if else 语句。

switch 语句比复杂的 if else 语句有更简洁的语法。

看看下面的例子——与其使用这个长的 if else 语句，不如选择一个更容易阅读的 switch 语句。

const pet = "dog";

if (pet === "lizard") {
  console.log("I own a lizard");
} else if (pet === "dog") {
  console.log("I own a dog");
} else if (pet === "cat") {
  console.log("I own a cat");
} else if (pet === "snake") {
  console.log("I own a snake");
} else if (pet === "parrot") {
  console.log("I own a parrot");
} else {
  console.log("I don't own a pet");
}

const pet = "dog";
 
switch (pet) {
  case "lizard":
    console.log("I own a lizard");
    break;
  case "dog":
    console.log("I own a dog");
    break;
  case "cat":
    console.log("I own a cat");
    break;
  case "snake":
    console.log("I own a snake");
    break;
  case "parrot":
    console.log("I own a parrot");
    break;
  default:
    console.log("I don't own a pet");
    break;
}

switch 语句不会在所有情况下都适合使用。但如果你觉得 if else 语句又长又复杂，那么 switch 语句可以作为一种替代选择。

JavaScript 中的逻辑 AND（&&）运算符和 if...else 语句

在逻辑 AND（&&）运算符中，如果两个条件都是真的，那么 if 块将被执行。如果一个或两个条件都是假的，那么 else 块将被执行。

在这个例子中，由于年龄大于 16，并且 ownsCar 变量为真，if 块将被运行，打印到控制台的信息将是 “Jerry is old enough to drive and has his own car.”。

const age = 17;
const ownsCar = true;

if (age >= 16 && ownsCar) {
  console.log("Jerry is old enough to drive and has his own car.");
} else {
  console.log("Jerry does not drive.");
}

如果我把 age 变量改为小于 16 岁，那么这两个条件就不再是 true，而会执行 else 块。

const age = 13;
const ownsCar = true;

if (age >= 16 && ownsCar) {
  console.log("Jerry is old enough to drive and has his own car.");
} else {
  console.log("Jerry does not drive.");
}

JavaScript 中的逻辑 OR（||）运算符和 if...else 语句

在逻辑 OR（||）运算符中，如果一个或两个条件为真，那么 if 语句中的代码将被执行。

在这个例子中，即使 isSale 变量被设置为 false，`if` 块中的代码仍然会执行，因为 boyfriendIsPaying 变量被设置为 true。

const boyfriendIsPaying = true;
const isSale = false;

if (boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}

如果我把 boyfriendIsPaying 变量的值改为 false，那么 else 块将执行，因为两个条件都是 false。

const boyfriendIsPaying = false;
const isSale = false;

if (boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}

逻辑 NOT（!）运算符和 JavaScript 中的 if...else 语句

逻辑 NOT（!）操作符可以将真的东西变成假的，它也会将假的东西变成真的。

我们可以修改前面的例子，使用 ! 操作符使 boyfriendIsPaying 变量为假。因为两个条件都是假的，所以将执行 else 块。

const boyfriendIsPaying = true;
const isSale = false;

if (!boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}

JavaScript 中的条件（三元）运算符

如果你有一个简短的 if else 语句，那么你可以选择使用三元运算符。三元这个词的意思是由三部分组成的东西。

这就是三元运算符的基本语法：

condition ? if condition is true : if condition is false

条件在 ? 标记之前，如果它是真的，那么 ? 标记和 : 之间的代码将被执行。如果条件是假的，那么 : 后面的代码将被执行。

在这个例子中，由于年龄大于 18 岁，那么发送到控制台的信息将是 “Can vote”。

const age = 32;
const citizen = age >= 18 ? "Can vote" : "Cannot vote";
console.log(citizen);

这就是使用 if else 语句的代码的样子：

const age = 32;
let citizen;

if (age >= 18) {
  citizen = "Can vote";
} else {
  citizen = "Cannot vote";
}

console.log(citizen);

总结

当 if 语句中的条件是真的，if else 语句将执行一个代码块。如果条件是假的，那么 else 块将被执行。

有的时候，你想测试多个条件，你可以使用 if...else 语句。

如果你觉得 if else 语句又长又复杂，那么 switch 语句可以是一个替代选项。

使用逻辑运算符来测试多个条件可以取代嵌套的 if else 语句。

三元运算符可以用来为一个简单的 if else 语句编写更短的代码。