在代码中做决策 — 条件语句

在任何编程语言中，代码都需要根据不同的输入做出决策并相应地执行操作。例如，在游戏中，如果玩家的生命值为 0，则游戏结束。在天气应用程序中，如果是在早上查看，则显示日出图形；如果是在晚上，则显示星星和月亮。在本文中，我们将探讨所谓的条件语句在 JavaScript 中是如何工作的。

先决条件 对 HTML、CSS 和 JavaScript 入门 的基本了解。
目标 了解如何在 JavaScript 中使用条件结构。

你可以在一个条件下拥有它！

人类（和其他动物）一直在做出影响他们生活的决定，从小的（“我应该吃一个饼干还是两个？”）到大的（“我应该留在我的祖国并在父亲的农场工作，还是应该搬到美国学习天体物理学？”）

条件语句允许我们在 JavaScript 中表示这种决策过程，从必须做出的选择（例如，“一个饼干还是两个”），到这些选择的最终结果（也许“吃了 一个饼干”的结果可能是“仍然感到饥饿”，而“吃了两个饼干”的结果可能是“感到饱了，但妈妈因为我吃了所有的饼干而责怪我”。）

A cartoon character resembling a person holding a cookie jar labeled 'Cookies'. There is a question mark above the head of the character. There are two speech bubbles. The left speech bubble has one cookie. The right speech bubble has two cookies. Together it implies the character is trying to decide if it wants to one cookie or two cookies.

if...else 语句

让我们看看在 JavaScript 中你将使用的最常见的条件语句类型——不起眼的 if...else 语句。

基本的 if...else 语法

基本的 if...else 语法如下所示

js
if (condition) {
  /* code to run if condition is true */
} else {
  /* run some other code instead */
}

这里我们有

  1. 关键字 if 后跟一些括号。
  2. 要测试的条件，放在括号内（通常是“此值是否大于此其他值？”或“此值是否存在？”）。该条件使用了我们在上一模块中讨论过的 比较运算符 并返回 true 或 false。
  3. 一对花括号，在其中我们有一些代码——这可以是我们喜欢的任何代码，并且只有在条件返回 true 时才会运行。
  4. 关键字 else。
  5. 另一对花括号，在其中我们有更多代码——这可以是我们喜欢的任何代码，并且只有在条件不是 true 时才会运行——或者换句话说，条件为 false。

这段代码非常易于阅读——它表示“如果条件返回 true，则运行代码 A，否则运行代码 B”

您应该注意，您不必包含 else 和第二个花括号块——以下也是完全合法的代码

js
if (condition) {
  /* code to run if condition is true */
}

/* run some other code */

但是，您需要在这里小心——在这种情况下，第二个代码块不受条件语句控制，因此它始终运行，无论条件返回 true 还是 false。这并非一定是坏事，但它可能不是您想要的——通常您希望运行一个代码块或另一个代码块，而不是两者都运行。

最后一点，虽然不推荐，但您有时可能会看到 if...else 语句在没有花括号的情况下编写

js
if (condition) /* code to run if condition is true */
else /* run some other code instead */

此语法完全有效，但是如果您使用花括号来分隔代码块，并使用多行和缩进，则更容易理解代码。

一个真实的例子

为了更好地理解此语法，让我们考虑一个真实的例子。想象一个孩子被他们的母亲或父亲要求帮忙做家务。父母可能会说：“嘿，亲爱的！如果你帮我购物，我会给你一些额外的零花钱，这样你就可以买到你想要的那件玩具了。”在 JavaScript 中，我们可以这样表示

js
let shoppingDone = false;
let childsAllowance;

if (shoppingDone === true) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

如所示，此代码始终导致 shoppingDone 变量返回 false，这意味着我们可怜的孩子感到失望。我们需要提供一种机制，让父母在孩子购物后将 shoppingDone 变量设置为 true。

注意：您可以在 GitHub 上查看此示例的完整版本（也可以在 此处查看其运行情况）。

else if

最后一个示例为我们提供了两个选择或结果——但如果我们想要超过两个怎么办？

有一种方法可以将额外的选择/结果链接到您的 if...else——使用 else if。每个额外的选择都需要一个额外的块放在 if () { } 和 else { } 之间——查看以下更复杂的示例，它可能是简单天气预报应用程序的一部分

html
<label for="weather">Select the weather type today: </label>
<select id="weather">
  <option value="">--Make a choice--</option>
  <option value="sunny">Sunny</option>
  <option value="rainy">Rainy</option>
  <option value="snowing">Snowing</option>
  <option value="overcast">Overcast</option>
</select>

<p></p>
js
const select = document.querySelector("select");
const para = document.querySelector("p");

select.addEventListener("change", setWeather);

function setWeather() {
  const choice = select.value;

  if (choice === "sunny") {
    para.textContent =
      "It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.";
  } else if (choice === "rainy") {
    para.textContent =
      "Rain is falling outside; take a rain coat and an umbrella, and don't stay out for too long.";
  } else if (choice === "snowing") {
    para.textContent =
      "The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.";
  } else if (choice === "overcast") {
    para.textContent =
      "It isn't raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.";
  } else {
    para.textContent = "";
  }
}
  1. 这里我们有一个 HTML <select> 元素，允许我们做出不同的天气选择，以及一个简单的段落。
  2. 在 JavaScript 中，我们同时存储了对 <select> 和 <p> 元素的引用，并在 <select> 元素上添加了一个事件侦听器，以便当其值更改时，运行 setWeather() 函数。
  3. 当此函数运行时，我们首先将一个名为 choice 的变量设置为 <select> 元素中当前选择的值。然后，我们使用条件语句根据 choice 的值在段落中显示不同的文本。请注意，除了第一个条件在 if () { } 块中测试之外，所有其他条件都在 else if () { } 块中测试。
  4. else { } 块中的最后一个选择基本上是一个“最后手段”选项——如果没有任何条件为 true，则将运行其中的代码。在本例中，如果未选择任何内容，例如，如果用户决定重新选择开头显示的“--做出选择--”占位符选项，它用于清空段落中的文本。

注意：您也可以在 GitHub 上找到此示例（也可以在 此处查看其运行情况）。

关于比较运算符的说明

比较运算符用于测试条件语句中的条件。我们之前在 JavaScript 中的基本数学——数字和运算符 文章中首次介绍了比较运算符。我们的选择是

  • === 和 !==——测试一个值是否与另一个值相同或不相同。
  • < 和 >——测试一个值是否小于或大于另一个值。
  • <= 和 >=——测试一个值是否小于或等于，或大于或等于另一个值。

我们想特别提到测试布尔值 (true/false) 以及您会一遍又一遍遇到的常见模式。任何不是 false、undefined、null、0、NaN 或空字符串 ('') 的值在作为条件语句进行测试时实际上都会返回 true，因此您可以单独使用变量名来测试它是否为 true，甚至它是否存在（即它不是未定义的）。例如

js
let cheese = "Cheddar";

if (cheese) {
  console.log("Yay! Cheese available for making cheese on toast.");
} else {
  console.log("No cheese on toast for you today.");
}

并且，回到我们之前关于孩子为父母做家务的例子，你可以这样写

js
let shoppingDone = false;
let childsAllowance;

// We don't need to explicitly specify 'shoppingDone === true'
if (shoppingDone) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

嵌套 if...else

将一个 if...else 语句放在另一个语句中（嵌套它们）是完全可以的。例如，我们可以更新我们的天气预报应用程序，以根据温度显示另一组选择

js
if (choice === "sunny") {
  if (temperature < 86) {
    para.textContent = `It is ${temperature} degrees outside — nice and sunny. Let's go out to the beach, or the park, and get an ice cream.`;
  } else if (temperature >= 86) {
    para.textContent = `It is ${temperature} degrees outside — REALLY HOT! If you want to go outside, make sure to put some sunscreen on.`;
  }
}

即使代码全部一起工作，每个 if...else 语句也完全独立于另一个语句。

逻辑运算符：AND、OR 和 NOT

如果您想在不编写嵌套 if...else 语句的情况下测试多个条件，逻辑运算符 可以帮助您。当在条件中使用时，前两个执行以下操作

  • &&——AND；允许您将两个或多个表达式链接在一起，以便所有表达式都必须单独计算为 true，整个表达式才能返回 true。
  • ||——OR；允许您将两个或多个表达式链接在一起，以便其中一个或多个表达式必须单独计算为 true，整个表达式才能返回 true。

为了给您一个 AND 示例，前面的示例代码段可以重写为

js
if (choice === "sunny" && temperature < 86) {
  para.textContent = `It is ${temperature} degrees outside — nice and sunny. Let's go out to the beach, or the park, and get an ice cream.`;
} else if (choice === "sunny" && temperature >= 86) {
  para.textContent = `It is ${temperature} degrees outside — REALLY HOT! If you want to go outside, make sure to put some sunscreen on.`;
}

例如，只有当 choice === 'sunny'和temperature < 86 都返回 true 时，才会运行第一个代码块。

让我们看一个快速的 OR 示例

js
if (iceCreamVanOutside || houseStatus === "on fire") {
  console.log("You should leave the house quickly.");
} else {
  console.log("Probably should just stay in then.");
}

最后一种逻辑运算符 NOT，由 ! 运算符表示，可用于否定表达式。让我们在上面的示例中将其与 OR 结合起来

js
if (!(iceCreamVanOutside || houseStatus === "on fire")) {
  console.log("Probably should just stay in then.");
} else {
  console.log("You should leave the house quickly.");
}

在此代码段中，如果 OR 语句返回 true，则 NOT 运算符将对其取反，以便整个表达式返回 false。

您可以根据需要将任意多个逻辑语句组合在一起，并以任何结构组合。以下示例仅在两个 OR 语句都返回 true 时执行内部代码，这意味着整个 AND 语句将返回 true

js
if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === "Steve")) {
  // run the code
}

在条件语句中使用逻辑 OR 运算符时的一个常见错误是尝试声明一次要检查其值的变量，然后给出它可能返回 true 的值的列表，并用 || (OR) 运算符分隔。例如

js
if (x === 5 || 7 || 10 || 20) {
  // run my code
}

在这种情况下，if () 内的条件将始终计算为 true，因为 7（或任何其他非零值）始终计算为 true。此条件实际上表示“如果 x 等于 5，或者 7 为 true——它始终为 true”。从逻辑上讲，这不是我们想要的！要使此工作正常进行，您必须在每个 OR 运算符的两侧指定一个完整的测试

js
if (x === 5 || x === 7 || x === 10 || x === 20) {
  // run my code
}

switch 语句

if...else 语句可以很好地完成启用条件代码的任务，但它们并非没有缺点。它们主要适用于您有几个选择并且每个选择都需要运行相当数量的代码和/或条件很复杂（例如，多个逻辑运算符）的情况。对于您只想根据条件将变量设置为特定选择的值或打印特定语句的情况，语法可能有点繁琐，尤其是在您有很多选择的情况下。

在这种情况下，switch 语句 是您的朋友——它们将单个表达式/值作为输入，然后查看多个选择，直到找到与该值匹配的一个，并执行与其一起使用的相应代码。以下是一些伪代码，让您了解一下

js
switch (expression) {
  case choice1:
    // run this code
    break;

  case choice2:
    // run this code instead
    break;

  // include as many cases as you like

  default:
    // actually, just run this code
    break;
}

这里我们有

  1. 关键字 switch，后跟一组括号。
  2. 括号内的表达式或值。
  3. 关键字 case，后跟表达式/值可能具有的选择，后跟冒号。
  4. 如果选择与表达式匹配，则运行一些代码。
  5. break 语句，后跟分号。如果前面的选择与表达式/值匹配，则浏览器在此处停止执行代码块，并继续执行 switch 语句下方出现的任何代码。
  6. 尽可能多的其他情况（第 3-5 点）。

  7. 关键字default后跟着与其中一个 case（第 3-5 点）完全相同的代码模式，不同之处在于default后面没有选择项，并且您不需要break语句，因为无论如何代码块中后面都没有其他内容需要运行。这是在没有任何选择匹配的情况下运行的默认选项。

注意：您不必包含default部分——如果表达式不可能等于未知值，则可以安全地省略它。但是，如果存在这种可能性，则需要包含它来处理未知情况。

switch 示例

让我们来看一个真实的例子——我们将重写我们的天气预报应用程序以使用switch语句。

html
<label for="weather">Select the weather type today: </label>
<select id="weather">
  <option value="">--Make a choice--</option>
  <option value="sunny">Sunny</option>
  <option value="rainy">Rainy</option>
  <option value="snowing">Snowing</option>
  <option value="overcast">Overcast</option>
</select>

<p></p>
js
const select = document.querySelector("select");
const para = document.querySelector("p");

select.addEventListener("change", setWeather);

function setWeather() {
  const choice = select.value;

  switch (choice) {
    case "sunny":
      para.textContent =
        "It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.";
      break;
    case "rainy":
      para.textContent =
        "Rain is falling outside; take a rain coat and an umbrella, and don't stay out for too long.";
      break;
    case "snowing":
      para.textContent =
        "The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.";
      break;
    case "overcast":
      para.textContent =
        "It isn't raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.";
      break;
    default:
      para.textContent = "";
  }
}

注意：您也可以在GitHub 上找到此示例（也可以在此处查看其运行情况）。

三元运算符

在我们让您尝试一些示例之前，我们想向您介绍最后一个语法片段。三元运算符或条件运算符是一个小的语法片段，它测试一个条件，如果条件为true则返回一个值/表达式，如果为false则返回另一个值/表达式——这在某些情况下很有用，并且如果通过true/false条件在两个选择之间进行选择，则可以占用比if...else块少得多的代码。伪代码如下所示

js
condition ? run this code : run this code instead

所以让我们看一个简单的例子

js
const greeting = isBirthday
  ? "Happy birthday Mrs. Smith — we hope you have a great day!"
  : "Good morning Mrs. Smith.";

这里我们有一个名为isBirthday的变量——如果此变量为true，我们将向我们的客人发送生日快乐信息；如果不是，我们将向她发送标准的每日问候。

三元运算符示例

三元运算符不仅用于设置变量值；您还可以运行函数或代码行——任何您喜欢的操作。以下实时示例显示了一个简单的主题选择器，其中使用三元运算符应用网站的样式。

html
<label for="theme">Select theme: </label>
<select id="theme">
  <option value="white">White</option>
  <option value="black">Black</option>
</select>

<h1>This is my website</h1>
js
const select = document.querySelector("select");
const html = document.querySelector("html");
document.body.style.padding = "10px";

function update(bgColor, textColor) {
  html.style.backgroundColor = bgColor;
  html.style.color = textColor;
}

select.addEventListener("change", () =>
  select.value === "black"
    ? update("black", "white")
    : update("white", "black"),
);

这里我们有一个<select>元素来选择主题（黑色或白色），以及一个简单的h1来显示网站标题。我们还有一个名为update()的函数，它以两种颜色作为参数（输入）。网站的背景颜色设置为提供的第一个颜色，文本颜色设置为提供的第二个颜色。

最后，我们还有一个onchange事件监听器，用于运行包含三元运算符的函数。它以一个测试条件开头——select.value === 'black'。如果此条件返回true，我们将使用黑色和白色的参数运行update()函数，这意味着我们最终将获得黑色背景颜色和白色文本颜色。如果它返回false，我们将使用白色和黑色的参数运行update()函数，这意味着网站颜色将反转。

注意：您也可以在GitHub 上找到此示例（也可以在此处查看其运行情况）。

主动学习：一个简单的日历

在这个示例中，您将帮助我们完成一个简单的日历应用程序。在代码中，您有

  • 一个<select>元素，允许用户在不同的月份之间进行选择。
  • 一个onchange事件处理程序，用于检测<select>菜单中选择的值何时发生更改。
  • 一个名为createCalendar()的函数，用于绘制日历并在h1元素中显示正确的月份。

我们需要您在onchange处理程序函数内的// ADD CONDITIONAL HERE注释下方编写一个条件语句。它应该

  1. 查看选定的月份（存储在choice变量中。这将是值更改后<select>元素的值，例如“January”）。
  2. 将一个名为days的变量设置为等于所选月份的天数。为此，您必须查找一年中每个月的天数。出于本示例的目的，您可以忽略闰年。

提示

  • 建议您使用逻辑或将多个月组合到一个条件中；其中许多月份共享相同的天数。
  • 考虑一下哪种天数最常见，并将其用作默认值。

如果您犯了错误，您可以随时使用“重置”按钮重置示例。如果您真的卡住了，请按“显示解决方案”以查看解决方案。

主动学习：更多颜色选择

在本示例中，您将获取我们之前看到的那个三元运算符示例，并将三元运算符转换为switch语句，以便我们可以为简单网站应用更多选择。查看<select>——这次您会发现它有两个主题选项，而不是两个。您需要在// ADD SWITCH STATEMENT注释下方添加一个switch语句

  • 它应该接受choice变量作为其输入表达式。
  • 对于每个case，选择应该等于可以选择的一个可能的<option>值，即white、black、purple、yellow或psychedelic。请注意，选项值是小写的，而选项标签（如在实时输出中显示的那样）是大写的。您应该在代码中使用小写值。
  • 对于每个case，都应该运行update()函数，并传递两个颜色值，第一个用于背景颜色，第二个用于文本颜色。请记住，颜色值是字符串，因此需要用引号括起来。

如果您犯了错误，您可以随时使用“重置”按钮重置示例。如果您真的卡住了，请按“显示解决方案”以查看解决方案。

测试你的技能！

您已经到达本文的结尾，但您能记住最重要的信息吗？在继续之前，您可以找到一些进一步的测试来验证您是否保留了这些信息——请参阅测试您的技能：条件语句。

结论

这就是您现在需要了解的关于 JavaScript 中条件结构的所有内容！如果您有任何不明白的地方，请随时重新阅读本文，或联系我们寻求帮助。

另请参阅