用于JavaScript中的循环和同时循环

英文原文：https://codetheweb.blog/2018/03/25/for-and-while-loops-javascript/

JavaScript中的循环是什么？

循环只需多次运行一段代码。例如，看看下面的代码：

alert('Hi!');

如果我们想重复这五次，我们可以这样做：

alert('Hi!');
alert('Hi!');
alert('Hi!');
alert('Hi!');
alert('Hi!');

然而，这是一个非常糟糕的编程，如果您需要重复大量的代码数百次，这会变得非常笨拙。而且，它也不是很有用。例如，如果希望它重复X次呢？这就是循环的用武之地。次数通常由变量决定，但也可以由实际数字决定。循环对于对数组中的每个元素（列表中的每个项）都特别有用，但在许多情况下都很有用。

同时循环

等等，如果我们先执行while循环，那么标题为什么以“for”开头？我真的不知道，只是这样听起来更好。

while循环会在特定的语句中一次又一次地重复代码。true(即直到它是false)。下面是语法：

while ( /* something that's true or false */ ) {
    // Do some stuff
}

就这么简单！下面是一个例子，它不断地从0-1直到一切结束0.2.

while(Math.random() > 0.2) {
    alert('hi');
}

但如果我们想让它报警呢？我们不能写alert(Math.random())因为那样它就会发现新的随机数警报。所以，我们必须做一个变量，然后把它设为每个循环末尾的随机数。然后它会比较这，这个数字，并将其存储在一个变量中，这样我们可以在以后通知它：

var randomNum = Math.random();

while(randomNum > 0.2) {
    alert(randomNum);
    randomNum = Math.random();
}

花点时间看看这段代码。首先，我们设置变量randomNum随机数。然后我们看看它是否大于0.2。如果是的话，我们在花括号里运行这些东西。这会提醒号码，然后更改。randomNum换个新号码。然后我们检查一下这，这个数大于0.2。如果是的话，我们再次在花括号内运行这些内容，然后在…上继续运行。

如果号码是不大于0.2，括号中的内容没有运行，程序继续运行。它不然后继续运行，直到数字大于0.2再来一次。

☢☢注意…避免无限循环！☢☢

无限循环是将永远运行的循环。它们可以在这两个for循环中发生。和同时循环。以下是一个非常基本的例子-不要尝试，除非你没问题丢失你所有的标签

while(true) {
    // some code
}

它将冻结页面，甚至整个浏览器将取决于您的计算机。您通常无法关闭选项卡，并且可能需要退出并重新打开整个浏览器！所以，总是要注意无限循环。它们可能并不总是像while(true)。可能会吧任何语句，该语句将始终计算为true.

循环

假设你想提醒“嗨”五次。正如我前面所说，这是一种非常糟糕的做事方式：

alert('Hi!');
alert('Hi!');
alert('Hi!');
alert('Hi!');
alert('Hi!');

但是，我们如何使用while循环来完成这个任务呢？我们必须设置一个计数器变量，然后每次添加一个：

var counter = 1;

while(counter <= 5) {
    alert('Hi!');
    counter = counter + 1;
}

首先，让我们让这段代码遵循更好的编程约定。而不是使用counter变量，我们应该给它命名i。这只是一个惯例，代表‘迭代’。你不用用i，但这样做是个好主意。它将使您的代码更容易与其他开发人员的代码集成，并使一切更加一致。

另外，我们要启动柜台1。在编程中，启动计数器变量是一种惯例。0。好呀1？在大多数编程语言中，列阵(列表)是项目0，而不是项目1。考虑到循环通常与数组一起使用，最好的编程约定是在0。虽然一开始它可能看起来很混乱，但随着您学习JavaScript的进展，它将使您的代码变得不那么混乱。因为i现在少了一个，我们会说counter < 5而不是counter <= 5.

最后，我们增加了一条线i增加1。而不是说i = i + 1有更好的方法来做这件事！你可以简单地说i++;.

因此，以下是我们的while循环在让它遵循良好的编程约定(“最佳实践”)之后的样子：

var i = 0;

while(i < 5) {
    alert('Hi!');
    i++;
}

信不信由你，使用JavaScript有一种更快、更好、更容易做到这一点的方法！它是通过使用for循环来实现的：

for(var i = 0; i < 5; i++) {
    alert('Hi!');
}

让我们看看这段代码。它非常类似于while循环，只不过所有不同的部分都被移动了。再一次，我们用i作为我们的反变量。

所以首先，我们要i到0。我们没有在循环之前这样做，而是在for循环的括号内，就在开始时这样做。

在分号之后，我们有一个布尔型表达式(计算结果为true或false)。这就像When循环中的部件，并以相同的方式操作！花括号中的内容将运行，而该语句等效于true(在这种情况下，i < 5).

在第二个分号之后，括号中有最后一段代码：i++。这只是我们的最后一行在花括号内从When循环！简而言之，第二个分号之后的代码将在循环每次重复的末尾运行。

下面是for循环语法的总结，以便更容易理解：

for( /* Set your counter variable */ ; /* Repeat while this is true */ ; /* Run this at the end of each repetition */ ) {
    // Your code!
}

尝试做一个for循环，提醒“Yay”三次。不要用代码重复五遍来帮助你！看看你是否可以仅仅使用语法代码来帮助你

答案：

for(var i = 0; i < 3; i++) {
    alert('Yay');
}

另外，你也可以用i 内你的代码在花括号里！虽然这对于迭代是很方便的阵列它可以任意使用。例如，从0-4发出警报：

for(var i = 0; i < 5; i++) {
    alert(i);
}

注意，它是从0-4而不是1-5开始的，因为所有循环都应该从0开始！如果您想从1-5发出警报，我将执行以下操作：

for(var i = 0; i < 5; i++) {
    alert(i + 1);
}

结语

恭喜学习所有关于循环和同时循环！我知道，当我学习的时候，我发现for循环的概念特别令人困惑。记住括号里的三个部分是相当困难的，而我最终得到它的唯一方法就是通过练习。所以，尝试使用for(和while)循环做一些不同的事情！这是最好的学习方法。

最后

为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为全栈工程师，乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈：866109386.欢迎大家进群交流讨论，学习交流，共同进步。

当真正开始学习的时候难免不知道从哪入手，导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握，学习时频繁踩坑，最终浪费大量时间，所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们，祝福大家在往后的工作与面试中一切顺利。