如何学习编程——我希望这时你开始学习编码时拥有的指南

光是学习编码的想法就让人望而却步。代码这个词的定义是神秘的。它意味着计算机而非人类应该理解的一种技术交流形式。

许多人开始学习编码的一种方法是选择一种流行的编程语言，然后毫无方向地一头扎进去。这可以采取在线编码课程、教程项目或随机购买特定主题书籍的形式。

潜在的开发人员很少从路线图开始——编码世界的鸟瞰图，概述了几乎 100% 的开发人员每天都在使用的一组相关编程概念、语言和工具。

在这篇文章中，我提出了一个这样的路线图。为此，我概述了 14 个步骤——每个步骤都讨论了一个基本概念、语言或工具——专业开发人员使用这些步骤来编写代码、协作和创建专业项目。

我根据自己近 20 年的个人编程学习之旅精心选择了这 14 个步骤。

作为一名开发人员，我花了这么长时间才感到自在，部分原因是我会在没有更广泛的编码世界背景的情况下学习特定主题。

本文中的每个步骤都讨论了一个“编码要素”——我认为这是至关重要的，至少要知道它 在您的编码之旅开始时就存在。

在列出路线图中的步骤之前的最后一点注意事项：当然，阅读本文不会使您成为专家级程序员。这不是故意的。本文的目的是让您意识到这些主题中的每一个都存在，并希望让您对每个主题的工作原理有一个基本的了解，以便您可以在其基础上明智地向前发展。

初学者开发者的 14 步路线图

事不宜迟，让我们从头开始！

1) 熟悉计算机体系结构和数据基础

现代编程语言的美妙之处之一在于，它们使我们能够创建精美的应用程序，而无需担心幕后硬件的具体细节（大部分情况下）。

这称为抽象——使用更高级工具（在本例中为编程语言）的能力，这些工具简化并缩小了我们理解和技能所需的范围。

然而，这并不意味着了解您的代码正在执行的金属的基础知识是没有用的。至少，了解一些花絮将有助于您应对有关高 CPU 和内存使用率的工作场所对话。

因此，这里有一个最低限度的计算机体系结构基础知识，可以帮助您入门：

您计算机最重要的部件位于微芯片（也称为集成电路）上。

微芯片依靠一种叫做晶体管的电子元件来工作。晶体管是微型电子开关，在任何给定时间要么关闭 (0) 要么打开 (1)。单个微芯片可以包含数百万或数十亿个嵌入其上的微型晶体管。

大多数现代计算机都有一个称为**中央处理器 (CPU)**的微芯片。你可以把它想象成计算机的大脑。它处理计算机执行的大部分数字运算和逻辑任务。

每个 CPU 都有一个称为指令集的东西，它是 CPU 理解的二进制（零和一）命令的集合。幸运的是，作为软件开发人员，我们真的不需要担心这些！这就是抽象的力量。

如果 CPU 是大脑的逻辑中心，那么拥有内存以及临时或长期存储信息是很有用的。

计算机将**随机存取存储器 (RAM)**作为“工作存储器”（或短期存储器）来存储正在运行的程序正在使用的信息。

RAM 由一组内存地址组成，可用于存储数据位。在 C 等较旧的语言中，程序员确实可以使用称为指针的功能直接使用内存地址，但这在更现代的语言中很少见。

最后，我们将介绍一个您肯定熟悉的组件 – 硬盘驱动器。在我们的大脑类比中，这代表长期记忆。硬盘驱动器是一种内部或外部设备，用于存储即使在计算机关闭后仍应保留的数据。

在继续讨论有关编程语言的更多细节之前，让我们花点时间谈谈数据。但是数据这个词到底是什么意思呢？

在高层次上，我们会想到文本文档、图像、视频、电子邮件、文件和文件夹等内容。这些都是我们每天创建并保存在计算机上的高级数据结构。

但在引擎盖下，计算机芯片（如 CPU 或 RAM 芯片）并不知道“图像”或“视频”是什么。

从芯片的角度来看，所有这些结构都存储为一长串的 1 和 0。这些 1 和 0 称为位。

位通常一次存储为一组八位，称为字节。一个字节只是八位的序列，例如00000001、01100110或00001111。以这种方式表示信息称为二进制表示。

2) 了解编程语言的工作原理

在上一节中，我们提到大多数计算机都依赖于 CPU，而 CPU 可以理解 1 和 0 形式的一组特定指令。

因此，理论上我们可以编写代码，通过以 CPU 理解的形式将一长串 1 和 0 串在一起来告诉 CPU 做什么。像这样以二进制形式编写的指令称为机器码。

听起来很可怕，不是吗？嗯，可能是，但我不知道，因为我主要使用高级编程语言，如 JavaScript、Python 和 Java。

更高级别的编程语言提供了一组人类可读的关键字、语句和语法规则，它们更易于人们学习、调试和使用。

编程语言提供了一种弥合人类大脑理解世界的方式与计算机大脑 (CPU) 理解世界的方式之间差距的方法。

最终，我们编写的代码需要翻译成 CPU 可以理解的二进制指令（机器代码）。

根据您选择的语言，我们说您的代码被编译或解释为能够由您的 CPU 执行的机器代码。大多数编程语言都包含一个称为编译器或解释器的程序来执行此翻译步骤。

举几个例子——JavaScript 和 Python 是解释型语言，而 Java 是编译型语言。一种语言是编译型还是解释型（或两者的某种组合）对开发人员的便利性、错误处理、性能和其他方面都有影响，但我们不会在这里深入讨论这些细节。

3) 了解互联网的运作方式

无论您想从事何种类型的编程，都会遇到了解计算机如何相互交互会有所帮助的情况。这通常发生在 Internet 上。

互联网只不过是全球联网计算机的集合。换句话说，它是一个全球网络。网络中的每台计算机都同意一组规则，使它们能够相互交谈。对于计算机来说，“交谈”意味着传输数据。

正如我们在上一节中讨论的那样，所有类型的数据——网页、图像、视频、电子邮件等——都可以表示为 1 和 0。

因此，您可以将 Internet 视为一组非常大的计算机，它们可以在它们之间传输 1 和 0，以一种保留该数据含义的方式。互联网只不过是一种数字对话媒体。

如果 Internet 只是一个大的谈话场所，让我们来定义谈话参与者。

首先，打个比方：大多数人类对话至少需要两个参与者。在大多数情况下，一个人发起对话，另一个人回应，假设他们都在场且有空。

在 Internet 中，发起对话的计算机称为客户端。响应或回答的计算机称为服务器。

例如，假设您打开网络浏览器并转到“www.google.com”。在这种情况下，您的 Web 浏览器就是客户端。通过扩展，您还可以将您正在使用的计算机视为客户端。

从更抽象的意义上讲，您是客户，因为您是发起对话的人。通过在搜索栏中输入“www.google.com”并单击，您的浏览器将请求与 Google 的一台计算机开始对话。

Google 的计算机称为服务器。它通过发送在您的浏览器中显示谷歌网页所需的数据来响应。瞧！谷歌的网页出现在你的眼前。所有 Internet 数据传输都利用这种客户端/服务器关系。

4) 练习一些命令行基础知识

乍一看，命令行可能令人生畏。它经常在电影中以神秘的黑屏为特色，上面滚动着难以理解的文本、数字和符号。它通常与邪恶的黑客或天才技术伙伴有关。

事实上，使用或理解命令行并不需要天才。事实上，它允许我们执行许多我们通过点击鼠标轻松完成的相同任务。

主要区别在于它主要通过键盘接受输入，一旦掌握了它就可以显着加快输入速度。

您可以使用命令行浏览文件夹、列出文件夹的内容、创建新文件夹、复制和移动文件、删除文件、执行程序等等。您可以在命令行中键入命令的窗口称为终端。

让我们浏览一下基本导航命令的简短教程，让您体验在命令行上工作的感觉。

一旦你打开你的终端，一个典型的第一个问题是“_我在哪里”？_我们可以使用pwd命令（代表“打印工作目录”）来解决这个问题。它输出我们在文件系统中的当前位置，告诉我们当前所在的文件夹。

自己试试：

如何使用命令行

如果您使用的是 Mac，请打开终端应用程序，它本质上是一个 Unix 命令行终端。

如果您正在运行没有 GUI（图形用户界面）的操作系统，例如 Linux 或 Unix，则在启动计算机时默认情况下您应该使用命令行。如果您的 Linux 或 Unix 风格确实有 GUI，您将需要手动打开终端。

在提示符下，键入pwd并按。命令行将打印出您当前所在文件夹的路径。

默认情况下，打开命令行时的活动文件夹是登录用户的主目录。这是可定制的，以防您希望方便地从不同的位置开始。

为方便起见，可以使用波浪~字符引用主目录。我们将在接下来的几个例子中使用它。

现在我们知道我们在哪个文件夹中，我们可以使用ls命令列出当前目录的内容。该ls命令代表“列表”。

键入ls并按。驻留在当前目录中的内容（文件和子文件夹）被打印到屏幕上。

像这样重新运行之前的命令ls -al并按。现在我们将获得有关目录内容的更多详细信息，包括文件大小、修改日期和文件权限。

前面命令中的连字符允许我们设置某些修改命令行为的标志。在这种情况下，我们添加了将列出所有目录内容（包括隐藏文件）的 -a 标志以及显示额外文件详细信息的 -l 标志。

接下来，我们可以使用mkdir命令创建一个新文件夹，它代表“Make Directory”。下面我们创建一个名为“testdir”的新文件夹。

键入mkdir testdir并按。然后键入 ls并按。您应该会在列表中看到您的新目录。

要一次创建多个嵌套目录，请使用-p标志创建整个目录链，如下所示：mkdir -p directory1/directory2/directory3

如果我们只能停留在一个位置，命令行就没那么有用了，所以让我们学习如何浏览文件系统中的不同目录。我们可以通过cd命令执行此操作，该命令代表“更改目录”。

首先，键入cd testdir并按。然后键入 pwd并按。请注意，现在的输出显示我们位于 cd 命令中指定的“testdir”目录中。我们浏览了它！

键入cd ..并按。告诉命令行 ..向后浏览到父目录。

然后键入pwd并按。请注意，现在的输出显示您已返回原始目录。我们向后浏览！

接下来我们将学习如何在当前目录中创建一个新的空文件。

键入touch newfile1.txt并按。可以使用 ls命令查看在当前目录下创建了新文件。

现在我们将使用 cp 命令将该文件从一个文件夹复制到另一个文件夹。

键入cp newfile1.txt testdir并按。现在使用 ls和 ls testdir命令可以看到，新文件仍然存在于当前目录中，并被复制到“testdir”目录中。

我们还可以使用mv命令移动文件而不是复制。

键入touch newfile2.txt并按以创建新文件。
接下来，键入 mv newfile2.txt testdir并按将文件移动到“testdir”文件夹中。

使用ls和ls testdir命令确认文件已移至“testdir”文件夹（它不应再出现在您创建它的原始位置，因为它是_移动_的而不是复制的）。

该mv命令也可用于重命名文件。

为此，键入touch newfile3.txt并按以创建一个新文件。然后键入 mv newfile3.txt cheese.txt并按更新文件名。用于 ls确认文件已重命名。

最后，我们可以使用rm命令删除文件和文件夹。

键入rm cheese.txt并按删除文件。用于 ls确认文件已删除。

键入rm -rf testdir并按删除“testdir”目录及其内容。用于 ls确认目录已删除。

请注意，我们需要-rf在删除目录时使用标志。这会强制删除该文件夹及其所有内容。

5) 使用 Vim 培养你的文本编辑器技能

至此，我们已经介绍了命令行的基础知识，并看到了一些如何在没有鼠标的情况下处理文件的示例。

虽然我们现在知道如何从命令行创建、复制、移动、重命名和删除文件，但我们还没有看到我们如何在终端中编辑文本文件的内容。

在终端中处理文本文件很重要，因为计算机代码只不过是保存在一组有组织的文件中的文本。

当然，我们可以使用像 Microsoft Word 这样的高级文本编辑器（或者更可能是像 Sublime 或 Atom 这样的专业代码编辑器）来编写和编辑我们的代码，但这不是必需的。终端通常是编写和编辑代码最方便的地方，因为我们通常已经打开它来运行命令！

有几个专门为此目的创建的优秀文本编辑器，我建议学习一个名为 Vim 的基础知识。

Vim 是最古老的文本编辑器之一，是久经考验的瑰宝。Vim 代表“ VI i **M证明”，因为它是名为Vi**的工具的继承者。

如前所述，Vim 是一个直接在终端中运行的文本编辑器，所以我们不需要打开一个单独的窗口来工作，也不需要使用鼠标。Vim 有一套命令和模式，可以让我们仅使用键盘就可以方便地创建和编辑文本内容。

Vim确实有一点学习曲线，但只要稍加练习，您学到的技能就会在您的编码生涯中大有裨益。

许多操作系统默认安装了 Vim。要检查它是否安装在您的计算机上，请打开命令行并键入vim -v.

如果 Vim 在您的终端中打开并显示版本，您就可以开始了！如果没有，您需要在系统上安装它。（请注意，您可以通过键入:q!并按来退出 Vim）。有关安装 Vim 的更多信息，请参阅 https://www.vim.org。

在我看来，学习如何使用 Vim 的最快和最简单的方法是使用他们的内置教程VimTutor。要运行它，请确保您的系统上安装了 Vim，打开命令行，键入vimtutor，然后按。

这是一个很好的教程，我没有理由浪费时间在这里解释它。所以像现在一样去做 VimTutor 吧！下一节见。

如果您在完成 VimTutor 后仍有精力，请查看这 7 个 Vim 命令，它们将在您开始使用 Vim时显着提高您的工作效率。

6) 接受一些 HTML

您可以将 HTML（超文本标记语言的****缩写）视为网页的****骨架。它通过指定应该显示的元素和它们应该显示的顺序来确定页面的结构。

您在浏览器中访问过的每个网页都有一些与之关联的 HTML。当您访问网页时，托管该网页的网络服务器会向您的浏览器发送一些 HTML。然后您的浏览器会读取它并为您显示它。

大多数网页包含一组相当标准的内容，包括标题、文本内容、图像链接、导航链接、页眉和页脚等等。所有这些信息都存储为定义页面结构的 HTML。

要记住的一件事是 HTML 在技术上不是一种编程语言，尽管它通常被称为“HTML 代码”。

正如我们稍后将看到的，其他编程语言使我们能够编写执行某些操作的代码，例如按顺序运行一组指令。HTML 什么都不做。我们不运行或执行 HTML。HTML 只是放在一个文件中，等待发送到 Web 浏览器，该浏览器会将其显示给最终用户。

事实上，HTML 基本上只是数据。它是定义网页应该是什么样子的数据，仅此而已。

那么如何编写 HTML 呢？HTML 使用一组标准的标签（基本上只是标签）来识别构成网页的可用元素。每个标签都使用尖括号定义。

例如，标题标签定义为<title>My Page Title</title>，段落标签定义为<p>A bunch of random text content.</p>。

每个 HTML 元素都由一个开始标记和一个结束标记组成。起始标记只是尖括号之间的标记标签，如下所示：

<tagname>

这将打开新的 HTML 标记。结束标签本质上是相同的，但它在第一个尖括号后使用正斜杠，将其标记为结束标签：

</tagname>

两个标签之间的任何文本都是页面将显示的实际内容。

让我们介绍几个最常用的标签。第一个是<html>标签。这定义了 HTML 页面的开始。相应的</html>标记（注意正斜杠）定义了 HTML 页面的结尾。这些标签之间的任何内容都将成为页面的一部分。

第二个是<head>标签。这定义了浏览器将用来理解页面的附加信息。此标签中的大部分内容不会显示给用户。相应</head>的标记定义了 HEAD 部分的结尾。

之前，我们看到了<title>标签。它定义了网页的标题，浏览器将在浏览器选项卡中显示该标题。此标记需要放置在该<head>...</head>部分内。

接下来是<body>标签。该标签内的所有内容构成了网页的主要内容。将这四个标签放在一起看起来像这样：

<html>
    
    <head>
        <title>My Page Title</title>
    </head>
        
    <body>
        <p>A bunch of random text content.</p>
    </body>

</html>

上面的简单 HTML 片段表示一个简单的网页，其中包含一个标题和一个段落作为正文内容。

这个例子提出了我们在上一节中没有提到的一点。HTML 标签可以相互嵌套。这只是意味着 HTML 标签可以放在其他 HTML 标签内。

HTML 提供了许多其他标签来为网络用户提供丰富的内容。我们不会在这里详细介绍它们，但下面是一个简短的列表供参考：

<p>: 从新行开始的一段文本。
<h1>：通常用于页面标题的页面标题。
<h2>：通常用于章节标题的章节标题。
<hx>：其中_x_是 3 到 6 之间的数字，用于较小的标题。
<img>：一个图像。
<a>：一条链接。
<form>：包含供用户填写和提交的字段或输入的表单。
<input>：供用户输入信息的输入字段，通常在表单中。
<div>：一个内容分区，用于将几个其他元素组合在一起以达到间距目的。
<span>：另一个分组元素，但用于将文本短语包装在另一个元素中，通常仅将特定格式应用于文本内容的特定部分。

7) 处理一些 CSS

没有 CSS 或层叠样式表的网页就像没有糖霜的蛋糕。一个没有糖霜的蛋糕达到了它的目的，但它看起来并不开胃！

CSS 允许我们将背景颜色、字体大小、宽度、高度等样式属性与我们的 HTML 元素相关联。

每个样式属性都会告诉浏览器在屏幕上呈现所需的效果。与 HTML 一样，CSS 在技术上不是一种编程语言。它不会让我们执行操作，它只是让我们向基本的 HTML 添加样式。

让我们看看如何将 CSS 样式与我们的 HTML 元素相关联。这个谜题分为三部分：

CSS 选择器：用于标识我们希望应用样式的 HTML 元素。

CSS 属性名称：我们要添加到匹配的 HTML 元素的特定样式属性的名称。

CSS 属性值：我们要应用的样式属性的值。

以下是这些部分如何组合在一起以设置段落的颜色和字体大小的示例：

p {
  color: red;
  font-size: 12px;
}

让我们从头开始，在花括号之前。这就是 CSS 选择器所在的位置。在本例中，字母p 表示<p>（段落）HTML 标记。这意味着花括号内的样式将应用于<p>网页上的所有标签。

让我们继续讨论大括号内的内容——我们想要应用于目标元素的样式。

在这里我们找到成对的 CSS 属性和值，用冒号分隔。属性（在本例中为“颜色”和“字体大小”）位于左侧。这些属性的值（在本例中为“red”“12px”）在右侧。分号结束每个属性/值对。

您可能会看到这是如何工作的。上面的 CSS 代码片段告诉浏览器使用红色、12px 大小的字母来放置<p>标签内的所有文本。

那么 HTML 页面如何知道包含这些 CSS 样式呢？输入<link>HTML 标记。通常，CSS 样式是在与HTML不同的文件（ .css文件）中创建的。这意味着我们需要一些方法将它们导入到我们的 HTML 文件中，以便浏览器知道样式存在。

该<link>元素的存在就是为了这个目的。我们<link>在 HTML 文件部分包含元素，这些元素<head>允许我们指定要导入的外部 CSS 文件：

<head>

    <title>My Page Title</title>

    <link rel="stylesheet" type="text/css" href="/home/style.css">

</head>

在此示例中，我们将导入href属性指定的 CSS 样式，在本例中为文件_/home/style.css_。

在接下来的 3 个部分中，我们将（最终）深入研究一些更具技术性的编程语言！

我们将全面概述 JavaScript、Python 和 Java，并介绍这 3 种语言共有的一些基本编码概念。我们将比较和对比语言特性和示例代码，希望您能全面了解这三者的基础知识。

8) 开始使用 JavaScript 编程

让我们从回答以下问题开始：如果我们可以使用 HTML 构建网页的结构并使用 CSS 使其看起来漂亮，为什么我们需要 JavaScript？

答案是我们在技术上没有。如果我们对坐在那里并且看起来很漂亮的静态站点感到满意，那么我们可以只使用 HTML 和 CSS。

这里的关键词是“静态”。但是，如果我们想向我们的网页添加动态功能，例如更改内容和更复杂的用户交互，我们需要使用 JavaScript。

什么是JavaScript？

那么JavaScript到底是什么？JavaScript 是一种专门为网站和 Internet 创建的编程语言。正如我们在第 2 节中提到的，大多数编程语言要么是编译型的，要么是解释型的，程序通常以独立的方式运行。

JavaScript 在这方面有些独特，因为它被设计为直接在 Web 浏览器中执行。它允许我们编写表示将在我们的网页上执行的动作集的代码，以使我们的网站更加动态。

您可以在以.js扩展名命名的文本文件中或<script>直接在 HTML 中的标记内编写 JavaScript 代码。

多年来，JavaScript 代码主要是在 Web 浏览器中运行。但是Node.js项目通过创建可以在任何地方运行的独立 JavaScript 环境改变了这种范式。

Node.js 可以在任何计算机上本地安装，而不是被困在浏览器（即客户端）中，以允许开发和执行 JavaScript 代码。您还可以在 Web 服务器上安装 Node，这样您就可以使用 JavaScript 作为应用程序的后端代码，而不是简单地作为 Web 浏览器的前端代码。

现在我们已经介绍了一些背景知识，让我们深入了解 JavaScript 语言的一些基础知识。

JavaScript 中的变量和赋值

变量可能代表了编程中最基本的概念。变量只是用于引用特定值的名称或占位符。

变量这个词意味着存储的值可以在整个程序执行过程中发生变化。

您可以使用变量来存储数字、文本字符串、列表和我们稍后将详细讨论的其他数据结构。

所有编程语言都使用变量，但语法因语言而异。

变量很有用，因为我们可以在整个代码中引用它们的值。这使我们能够根据需要检查它们的值，并根据变量值的变化执行不同的操作。

在 JavaScript 中，我们使用let关键字声明变量，如下所示：let x;.

这将 x 声明为我们可以在代码中使用的变量。请注意，我们在行尾添加了一个分号。在 JavaScript（和许多其他语言）中，分号用于指定每个代码语句的结尾。

现在我们已经创建了变量_x_，我们可以使用等号为其赋值，也称为赋值运算符：x = 10;

_在这里，我们将数字 10 分配给名为x_的变量。现在，任何时候我们在代码中使用_x_时，值 10 都会被替换。

变量声明和赋值都可以在一行中完成，如下所示：

let x = 10;

JavaScript 中的数据类型

_在上一节中，我们在名为x_的变量中存储了一个整数（整数）值。您还可以存储已知的十进制数或浮点数。例如，我们可以写：let x = 6.6;.

我们可以在变量中存储的不同类型的值称为数据类型。到目前为止，我们只看到了数字数据类型（整数和浮点数），但我们只是触及了皮毛。我们也可以将文本数据存储在变量中。

在编码术语中，一段文本称为字符串。我们可以用单引号或双引号将字符串值存储在变量 x 中：

let x = 'Hello there!';

let y = "Hey bud!";

我们要讨论的下一个数据类型是布尔值。布尔值只能包含两个值之一，true或者false– 并且它们必须全部为小写。在 JavaScript 中，true 和 false 是两个专门用作布尔变量值的关键字：

let x = true;

let y = false;

请注意，值true和false不会像字符串那样出现在引号内。如果我们用引号将它们括起来，则值将是字符串，而不是布尔值。

我们经常使用布尔值来控制条件 (if/else) 语句中的程序流，我们将在接下来了解这些语句。

JavaScript 中的程序流控制语句

现在我们已经了解了变量和基本的 JavaScript 数据类型，让我们来看看我们可以用它们做的一些事情。

如果不能告诉我们的代码用它们做一些事情，变量就没有那么有用。我们可以使用语句让我们的变量做一些事情。

语句是特殊的关键字，允许我们在代码中执行某些操作，通常基于我们定义的变量的值。语句让我们定义我们程序的逻辑流程，以及执行许多有用的操作，这些操作将决定我们的程序如何工作。

If / Else 语句

我们要讨论的第一个语句是if语句。该if语句允许我们仅在所需条件为真时执行某些操作。下面是它的工作原理：

let x = 10;

if ( x > 5 ) {
    console.log('X is GREATER than 5!');
} else {
    console.log('X is NOT GREATER than 5!');
}

我们定义了一个名为_x_的变量并将其值设置为 10。然后是我们的if语句。在关键字之后if，我们有一组括号，其中包含要评估的条件，在本例中为x > 5。我们刚刚将_x_定义为等于 10，因此我们知道此示例中的条件为真。

由于括号中的条件为真，大括号之间的代码将被执行，我们将看到字符串“X is GREATER than 5!” 打印到屏幕上。（我们没有讨论的含义console.log()，所以现在只知道它将括号中的值打印到屏幕上）。

在同一示例中，我们还包含了一条else语句。这允许我们在条件中的条件为的情况下执行特定代码false。

循环

我们将讨论的下一种语句是while 循环。循环使我们能够根据需要多次重复一段代码，而无需一遍又一遍地复制和粘贴代码。

例如，假设我们需要将一个句子打印到屏幕上 5 次。我们可以这样做：

console.log('This is a very important message!');
console.log('This is a very important message!');
console.log('This is a very important message!');
console.log('This is a very important message!');
console.log('This is a very important message!');

这只适用于 5 条消息，但是 100 条或 1000 条消息呢？我们需要一种更好的方法来多次重复一段代码，而循环允许我们这样做。在编码术语中，多次重复一段代码称为迭代。

while只要指定的条件保持为真，下面的循环就会继续运行其中的代码块：

let x = 1;

while ( x <= 100 ) {
    
    console.log('This is a very important message!');
    
    x = x + 1;
    
}

_在这个例子中，我们将x_的值初始化为 1。然后我们编写一个while循环。与if语句类似，我们在括号中添加一个条件。在这种情况下，条件是x <= 100。true只要_x_小于或等于 100，此条件就会成立。

接下来我们在花括号中指定要执行的代码块。首先，我们将消息打印到控制台。然后我们将_x_增加 1。

此时循环尝试重新评估条件以查看它是否仍然true。变量_x_现在的值为 2，因为它在第一次循环运行时递增。条件仍然是true因为 2 小于 100。

循环中的代码重复执行，直到_x_的值递增到 101。此时，_x_大于 100，因此条件为 now false，循环中的代码停止执行。

HTML