2022 年 12 月 7 日

条件分支：if、'?'

有时，我们需要根据不同的条件执行不同的操作。

为此，我们可以使用 if 语句和条件运算符 ?，它也称为“问号”运算符。

“if” 语句

if(...) 语句在括号中计算一个条件，如果结果为 true，则执行一个代码块。

例如

let year = prompt('In which year was ECMAScript-2015 specification published?', '');

if (year == 2015) alert( 'You are right!' );

在上面的示例中，条件是一个简单的相等性检查（year == 2015），但它可以复杂得多。

如果我们想要执行多个语句，我们必须将代码块包装在大括号中

          if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}
        

每次使用 if 语句时，我们都建议用大括号 {} 将代码块括起来，即使只有一个语句要执行。这样做可以提高可读性。

布尔转换

if (…) 语句会计算其括号中的表达式，并将结果转换为布尔值。

让我们回顾一下章节类型转换中的转换规则

数字 0、空字符串 ""、null、undefined 和 NaN 都将变为 false。因此，它们被称为“假值”。
其他值变为 true，因此它们被称为“真值”。

因此，此条件下的代码永远不会执行

          if (0) { // 0 is falsy
  ...
}
        

…而此条件内的代码始终会执行

          if (1) { // 1 is truthy
  ...
}
        

我们还可以像这样将预先计算的布尔值传递给 if

          let cond = (year == 2015); // equality evaluates to true or false

if (cond) {
  ...
}
        

“else” 子句

if 语句可能包含一个可选的 else 块。当条件为假值时，它会执行。

例如

let year = prompt('In which year was the ECMAScript-2015 specification published?', '');

if (year == 2015) {
  alert( 'You guessed it right!' );
} else {
  alert( 'How can you be so wrong?' ); // any value except 2015
}

多个条件：“else if”

有时，我们希望测试条件的多个变体。else if 子句允许我们这样做。

例如

let year = prompt('In which year was the ECMAScript-2015 specification published?', '');

if (year < 2015) {
  alert( 'Too early...' );
} else if (year > 2015) {
  alert( 'Too late' );
} else {
  alert( 'Exactly!' );
}

在上面的代码中，JavaScript 首先检查 year < 2015。如果为假值，它将转到下一个条件 year > 2015。如果这也为假值，它将显示最后一个 alert。

可以有更多 else if 块。最后的 else 是可选的。

条件运算符“?”

有时，我们需要根据条件分配变量。

例如

let accessAllowed;
let age = prompt('How old are you?', '');

if (age > 18) {
  accessAllowed = true;
} else {
  accessAllowed = false;
}

alert(accessAllowed);

所谓的“条件”或“问号”运算符允许我们以更短更简单的方式进行此操作。

运算符由问号 ? 表示。有时它被称为“三元”，因为该运算符有三个操作数。它实际上是 JavaScript 中唯一具有如此多操作数的运算符。

语法为

let result = condition ? value1 : value2;

计算 condition：如果为真值，则返回 value1，否则返回 value2。

例如

let accessAllowed = (age > 18) ? true : false;

从技术上讲，我们可以省略 age > 18 周围的括号。问号运算符的优先级较低，因此它在比较 > 后执行。

此示例将执行与前一个示例相同的操作

          // the comparison operator "age > 18" executes first anyway
// (no need to wrap it into parentheses)
let accessAllowed = age > 18 ? true : false;
        

但括号使代码更具可读性，因此我们建议使用它们。

在上面的示例中，你可以避免使用问号运算符，因为比较本身返回的是 true/false

          // the same
let accessAllowed = age > 18;
        

多个“？”

问号运算符 ? 的序列可以返回一个取决于多个条件的值。

例如

let age = prompt('age?', 18);

let message = (age < 3) ? 'Hi, baby!' :
  (age < 18) ? 'Hello!' :
  (age < 100) ? 'Greetings!' :
  'What an unusual age!';

alert( message );

一开始可能很难理解发生了什么。但仔细观察后，我们可以看到它只是一系列普通的测试

第一个问号检查 age < 3。
如果为真——它返回 'Hi, baby!'。否则，它继续执行冒号“:”之后的表达式，检查 age < 18。
如果为真——它返回 'Hello!'。否则，它继续执行下一个冒号“:”之后的表达式，检查 age < 100。
如果为真——它返回 'Greetings!'。否则，它继续执行最后一个冒号“:”之后的表达式，返回 'What an unusual age!'。

下面是使用 if..else 的样子

          if (age < 3) {
  message = 'Hi, baby!';
} else if (age < 18) {
  message = 'Hello!';
} else if (age < 100) {
  message = 'Greetings!';
} else {
  message = 'What an unusual age!';
}
        

“？”的非传统用法

有时问号 ? 被用作 if 的替代

let company = prompt('Which company created JavaScript?', '');

(company == 'Netscape') ?
   alert('Right!') : alert('Wrong.');

根据条件 company == 'Netscape'，? 之后的第一个或第二个表达式将被执行并显示一个警报。

我们在这里没有将结果分配给变量。相反，我们根据条件执行不同的代码。

不建议以这种方式使用问号运算符。

这种表示法比等效的 if 语句更短，这吸引了一些程序员。但它的可读性较差。

以下是使用 if 进行比较的相同代码

let company = prompt('Which company created JavaScript?', '');

if (company == 'Netscape') {
  alert('Right!');
} else {
  alert('Wrong.');
}

我们的眼睛垂直扫描代码。跨越多行的代码块比长而水平的指令集更容易理解。

问号运算符 ? 的目的是根据其条件返回一个值或另一个值。请仅将其用于此目的。当你需要执行不同的代码分支时，请使用 if。

任务

if（一个包含零的字符串）

alert 会显示吗？

          if ("0") {
  alert( 'Hello' );
}
        

是的，会显示。

除了空字符串（并且 "0" 不是空的）之外的任何字符串在逻辑上下文中都会变为 true。

我们可以运行并检查

if ("0") {
  alert( 'Hello' );
}

JavaScript 的名称

使用 if..else 结构，编写询问：“JavaScript 的“官方”名称是什么？”的代码

如果访问者输入“ECMAScript”，则输出“对！”，否则输出：“你不知道？ECMAScript！”

在新窗口中演示

<!DOCTYPE html>
<html>

<body>
  <script>
    'use strict';

    let value = prompt('What is the "official" name of JavaScript?', '');

    if (value == 'ECMAScript') {
      alert('Right!');
    } else {
      alert("You don't know? ECMAScript!");
    }
  </script>


</body>

</html>

显示符号

使用 if..else，编写通过 prompt 获取数字，然后在 alert 中显示的代码

1，如果值大于零，
-1，如果小于零，
0，如果等于零。

在此任务中，我们假设输入始终是一个数字。

在新窗口中演示

let value = prompt('Type a number', 0);

if (value > 0) {
  alert( 1 );
} else if (value < 0) {
  alert( -1 );
} else {
  alert( 0 );
}

将“if”重写为“？”

使用条件运算符 '?' 重写此 if

          let result;

if (a + b < 4) {
  result = 'Below';
} else {
  result = 'Over';
}
        

let result = (a + b < 4) ? 'Below' : 'Over';

将“if..else”重写为“？”

使用多个三元运算符 '?' 重写 if..else。

为了可读性，建议将代码拆分为多行。

          let message;

if (login == 'Employee') {
  message = 'Hello';
} else if (login == 'Director') {
  message = 'Greetings';
} else if (login == '') {
  message = 'No login';
} else {
  message = '';
}
        

          let message = (login == 'Employee') ? 'Hello' :
  (login == 'Director') ? 'Greetings' :
  (login == '') ? 'No login' :
  '';
        

教程地图

在评论之前阅读此内容…

章节

课程导航