让循环成为你的 JavaScript 魔法棒：5 种方式

2023-10-02 09:11:02

准备好在 JavaScript 的循环世界中大展身手了吗？循环是我们代码库中宝贵的工具，它们使我们能够轻松重复任务并遍历数据结构。在这篇详尽的指南中，我们将深入探讨 JavaScript 中循环的五个基本类型，从经典的 while 循环到现代的 for...of 循环。了解这些循环的优点和缺点，你将成为一名循环大师，在你的代码中挥洒自如。

JavaScript 循环：从基础到精通

循环是我们编程工具箱中必不可少的工具，它们允许我们在 JavaScript 代码中轻松重复任务。通过反复执行代码块，循环使我们能够处理数据数组、遍历对象属性或执行任何需要重复操作的任务。

JavaScript 提供了五种不同的循环类型，每种类型都有其独特的语法和用途。了解这些循环的细微差别对于编写高效、可读且可维护的代码至关重要。

1. while 循环：经典的循环选择

while 循环是一种经典的循环类型，它只要满足条件就不断执行代码块。while 循环的语法很简单：

while (condition) {
  // 代码块
}

条件可以是任何 JavaScript 表达式，它决定了循环是否继续执行。只要条件为真，循环就会继续执行代码块。一旦条件为假，循环就会终止。

优点：

while 循环易于理解和实现。
它非常适合当您不知道循环需要执行的迭代次数时。

缺点：

忘记在循环中更新条件可能会导致无限循环。
while 循环可能比其他循环类型效率较低。

2. do while 循环：至少执行一次的循环

do while 循环类似于 while 循环，但它有一个关键区别：do while 循环在检查条件之前至少执行一次代码块。这使得 do while 循环非常适合需要在首次检查条件之前执行代码的情况。

do {
  // 代码块
} while (condition);

优点：

确保代码块至少执行一次。
有助于避免因条件最初为假而跳过关键代码。

缺点：

与 while 循环相比，语法略显冗长。
同样存在忘记更新条件的风险。

3. for 循环：结构化且通用的循环

for 循环是最常见的循环类型，它提供了对循环迭代次数的显式控制。for 循环的语法如下：

for (initialization; condition; increment) {
  // 代码块
}

initialization： 在循环开始时执行一次。通常用于声明循环变量和/或初始化计数器。
condition： 决定循环是否继续执行的条件。
increment： 在每次循环迭代后执行。通常用于更新循环变量或计数器。

优点：

for 循环语法清晰，易于理解。
它提供对循环迭代次数的显式控制。
非常适合需要执行固定次数迭代的情况。

缺点：

必须同时指定初始化、条件和增量表达式，这可能会导致代码冗长。
如果条件或增量表达式未正确更新，可能会导致无限循环。

4. for...in 循环：遍历对象属性

for...in 循环专门用于遍历对象属性。它的语法如下：

for (variable in object) {
  // 代码块
}

variable： 用于存储对象每个属性的名称。
object： 要遍历的对象。

优点：

提供一种简单的方法来遍历对象的所有可枚举属性。
可以很容易地获取每个属性的名称。

缺点：

不遍历对象原型中的属性。
循环顺序不可预测，因为它取决于对象的属性顺序。

5. for...of 循环：遍历可迭代对象

for...of 循环是一种现代的循环类型，它允许遍历可迭代对象，如数组、字符串和 Set。它的语法如下：

for (variable of iterable) {
  // 代码块
}

variable： 用于存储可迭代对象中每个元素。
iterable： 要遍历的可迭代对象。

优点：

提供一种简洁的方法来遍历可迭代对象。
循环顺序与可迭代对象的顺序一致。

缺点：

与 for...in 循环相比，不支持遍历对象属性。
在某些情况下可能比其他循环类型效率较低。

循环控制：break 和 continue

在 JavaScript 中，可以使用两个特殊的来控制循环：break 和 continue。

break： 终止循环并立即退出。
continue： 跳过当前迭代并继续执行循环的下一轮。

这些关键字非常有用，可以让你在需要时从循环中退出或跳过特定迭代。

循环实践：一个 JavaScript 教程

为了加深对 JavaScript 循环的理解，让我们编写一个简短的程序，展示每种循环类型的用法。

// while 循环
let i = 0;
while (i < 5) {
  console.log(`while 循环：${i}`);
  i++;
}

// do while 循环
do {
  console.log(`do while 循环：${i}`);
  i++;
} while (i < 5);

// for 循环
for (let j = 0; j < 5; j++) {
  console.log(`for 循环：${j}`);
}

// for...in 循环
const person = { name: 'John Doe', age: 30 };
for (let key in person) {
  console.log(`for...in 循环：${key}: ${person[key]}`);
}

// for...of 循环
const numbers = [1, 2, 3, 4, 5];
for (let number of numbers) {
  console.log(`for...of 循环：${number}`);
}

输出：

while 循环：0
while 循环：1
while 循环：2
while 循环：3
while 循环：4
do while 循环：5
for 循环：0
for 循环：1
for 循环：2
for 循环：3
for 循环：4
for...in 循环：name: John Doe
for...in 循环：age: 30
for...of 循环：1
for...of 循环：2
for...of 循环：3
for...of 循环：4
for...of 循环：5