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

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

如果你尝试手动完成这项任务，那看起来会非常累。你接下来想到的可能是上 Google 搜索可以自动执行此过程并让你的生活更轻松的软件，对吗？

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

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

什么是循环？

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

条件是必须传递才能使循环运行的表达式。当指定条件返回真值时，循环运行；当指定条件返回假值时，循环停止。

何时需要使用循环？

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

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

循环类型

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

入口控制循环在执行循环主体之前评估“循环入口”处的条件。如果条件为真，则主体运行。如果不是，则主体不运行。for for while循环是入口控制循环的示例。

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

让我们研究一些入口控制循环的例子：

While 循环

while循环具有以下语法。

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

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

1. while循环采用括号内的测试条件。

   
   

2. 程序会检查条件以查看其是通过还是失败。

   
   

3. 只要条件满足，循环体内的代码就会执行。

   
   

4. 一旦测试条件失败，程序就会终止运行。

下面，我们来举一个while循环的实际例子：

 let arr = []; let i = 1; let number = 5; while (i <= number) { arr.push(i) i++ } console.log(arr)

1. 上面的代码片段初始化了“arr”、“i”和“num”变量。

   
   

2. “ arr”变量是一个保存通过测试条件的值的数组。

   
   

3. “i”变量跟踪每次迭代后的每个增量。

   
   

4. 每次迭代之后，“number”变量都会将“i”的值与其值 (5) 进行比较。

   
   

5. 只要“i”小于或等于“number”，循环体内的代码就会在每次迭代后将“i”的每个值推送到数组中。

   
   

6. 一旦“i”的当前值不满足条件，在本例中， “i”的值大于“数字” 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 <= num);

现在，让我们分解一下这个代码片段：

1. 我们初始化了“i”和“num”变量。

   
   

2. 控制台在评估循环条件之前记录“i”的值（1）。

   
   

3. 检查条件，每次迭代后“i”的值都会增加 +1。

   
   

4. 一旦“i”大于“num”，循环就结束操作。

   
   

输出

1 2 3 4 5

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

 let i = 5; let num = 4 while( i < num) { console.log(i) }

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

1. 我们分别用 5 和 4 的值初始化“i”和“num”变量。

   
   

2. 该条件检查“i”的值是否小于“num”。

   
   

3. 如果为真，则会记录每个相应的值。

   
   

4. 由于“i”的初始值超过了“num”的值，因此循环永远不会运行。

   
   

现在，让我们用do-while循环来举一个类似的例子。

 let i = 5; let num = 4; do { console.log(i) } while ( i < num)

输出

5

do-while循环确保代码块的执行，该代码块将 5 返回到控制台，尽管“i”的初始值高于“num”，但它仍会记录在控制台中一次。此表示向您展示了do-while和while循环之间的功能差异。

For 循环

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

 for (Expression1...; Expression2....; Expression3...{    //code block }

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

表达式 2：这是循环的第二部分；此部分定义了执行循环的条件语句。

表达式 3：循环结束的地方；此部分中的计数器变量在每次迭代后都会根据条件增加或减少值来更新其值。

让我们深入研究一个使用 for 循环的例子。

 for (let i = 0; i < 100; i++) {  console.log("Hello World" ) }

从上面的代码片段中，我们一起来分解一下。

1. 首先，我们用零值初始化计数器变量“ i” 。

   
   

2. 接下来，我们创建了使代码保持运行的条件语句。

   
   

3. 我们将“i”的值与 100 进行比较；如果通过此测试，则记录“Hello World”。

   
   

4. 该过程重复进行，每次迭代后计数器都会增加 +1。

   
   

5. 一旦计数器的值达到 100，循环就结束。

   
   

输出

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) => { arr[index] = num * 2; console.log(array); });

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

1. 我们用变量名“myArray”初始化一个数组，并在其中存储从 1 到 5 的整数。

   
   

2. for-each数组方法接受三个参数并对数组应用回调函数。

   
   

3. 此行； 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循环有时可能会以不同于在该特定对象中定义的方式迭代对象；让我们举一个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) } // Output = 1,2,3,4,5

总之， for... in和for... of循环是循环遍历可迭代对象的好方法；主要区别在于for... in循环返回对象的键，而for... of循环仅返回可迭代对象的值。

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

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

 // infinite loop sample while (true) { console.log("keep on running") }

为了防止程序出现无限循环，请始终确保循环内定义了退出条件。

结论

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