适合初学者的 JavaScript 循环：学习基础知识

php中文网 2024-10-15 11:14:55

这是一个阴沉的星期一，而你正在工作。我们都知道周一有多令人沮丧，对吧？你的老板走近你并说：“嘿，我周末收到了 300 封未打开的电子邮件。我希望你打开每一封，记下发件人的姓名，然后在完成后删除这些电子邮件。”

如果你尝试手动完成这个任务，看起来会很累。您想到的下一件事可能是在 google 上寻找可以自动化此过程并让您的生活更轻松的软件，对吗？

嗯，我们在编程中也有类似的情况。有时您需要重复执行任务直到完成。你如何解决这个问题？在 javascript 中，我们有所谓的循环。循环使我们能够通过减少完成任务所需的代码量来解决重复的任务。

在本文中，我们将讨论什么是循环，它是如何工作的，以及我们可以用来在程序中应用它的各种方法。

立即学习“Java免费学习笔记（深入）”；

什么是循环？

javascript 中使用循环来轻松执行重复操作。它们基于返回 true 或 false 的条件。

条件是必须传递以保持循环运行的表达式。当指定条件返回 true 值时，循环运行；当返回 false 值时，循环停止。

什么时候需要使用循环？

循环对于执行重复性任务很有用。例如，使用循环可以缩短解决问题所需的代码。它可以节省时间、优化内存使用并提高灵活性。

循环的真正意义不仅仅在于减少代码长度和限制重复。它们在处理数组、对象或其他结构中的数据时也很有帮助。此外，循环通过减少重复代码和提高代码可重用性来促进代码模块化，这使得创建可在项目的不同部分中使用的代码成为可能。

循环类型

循环有两大类：入口控制循环和出口控制循环。

入口控制循环在执行循环体之前评估“循环入口”的条件。如果条件为真，身体就会运行。如果没有，身体就不会运行。 for 和 while 循环是入口控制循环的示例。

退出控制循环重点关注循环体而不是测试条件，确保在评估测试条件之前循环体至少执行一次。退出控制循环的一个很好的例子是 do-while 循环。

让我们看一下入口控制循环的一些示例：

while 循环

while 循环具有以下语法。

while (condition) {
  //  loop's body
}

以下列表解释了 while 循环的功能：

while 循环采用括号内的测试条件。
程序检查条件以查看是否通过或失败。
只要满足条件，循环体内的代码就会执行。
一旦测试条件失败，程序就会终止运行。

下面，我们以 while 循环为例：

let arr = [];
let i = 1;
let number = 5;

while (i 





<pre class="brush:php;toolbar:false">console.log(arr)

上面的代码片段初始化了“arr”、“i”和“num”变量。
“arr”变量是一个数组，保存通过测试条件的值。
“i”变量在每次迭代后跟踪每个增量。
“number”变量在每次迭代后将“i”的值与其值（5）进行比较。
只要“i”小于或等于“number”，循环体中的代码就会在每次迭代后将“i”的每个值推送到数组中。
一旦“i”的当前值不满足条件，在这种情况下，“i”的值大于“number”（6），循环停止运行。

push() 方法是一个内置的 javascript 函数，它将新项目添加到数组的末尾。

输出

[1, 2, 3, 4, 5]

do while 循环

do-while 循环与 while 循环非常相似； while 和 do-while 循环之间的主要区别在于，do-while 循环确保在评估循环条件之前至少执行一次代码，do-while 循环具有以下语法。

do {
  // loop's body
}
while (//condition)

do-while 是退出控制循环的一个很好的例子。这是因为退出控制循环在测试条件之前优先考虑循环体，现在让我们深入研究利用 do-while 循环的实际代码示例。

示例：

let i = 1;
let num = 5;

do {
  console.log(i);
  i++;
} while (i 



<p>现在让我们分解一下这段代码：</p>

<ol>
<li>我们初始化了“i”和“num”变量。</li>
<li>在评估循环条件之前，控制台会记录“i”（1）的值。</li>
<li>检查条件，每次迭代后“i”的值增加+1。</li>
<li>一旦“i”大于“num”，循环就结束操作。</li>
</ol><p>输出<br></p>

<pre class="brush:php;toolbar:false">1
2
3
4
5

虽然 do-while 循环和 while 循环非常相似，但还是有一些细微的差别我们必须注意，让我们再举一个例子来比较一下 while 和 do-while 循环之间的区别。

let i = 5;
let num = 4

while( i 



<p>上面的 while 循环不会向控制台返回任何结果，为什么会这样呢？</p>

<ol>
<li>我们分别将“i”和“num”变量初始化为值5和4。</li>
<li>条件检查“i”的值是否小于“num”。</li>
<li>如果为 true，它将记录每个相应的值。</li>
<li>由于“i”的初始值超过了“num”的初始值，因此循环永远不会运行。</li>
</ol><p>现在让我们用 do-while 循环来举一个类似的例子。<br></p>

<pre class="brush:php;toolbar:false">let i = 5;
let num = 4;

do {
  console.log(i)
}
while ( i 



<p>输出<br></p>

<pre class="brush:php;toolbar:false">
5

do-while 循环保证了代码块的执行，它在控制台中返回 5，虽然“i”最初的值比“num”高，但它仍然在控制台中记录一次。此表示向您展示了 do-while 和 while 循环之间的功能差异。

for循环

for 循环是一种独特的循环类型，也是程序员最常用的循环之一，for 循环是根据条件运行代码块特定次数的循环。 for 循环的语法如下。

for (expression1...; expression2....; expression3...{
     //code block
}

表达式1：for循环的这一部分也称为初始化区域，它是我们for循环的开始，也是定义计数器变量的区域；计数器变量用于跟踪循环运行的次数并将其存储为值。

expression2：这是循环的第二部分，这部分定义了执行循环的条件语句。

表达式3：这是循环结束的地方；本节中的计数器变量在每次迭代后通过增加或减少条件中指定的值来更新其值。

让我们深入研究使用 for 循环的示例。

for (let i = 0; i 



<p>从上面的代码片段来看，我们一起来分解一下。</p>

<ol>
<li>首先，我们将计数器变量“i”初始化为零。</li>
<li>接下来，我们创建了使代码保持运行的条件语句。</li>
<li>我们将“i”的值与 100 进行比较，如果通过此测试，则记录“hello world”。</li>
<li>重复这个过程，每次迭代后计数器都会增加+1。</li>
<li>计数器的值达到 100 时循环结束。</li>
</ol><p>输出<br></p>

<pre class="brush:php;toolbar:false">hello world
hello world
hello world

...

//repeated 97 more times making it 100 "hello world" in total
...

for-each 循环

for-each 循环是 javascript 中的一种方法，它遍历数组并对数组中的每个元素应用回调函数；回调函数只是作为参数传递给函数的另一个函数，回调函数的工作原理是在主函数执行完成后按顺序运行。

让我们检查一下 for-each 循环的基本语法。

array.foreach(function(currentvalue, index, arr))

上面提供的代码解释了 for-each 循环的工作原理。

这个循环接受三个参数，分别是当前值、索引和数组。
当前值代表数组中元素的当前值。
索引是一个可选参数，它告诉您当前元素在该数组中的编号位置。
arr 是另一个可选参数，它告诉您元素属于哪个数组。

let myarray = [1, 2, 3, 4, 5];

array.foreach((num, index, arr) =&gt; {
  arr[index] = num * 2;

  console.log(array);
});

让我们分解一下上面的例子：

我们用变量名“myarray”初始化了一个数组，并存储了1到5之间的整数。
for-each 数组方法接受三个参数，并对数组应用回调函数。
这条线； arr[index] = num * 2 将当前元素的值乘以 2，并将返回值赋给当前元素的索引。

注意，for-each 数组方法不会返回新数组；相反，它修改原始数组并返回它。

输出

[2, 4, 6, 8, 10]

javascript 中的 for...in 和 for...of 循环是什么？

for...in 和 for...of 循环在迭代可迭代对象时非常有用，可迭代对象是指任何能够被循环的元素，可迭代对象的常见示例是数组、字符串、套装等

for... in 和 for... of 在如何迭代/移动对象方面相似，它们之间的主要区别在于它们如何返回值。

for...in 循环

当您需要从对象中提取键/属性以及从父对象中提取相应的属性时，for...in 循环非常有用，for...in 循环有时可能会迭代 a 中的对象方式与在特定对象中定义的方式不同，让我们举一个 for...in 循环的例子。

let namesarray = [];

const studentscores = {
john: 60,
dan: 53,
tricia: 73,
jamal: 45,
jane: 52
}

for(const name in studentscores){
  namesarray.push(name);
}

console.log(namesarray);

在上面的例子中，我们定义了一个名为studentscores的对象，其中包含多个学生姓名及其对应的分数，通过使用for...in，我们只能检索到学生的姓名，这些姓名代表了该对象的键studentscores，并使用push()方法将它们存储在数组中。

输出

["john", "dan", "tricia", "jamal", "jane"]

for...of 循环

for...of 循环是一种特殊类型的循环，它迭代可迭代对象的值，例如数组、字符串、映射等，for...of 循环不关心对象的键或属性，而是仅显示值的优先级，for...of 循环无法迭代常规对象，并且会抛出错误，因为它们不可迭代。让我们举一个使用 for..of 循环的例子。

let numArray = [1,2,3,4,5]

for (const value of numArray) {
    console.log(value)
}

// 输出 = 1,2,3,4,5
总之，for...in 和 for...of 循环是循环可迭代对象的好方法，主要区别是 for...in 循环返回对象的键，而 for...of 循环仅返回可迭代对象的值。

什么是无限循环以及我们如何避免它？

无限循环是指无限期地持续运行的循环；当循环没有定义的退出条件时，就会发生这种情况。无限循环很危险，因为它们可能会使您的浏览器崩溃并导致程序中出现不需要的操作。

//无限循环示例
而（真）{
console.log("继续运行")
}
为了防止程序中出现无限循环，请始终确保循环中定义了退出条件。

结论

非常感谢您阅读本文的结尾，javascript 中的循环是每个开发人员都需要掌握的重要概念，因为它对于创建良好且可优化的程序非常有价值，我相信通过本文您将能够了解在程序中使用循环的基础知识和复杂性。

以上就是适合初学者的 JavaScript 循环：学习基础知识的详细内容，更多请关注php中文网其它相关文章！

本文地址： http://www.ipsmc.com/web/3644.html