8.8 KiB

Raw Permalink Blame History Unescape Escape

JavaScript 基础：做出决策

由 Tomomi Imura 绘制的速记笔记

课前测验

做出决策并控制代码运行的顺序可以让代码更具复用性和稳健性。本节将介绍在 JavaScript 中控制数据流的语法，以及它与布尔数据类型结合使用时的重要性。

🎥 点击上方图片观看关于做出决策的视频。

你可以在 Microsoft Learn 上学习本课程！

布尔值简要回顾

布尔值只有两个可能的值：true 或 false。布尔值帮助我们决定在满足某些条件时应该运行哪些代码行。

可以像这样设置布尔值为 true 或 false：

let myTrueBool = true
let myFalseBool = false

✅ 布尔值以英国数学家、哲学家和逻辑学家 George Boole（1815–1864）的名字命名。

比较运算符与布尔值

运算符用于通过比较生成布尔值来评估条件。以下是一些常用运算符的列表。

符号	描述	示例
`<`	小于：比较两个值，如果左侧值小于右侧值，则返回 `true` 布尔值	`5 < 6 // true`
`<=`	小于或等于：比较两个值，如果左侧值小于或等于右侧值，则返回 `true` 布尔值	`5 <= 6 // true`
`>`	大于：比较两个值，如果左侧值大于右侧值，则返回 `true` 布尔值	`5 > 6 // false`
`>=`	大于或等于：比较两个值，如果左侧值大于或等于右侧值，则返回 `true` 布尔值	`5 >= 6 // false`
`===`	严格相等：比较两个值，如果左右两侧的值相等且数据类型相同，则返回 `true` 布尔值	`5 === 6 // false`
`!==`	不等：比较两个值，返回与严格相等运算符相反的布尔值	`5 !== 6 // true`

✅ 在浏览器的控制台中写一些比较语句来检查你的知识。返回的数据是否有让你感到意外的地方？

If 语句

如果条件为 true，if 语句将运行其块中的代码。

if (condition) {
  //Condition is true. Code in this block will run.
}

逻辑运算符通常用于构成条件。

let currentMoney;
let laptopPrice;

if (currentMoney >= laptopPrice) {
  //Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
}

If..Else 语句

当条件为 false 时，else 语句将运行其块中的代码。它是 if 语句的可选部分。

let currentMoney;
let laptopPrice;

if (currentMoney >= laptopPrice) {
  //Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
} else {
  //Condition is false. Code in this block will run.
  console.log("Can't afford a new laptop, yet!");
}

✅ 在浏览器控制台中运行这段代码以及后续代码来测试你的理解。更改 currentMoney 和 laptopPrice 变量的值以改变 console.log() 的返回结果。

Switch 语句

switch 语句用于根据不同条件执行不同的操作。使用 switch 语句可以选择要执行的多个代码块之一。

switch (expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
  // code block
}

// program using switch statement
let a = 2;

switch (a) {
  case 1:
    a = "one";
    break;
  case 2:
    a = "two";
    break;
  default:
    a = "not found";
    break;
}
console.log(`The value is ${a}`);

✅ 在浏览器控制台中运行这段代码以及后续代码来测试你的理解。更改变量 a 的值以改变 console.log() 的返回结果。

逻辑运算符与布尔值

决策可能需要多个比较，可以通过逻辑运算符将它们串联起来以生成布尔值。

符号	描述	示例
`&&`	逻辑与：比较两个布尔表达式。仅当两侧都为 true 时返回 true	`(5 > 6) && (5 < 6 ) //一侧为 false，另一侧为 true。返回 false`
`\|\|`	逻辑或：比较两个布尔表达式。只要至少一侧为 true 就返回 true	`(5 > 6) \|\| (5 < 6) //一侧为 false，另一侧为 true。返回 true`
`!`	逻辑非：返回布尔表达式的相反值	`!(5 > 6) // 5 不大于 6，但 "!" 会返回 true`

使用逻辑运算符的条件与决策

逻辑运算符可以用于在 if..else 语句中构成条件。

let currentMoney;
let laptopPrice;
let laptopDiscountPrice = laptopPrice - laptopPrice * 0.2; //Laptop price at 20 percent off

if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
  //Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
} else {
  //Condition is true. Code in this block will run.
  console.log("Can't afford a new laptop, yet!");
}

非运算符

到目前为止，你已经看到如何使用 if...else 语句来创建条件逻辑。任何进入 if 的内容都需要评估为 true 或 false。通过使用 ! 运算符，你可以取反表达式。它看起来像这样：

if (!condition) {
  // runs if condition is false
} else {
  // runs if condition is true
}

三元表达式

if...else 不是表达决策逻辑的唯一方式。你还可以使用一种称为三元运算符的方式。它的语法如下：

let variable = condition ? <return this if true> : <return this if false>

下面是一个更具体的示例：

let firstNumber = 20;
let secondNumber = 10;
let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;

✅ 花点时间多读几遍这段代码。你理解这些运算符是如何工作的了吗？

上述代码表示：

如果 firstNumber 大于 secondNumber
那么将 firstNumber 赋值给 biggestNumber
否则将 secondNumber 赋值给 biggestNumber。

三元表达式只是以下代码的简洁写法：

let biggestNumber;
if (firstNumber > secondNumber) {
  biggestNumber = firstNumber;
} else {
  biggestNumber = secondNumber;
}

🚀 挑战

创建一个程序，首先使用逻辑运算符编写，然后使用三元表达式重写它。你更喜欢哪种语法？

课后测验

复习与自学

阅读更多关于用户可用的运算符的信息：MDN。

浏览 Josh Comeau 的精彩运算符速查表！

作业

运算符

免责声明：
本文档使用AI翻译服务Co-op Translator进行翻译。尽管我们努力确保准确性，但请注意，自动翻译可能包含错误或不准确之处。应以原始语言的文档作为权威来源。对于关键信息，建议使用专业人工翻译。因使用本翻译而导致的任何误解或误读，我们概不负责。

8.8 KiB Raw Permalink Blame History Unescape Escape