译：用于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.

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

循环

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

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)循环作一些不一样的事情！这是最好的学习方法。