片段和控制结构。第 4 部分 JavaScript 课程从初学者到高级，共 10 篇博文

已发表: 2021-10-28

这是 JavaScript 博客文章系列的第 4 部分，它将带您从初学者到高级。 在本系列结束时，您将了解开始使用 JavaScript 编码所需的所有基础知识。 事不宜迟，让我们开始第四个教程。

片段和控制结构 - 目录：

将我们的编码设置升级为片段
控制结构

在这篇博文中，我们将继续我们从第三篇博文离开的地方。在这个阶段，您应该打开 Google Chrome 浏览器，更具体地说，打开 JavaScript 控制台。如果您出于某种原因关闭了它们，那么现在是重新打开它们的好时机。

如果您使用的是 Mac，打开控制台的键盘快捷键是在打开 Chrome 后按“Option + Command + J”。如果您使用的是 Windows 设备，则可以在打开 Chrome 后使用键盘快捷键“Control + Shift + J”打开 JavaScript 控制台。或者您也可以转到顶部的菜单并转到查看 -> 开发人员 -> JavaScript 控制台。

将我们的编码设置升级为片段

在课程的这一点之前，我们可以逐行编写所有内容并逐行执行。这不是最方便的运行方式，但它仍然可以工作。从本教程开始，我们将编写需要多行代码来创建完整指令集的代码。为了实现这一点，我们将在 Google Chrome 中使用称为“片段”的东西。事不宜迟，让我们将我们的设置从 JavaScript 控制台升级到 Chrome 代码段。

目前，您应该打开控制台，如果您按照前面的教程进行操作，您应该会看到如下所示的屏幕：

当您查看此屏幕或您的屏幕时，您应该看到：元素、控制台、源、网络、性能、内存、应用程序等在黑暗区域的顶部栏中彼此相邻。如果您看到它们的颜色较浅，那也很好。这意味着您正在使用灯光模式，这可以是白天的默认模式。我显示的屏幕当前使用 Chrome 控制台设置中暗模式的配色方案。如果您看到元素、控制台、来源、网络等出现在任何一种配色方案中，那么您就可以开始了。

如果你仔细看一下控制台的顶部栏，你会发现“控制台”的字样看起来有点不同的颜色。继续并单击它旁边的“来源”。

单击源后，您应该会看到一个看起来像这样的屏幕。

如果您可能看不到“notes.js”文件，您可能会想到一个不同之处，就像我之前创建的那样。除此之外，它应该看起来与此非常相似。要创建新文件，请单击“+ 新片段”。单击它后，它将为您创建一个新的 JavaScript 文件，您可以随意命名它。在本教程中，我们将其命名为“index.js”，因为通常将第一个或主文件命名为“index.js”。

如果您想逐字阅读本教程，请在单击“+ New Snippet”后，输入名称“index.js”并按键盘上的回车键。现在我们可以在打开的主要区域上单击打开的文件，开始编写 JavaScript。

让我们从我们已经知道有效的东西开始。那就是：

alert("Hello, World!");

您可以自己写出来进行额外练习，也可以将代码部分复制并粘贴到我们创建的文件中。我强烈建议您自己输入它，因为在许多情况下这是您学习它的方式。一旦你输入它，如果你按下回车键，你会看到代码没有被执行。相反，与任何其他文本编辑区域一样，您的光标只会转到下一行。我们可以通过两种主要方式来执行我们的代码。第一个是单击位于右下角的播放按钮。

如果您单击该播放按钮，它应该执行我们的代码并向我们显示结果。

单击“确定”后，我们还可以使用其他主要方式运行我们的代码。运行代码或运行代码片段的第二种主要方式是使用键盘快捷键。正如我们所看到的，当我们单击运行按钮时，它已经向我们显示了快捷方式。该键盘快捷键是“Command + Enter”。为此，我们可以按 Command 键，然后按 Enter 键。这样做也将运行我们的代码，并为我们提供与单击播放按钮相同的结果。

有了这个，现在您知道了在 Chrome 代码段中执行 JavaScript 代码的两种方法。

如果您想创建新文件以记录有关 JavaScript 的笔记，或练习一些 JavaScript 代码，您始终可以通过单击“+ 新代码段”来创建新文件并根据需要命名文件。现在我们已经准备好新的编码设置，让我们看看更多的 JavaScript。

控制结构

当我们编写代码时，我们必须考虑用户可以采取的许多场景和操作。这种针对不同场景的准备可以来自不同的来源，例如我们的代码运行的设备、要显示的屏幕大小、用户可能拥有的不同类型的浏览器等等。但是我们如何确保我们能够为不同的场景做好准备呢？如果您一个接一个地编写不同的代码，执行所有这些代码对用户来说是否有意义？为了回答所有这些以及更多问题，我们将使用控制结构。

控制结构让我们能够指导代码的执行，使我们的代码能够适应不同的条件。有多个用于控制结构的通用元素。在本教程中，我们将从最简单的一个开始，然后从那里开始。我们将看到的第一个使用 If、else、else if 语句来控制代码的执行。

如果，否则和如果

这是开始使用的最简单的控制结构。它允许我们做的是，如果某个条件为真，则执行一段代码，如果另一个条件为真，则执行另一段代码。让我们看一个例子。让我们假设，如果外面下雨，我会带上我的雨伞。否则，我不会带伞。我们可以将确切的逻辑和推理转换为代码，如下所示：

（在编写此代码之前，我们将通过在文件中放置两个正斜杠来注释我们在文件中的先前代码中的代码，因此它不会被执行，但您仍然拥有它的副本。添加正斜杠之后它应该看起来像这样:)

// alert("Hello, World!");
let rainy = true;
if (rainy){
   alert("Take an umbrella");
} else {
   alert("No need for an umbrella");
}

运行此代码将为我们提供以下输出：

// alert("Hello, World!");
let rainy = false;
if (rainy){
   alert("Take an umbrella");
} else {
   alert("No need for an umbrella");
}

而运行这个版本的代码说没有下雨，会给出以下输出：

当您输入代码以更改代码文件时，如果您仔细查看文件名，您会发现文件名前有一个星号。这意味着我们编写的代码文件没有完全保存。如果您只编写几行可以随时编写的代码，这可能不会产生很大的影响，但通常您会希望保存您的代码，以便以后可以重用或查看它。我们可以像保存其他文件一样保存此代码文件，因此在 Mac 上为“Command + S”，在 Windows 上为“Control + S”。

在我们的例子中，因为我们在编写代码后立即执行我们的代码，所以当我们执行代码时它会自动保存我们的文件。因此，如果您要编写一些代码并将其搁置数小时，最好时不时地保存您的代码，以确保您不会失去任何重大进展。

很高兴我们可以使用 If 和 else 语句让我们的代码适应二进制条件，但是我们有很多事情要考虑，这很可能是现实生活中的情况。例如，如果天气很冷，你需要在寒冷的时候买一件连帽衫怎么办。我们可以做到这一点的一种方法是使用“else if”语句，我们可以这样做：

// alert("Hello, World!");
let rainy = false;
let cold = true;
if (rainy){
   alert("Take an umbrella");
} else if (cold) {
    alert("Get a hoodie with you, not an umbrella");
} else {
   alert("No need for an umbrella");
}

此代码的输出如下所示：

因此，如果某个条件为真，则将执行括号之间的第一个代码。在我们的例子中，由于第一个条件检查是否下雨，我们会提醒用户他们应该带雨伞。如果该条件为假，即没有下雨，我们将使用“else if”语句继续检查其他条件。与“else if”语句显着不同的一件事是，我们可以使用 else if 语句检查尽可能多的条件。

这里要记住的重要一点是，您的代码将从上到下检查正确性或真实性。这意味着使用当前代码，如果天气既下雨又寒冷，它将无法识别寒冷的天气，因为第一个语句是正确的。我们还可以通过将代码更改为同时具有下雨和寒冷条件来验证这一点。

// alert("Hello, World!");
let rainy = true;
let cold = true;
if (rainy){
   alert("Take an umbrella");
} else if (cold) {
    alert("Get a hoodie with you, not an umbrella");
} else {
   alert("No need for an umbrella");
}

现在您可能想知道，我该如何解决这个问题？哪一个更重要，天气冷还是下雨？你应该选择一个条件并牺牲另一个条件吗？你甚至必须做出这样的选择吗？嗯，不是真的。这是一个非常常见的问题，它有一个非常常见且相对简单的解决方案。我们可以使用“and”表达式来涵盖多个场景。为了告诉 JavaScript 我们想要使用“and”来连接我们的编程逻辑，我们将使用两个这样的符号：“&”。并且因为我们的代码是从上到下检查的，所以我们将在第一个 if 语句中使用最全面的选项。然后更新的代码看起来像这样。

// alert("Hello, World!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Wear a hoodie and take an umbrella with you.")
} else if (rainy){
   alert("Take an umbrella");
} else if (cold) {
    alert("Get a hoodie with you, not an umbrella");
} else {
   alert("No need for an umbrella");
}

运行此代码将为您提供如下所示的警报：

好多了。现在我们可以组合多个不同的场景，包括这些场景的不同组合。但是，如果我们想考虑一个不冷但下雨的场景怎么办。并假设我们想告诉用户不要专门买连帽衫，只买一把雨伞。为此，我们可以使用逻辑“非”，我们可以在我们的代码中使用它，在我们想要指定的条件之前使用感叹号。让我们将该条件添加到我们的代码中，使其更加完整。

// alert("Hello, World!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Wear a hoodie and take an umbrella with you.")
} else if (rainy && !cold){
   alert("Take an umbrella, but not a hoodie.");
} else if (rainy){
   alert("Take an umbrella");
} else if (cold) {
    alert("Get a hoodie with you, not an umbrella");
} else {
   alert("No need for an umbrella");
}

当我们向 if else 树添加新条件时，只要它是更全面的条件，我们就可以将它放在顶部的某个位置。这样，与相反的方法相比，我们出错的机会要少得多。将新代码注入现有代码的一个副作用是某些代码可能会变得多余或可能无法以最有效的方式工作。我们不会过多关注效率部分，但现在我们可以看到我们涵盖了阴雨天气的寒冷和非寒冷条件，因此我们可以选择删除仅检查“下雨”条件的条件。进行这种代码调整也称为“代码重构”，在重构过程中，重点是使代码越来越干净和高效。

// alert("Hello, World!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Wear a hoodie and take an umbrella with you.")
} else if (rainy && !cold){
   alert("Take an umbrella, but not a hoodie.");
} else if (cold) {
    alert("Get a hoodie with you, not an umbrella");
} else {
   alert("No need for an umbrella");
}

当我们想要检查任一条件是否为真时，我们可以使用“或”运算符，它是键盘上使用两次的管道符号，看起来像这样的“||”。

让我们用另一个例子来看看一个例子。为了在同一个文件中添加更多示例而不干扰新命令，我们可以通过将之前的代码包装在我们之前看到的这些符号中来注释掉之前使用的代码：

/* 
*/

这是一个正斜杠，一个星号和相同的符号以相反的顺序关闭注释部分。让我们将当前代码包装在这些符号中，这样它们就不会干扰即将到来的新代码。现在您的代码文件应如下所示：

// alert("Hello, World!");
/*
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Wear a hoodie and take an umbrella with you.")
} else if (rainy && !cold){
   alert("Take an umbrella, but not a hoodie.");
} else if (cold) {
    alert("Get a hoodie with you, not an umbrella");
} else {
   alert("No need for an umbrella");
}
*/

从现在开始，我们将专注于我们添加到文件中的新部分，这样我们就可以一次专注于学习一件事。您可以选择将以前的代码保留在注释模式下，将它们移动到新文件以供参考，或者如果您不想再看到它，可以将其删除以获得更清晰的文件。

让我们继续我们的“或”案例。考虑这样一个场景，每当您感到饥饿或口渴时，您都会去冰箱取食物和饮料。代码将如何工作？

let hungry = true;
let thirsty = false;
if (hungry || thirsty) {
    alert("Go to the fridge and check what you have in there.");
}

正如您可能已经猜到的那样，执行此代码会给我们以下结果：

到目前为止，我们使用的示例来自接近现实生活的场景，但很多时候您将在代码中处理数字。您在本系列之前已经看到过数字，但我们并没有过多地讨论比较或我们可以对它们进行的操作。既然我们了解了 if else 语句，让我们看看更多关于数字的内容。

当我们处理 if 和 else if 语句时，我们正在检查语句的真实性。但是，如果我们只有数字，我们还能做出有意义的 if 语句吗？例如，如果我想在有超过 50% 的下雨几率的情况下买一把雨伞，我们可以通过代码实现吗？是的，我们可以，这就是它的发展方向。

let chanceOfRain = 70;
if (chanceOfRain >= 50) {
    alert("Get an umbrella.");
}

Snippets and control structures. Part 4 JavaScript course from Beginner to Advanced in 10 blog posts 14 1

当我们处理数字时，我们需要一种方法将其转换为某种真假，以使 if 语句起作用。根据我们的用例，我们可以通过多种方式实现这一目标。

例如，我们可以使用三个等号检查两个数字是否完全相等，如下所示：

let a = 10;
let b = 10;
if (a === b) {
    alert("They are the same.");
}

这会给我们一个警告，说“它们是一样的。”。

我们还可以使用以下代码检查不等于：

let a = 10;
let b = 5;
if (a !== b) {
    alert("They are not the same thing!");
}

运行上面的代码会给我们一个警告，上面写着“它们不是一回事！”。

我们还可以具体检查哪个更大、更大相等、更小或更小相等。为方便起见，您可以找到标志摘要。

// === checks for equality
// !== checks for not equality
// > greater than
// >= greater than or equal to
// < smaller than
// <= smaller than or equal to

让我们再看看其中的几个，以进行额外的练习和代码暴露。以下是几个示例代码，它们都将显示它们在 if 语句中的警报：

比...更棒：

let a = 10;
let b = 5;
if (a > b) {
    alert("a is greater than b");
}

大于或等于：

让 a = 10; 让 b = 5; if (a >= b) { alert(“a 大于或等于 b”); } [/代码]

大于或等于的另一个例子：

let a = 10;
let b = 10;
if (a >= b) {
    alert("a is greater than or equal to b");
}

小于：

let a = 5;
let b = 10;
if (a < b) {
    alert("a is smaller than b");
}

小于或等于：

let a = 5;
let b = 10;
if (a <= b) {
    alert("a is smaller than or equal to b");
}

另一个小于或等于的例子：

let a = 10;
let b = 10;
if (a <= b) {
    alert("a is smaller than or equal to b");
}

使用这些比较或等号的组合，我们可以创建可以适应不同条件的复杂代码。

算术运算

当我们处理数字时，我们想要执行的另一件事是算术运算。大多数算术运算应该很熟悉，但也有一些可能不太熟悉的编程特定算术运算符。

以下是我们在 JavaScript 中使用的算术运算的摘要，它们的含义为您提供方便：

// * multiplication
// / division
// + addition
// - subtraction
// % modulo operation, gives us the remainder after division
// ** exponentiation

前四个将按您的预期工作：

let a = 12;
let b = 5;
let c = a * b;
// c will be 60
c = a / b;
// c will now be 2.4
c = a + b;
// c will now be 17
c = a - b;
// c will now be 7

模运算将在将第一个数字除以第二个数字后给我们余数。如果我们继续前面的 a、b 和 c 代码：

c = a % b;
// c will now be 2
c = 18 % 5;
// c will now have the value of 3
// because 18 divided by 5 will give us the remainder of 3

指数运算符在 JavaScript 中执行求幂。它用两个星号表示，并将第一个元素乘以第二个元素。

c = 2 ** 3;
// c will now have the value of 8
// because 2 * 2 * 2 equals 8

这是一个相对较长的教程，你成功了！ 我们已经升级了我们的编码设置，并在本教程中学到了很多东西。 在下一个教程中，我们将继续使用更多方法来控制我们的代码流！

作者：罗伯特·惠特尼
JavaScript 专家和指导 IT 部门的讲师。他的主要目标是通过教其他人如何在编码时有效合作来提高团队生产力。
查看所有帖子

10 篇博文中从初级到高级的 JavaScript 课程：

如何开始用 JavaScript 编码？
JavaScript 基础
JavaScript 中的变量和不同的数据类型
片段和控制结构
While 循环和 for 循环
Java 数组
JavaScript 函数
JavaScript 对象
JavaScript 方法等
JavaScript 课程总结

片段和控制结构。 第 4 部分 JavaScript 课程从初学者到高级，共 10 篇博文