在任何的编程语言中，代码需要依靠不同的输入作出决定并且采取行动。例如，在游戏中，如果玩家的生命值变成了0，那么游戏就结束了。在天气应用中，如果在早晨运行，就显示一张日出的图片；如果在晚上，就显示星星和月亮的图片。在这篇文章中，我们将探索在JavaScript中所谓的条件语句是怎样工作的。

只需一个条件你就可以拥有……！

人类（以及其他的动物）无时无刻不在做决定，这些决定都影响着他们的生活，从小事（“我应该吃一片还是两片饼干”）到重要的大事（“我应该留在我的祖国，在我父亲的农场工作；还是应该去美国学习天体物理学”）。

条件语句结构允许我们来描述在JavaScript中这样的选择，从不得不作出的选择（例如：“一片还是两片”）到产生的结果或这些选择（也许是“吃一片饼干”可能会“仍然感觉饿”，或者是“吃两片饼干”可能会“感觉饱了，但妈妈会因为我吃掉了所有的饼干而骂我”。）

if ... else 语句

预备知识：	基本的计算机知识，对HTML和CSS有基本的了解，JavaScript的第一步。
目标：	了解怎样在JavaScript中使用条件语句的结构。

让我们看看到目前为止你将会在JavaScript中用到的最常见的条件语句类型 — if ... else语句。

基本的的 if…else 语法

这段代码真的非常易懂——它说“如果（if）条件（condition）返回true，运行代码A，否则（else）运行代码B”

注意：你不一定需要else和第二个花括号——下面的代码也是符合语法规则的：

不过，这里你需要注意——在这种情况下，第二段代码不被条件语句控制，所以它总会运行，不管条件返回的是true还是false。这不一定是一件坏事，但这可能不是你想要的——你经常只想要运行一段代码或者另一段，而不是两个都运行。

最后，有时候你可能会看到 if…else 语句没有写花括号，像下面的速记风格：

这是完全有效的代码，但不建议这样使用——因为如果有花括号进行代码切割的话，整体代码被切割为多行代码，更易读和易用。

一个真实的例子

为了更好的理解这种语法，让我们考虑一个真实的例子。想像一个孩子被他的父母要求帮助他们做家务。父母可能会说“嗨，宝贝儿，如果你帮我去购物，我会给你额外的零花钱，这样你就能买得起你想要的玩具了。”在JavaScript中，我们可以这样表示：

这段代码显示的结果是变量 shoppingDone 总是返回 false，意味着对我们的穷孩子来说很失望。如果孩子去购物的话，就需要依靠我们提供机制来使父母把变量 shoppingDone 变成 true。

else if

最后一个例子提供给我们两个选择或结果，但是如果我们想要两个以上呢？

有一种方法来让你的 if…else 连接你的额外的选择和结果——使用else if 。每一个额外的选择要求放到 if() { ... } 和 else { ... } 里——看看下面更多涉及到的例子，它们属于一个普通的天气预报的应用的一部分。

关于比较运算符

我们想特别提到测试布尔值（true / false），和一个通用模式，你会频繁遇到它，任何不是 false, undefined, null, 0, NaN 的值，或一个空字符串（''）在作为条件语句进行测试时实际返回true，因此您可以简单地使用变量名称来测试它是否为真，甚至是否存在（即它不是未定义的）。例如:

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

嵌套if ... else

将另一个if ... else 语句放在另一个中 - 嵌套它是完全可行的。例如，我们可以更新我们的天气预报应用程序，以显示更多的选择，具体取决于温度:

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

逻辑运算符：&& , || 和 !

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

举一个逻辑 && 的例子, 刚才的那段代码片段可以写成下面这样:

所以，只有当choice === 'sunny'并且temperature < 86都返回true时，第一个代码块才能运行。

最后一种类型的逻辑运算符, 逻辑非! 运算符表示, 可以用于对一个表达式取否. 让我们把 非运算符 结合上一个例子里的 或表达式 看看:

在这一段代码中，如果逻辑或所在的语句返回 true，则非运算符会将其取否，于是整个表达式的返回值将会是false。

您可以在任何结构中随意合并很多个逻辑表达式。接下来的例子将会只在或运算符两边的语句同时返回true时才会执行代码，这也就意味着整个与运算符语句将会返回true：

在条件语句中运用或逻辑运算符最常见的错误是尝试声明变量后，仅检查该变量一次的情况下赋予很多个都会返回true的值，不同的值之间用 || (或)运算符分隔。比如：

在这个例子里 if(...) 里的条件总为真，因为 7 (或者其它非零的数) 的值总是为真. 这个条件实际意思是 "如果x等于5, 或者7为真 — 它总是成立的". 这不是我们想要的逻辑，为了让它正常工作你必须指定每个或表达式两边都是完整的检查:

switch语句

if...else 语句能够很好地实现条件代码，但是它们不是没有缺点。它们主要适用于您只有几个选择的情况，每个都需要相当数量的代码来运行，和/或的条件很复杂的情况（例如多个逻辑运算符）。对于只想将变量设置一系列为特定值的选项或根据条件打印特定语句的情况，语法可能会很麻烦，特别是如果您有大量选择。

switch 语句在这里是您的朋友 - 他们以单个表达式/值作为输入，然后查看多个选项，直到找到与该值相匹配的选项，执行与之相关的代码。这里有一些伪代码，可以给你一点灵感：

switch语句示例

我们来看一个真实的例子 - 我们将重写天气预报应用程序，以改用switch语句：

三元运算符

在我们举一些例子之前，我们要介绍一下最后一句语法。三元或条件运算符是一个语法的小点，用于测试一个条件，并返回一个值/表达，如果它是true，另一个是false-这种情况下是有用的，并且可以占用比if...else块较少的代码块。如果你只有两个通过true/ false条件选择。伪代码看起来像这样：

在这里我们有一个变量叫做isBirthday- 如果它是true，我们给客人一个生日快乐的消息; 如果不是，我们给她标准的每日问候。

三元运算符示例

你不需要用三元运算符设置变量值; 你也可以运行任何你喜欢的函数或代码行。以下实例显示了一个简单的主题选择器，其中该站点的样式应用了三元运算符。

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

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

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

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

我们需要你在onchange处理函数中写一个条件语句，就在// ADD CONDITIONAL HERE任务的下面。这应该：

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

Playable code

<div class="output" style="height: 500px;overflow: auto;">
  <label for="month">Select month: </label>
  <select id="month">
    <option value="January">January</option>
    <option value="February">February</option>
    <option value="March">March</option>
    <option value="April">April</option>
    <option value="May">May</option>
    <option value="June">June</option>
    <option value="July">July</option>
    <option value="August">August</option>
    <option value="September">September</option>
    <option value="October">October</option>
    <option value="November">November</option>
    <option value="December">December</option>
  </select>

  <h1></h1>

  <ul></ul>
</div>

<hr>

<textarea id="code" class="playable-code" style="height: 500px;">
var select = document.querySelector('select');
var list = document.querySelector('ul');
var h1 = document.querySelector('h1');

select.onchange = function() {
  var choice = select.value;

  // ADD CONDITIONAL HERE

  createCalendar(days, choice);
}

function createCalendar(days, choice) {
  list.innerHTML = '';
  h1.textContent = choice;
  for (var i = 1; i <= days; i++) {
    var listItem = document.createElement('li');
    listItem.textContent = i;
    list.appendChild(listItem);
  }
}

createCalendar(31,'January');
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset">
  <input id="solution" type="button" value="Show solution">
</div>

.output * {
  box-sizing: border-box;
}

.output ul {
  padding-left: 0;
}

.output li {
  display: block;
  float: left;
  width: 25%;
  border: 2px solid white;
  padding: 5px;
  height: 40px;
  background-color: #4A2DB6;
  color: white;
}

var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var code = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  updateCode();
});

solution.addEventListener('click', function() {
  textarea.value = jsSolution;
  updateCode();
});

var jsSolution = 'var select = document.querySelector(\'select\');\nvar list = document.querySelector(\'ul\');\nvar h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n  var choice = select.value;\n  var days = 31;\n  if(choice === \'February\') {\n    days = 28;\n  } else if(choice === \'April\' || choice === \'June\' || choice === \'September\'|| choice === \'November\') {\n    days = 30;\n  }\n\n  createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n  list.innerHTML = \'\';\n  h1.textContent = choice;\n for(var i = 1; i <= days; i++) {\n    var listItem = document.createElement(\'li\');\n    listItem.textContent = i;\n    list.appendChild(listItem);\n  }\n }\n\ncreateCalendar(31,\'January\');';

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

主动学习：更多颜色选择！

在这个例子中，您将要采取我们前面看到的三元运算符示例，并将三元运算符转换为一个switch语句，这将允许我们对简单的网站应用更多的选择。看看<select>- 这次你会看到它不是两个主题选项，而是五个。您需要在// ADD SWITCH STATEMENT注释下面添加一个switch语句：

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

Playable code 2

<div class="output" style="height: 300px;">
  <label for="theme">Select theme: </label>
  <select id="theme">
    <option value="white">White</option>
    <option value="black">Black</option>
    <option value="purple">Purple</option>
    <option value="yellow">Yellow</option>
    <option value="psychedelic">Psychedelic</option>
  </select>

  <h1>This is my website</h1>
</div>

<hr>

<textarea id="code" class="playable-code" style="height: 450px;">
var select = document.querySelector('select');
var html = document.querySelector('.output');

select.onchange = function() {
  var choice = select.value;

  // ADD SWITCH STATEMENT
}

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

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset">
  <input id="solution" type="button" value="Show solution">
</div>

var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var code = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  updateCode();
});

solution.addEventListener('click', function() {
  textarea.value = jsSolution;
  updateCode();
});

var jsSolution = 'var select = document.querySelector(\'select\');\nvar html = document.querySelector(\'.output\');\n\nselect.onchange = function() {\n  var choice = select.value;\n\n  switch(choice) {\n    case \'black\':\n      update(\'black\',\'white\');\n      break;\n    case \'white\':\n      update(\'white\',\'black\');\n      break;\n    case \'purple\':\n      update(\'purple\',\'white\');\n      break;\n    case \'yellow\':\n      update(\'yellow\',\'darkgray\');\n      break;\n    case \'psychedelic\':\n      update(\'lime\',\'purple\');\n      break;\n  }\n}\n\nfunction update(bgColor, textColor) {\n  html.style.backgroundColor = bgColor;\n  html.style.color = textColor;\n}';

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

结论

这就是现在您真正需要了解的JavaScript中的条件结构！我相信你会理解这些概念，并轻松地通过这些例子; 如果有什么不明白的，请随时阅读文章，或者联系我们寻求帮助。

参见

{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}