JavaScript循环详解：for、for-in、for-of、while与跳出机制

循环

for

循环是编程中用于反复执行特定代码块的基础命令，几乎存在于所有编程语言中。

以下示例展示了如何执行循环代码块5次：

for (let i = 0; i < 5; i++) {
  let text = `当前数字为${i}`
  console.log(text)
}

// 输出结果： 当前数字为0 当前数字为1 当前数字为2 当前数字为3 当前数字为4

在该示例中，`let i = 0`用于声明循环计数器变量，`i < 5`设定了循环终止条件，`i++`定义了计数器更新的步长，而大括号`{}`内的代码则构成了循环体。

具体执行流程如下：首先对计数器进行终止条件判断，若结果为true，则执行循环体代码；执行完毕后更新计数器并再次判断；若结果为false，则立即终止循环。

因此，通过修改判断条件可以控制循环次数；若循环条件始终为true，则会形成死循环。

for-in

for-in是一种特殊的循环结构，主要用于遍历对象或数组（通常遍历数组推荐使用for-of）。

let o = {
  name: 'dapiaoliang',
  age: 18,
  sex: 'woman'
}

// 将对象内的所有键值对循环输出, 此时可以使用for-in
for (let key in o) {
  let text = `当前属性名：${key}, 值：${o[key]}`
}

// 结果（这种循环输出顺序可能会不一样，但数量不变） 当前属性名：name, 值：dapiaoliang 当前属性名：age, 值：18 当前属性名：sex, 值：woman

由此可见，for-in用于遍历对象内的所有键值对。尽管输出顺序可能不确定，但每个键值对都会被遍历一次。

for-of

for-of是专门用于遍历数组或类数组结构（实现了Iterator接口的对象）的循环命令。

let arr = ["dapiaoliang", 18, 'woman']

for (let value of arr) {
  let text = `当前值是：${value}`
  console.log(text)
}

// 结果 当前值是：dapiaoliang 当前值是：18 当前值是：woman

与for-in类似，for-of可以直接遍历数组中的每一项数据。

while

while是for循环的一种变体，使用频率相对较低。

while (条件) {
	循环体
}

当条件为true时，循环体将执行。这种循环没有固定的计数器变量，也不需要更新步长。因此，条件通常依赖于可变参数；若条件不可变，则必须在循环体内设置明确的终止逻辑。

do-while

do-while是一种特殊的while循环，使用频率较低。

do {
  循环体
}while(条件)

当前数字为0 当前数字为1 当前数字为2 当前数字为4

从结构上看，它似乎将while的条件判断与循环体位置互换。这种循环在首次执行时不进行条件判断，而是先执行循环体，执行结束后再进行判断，根据判断结果决定是否继续下一次循环。

因此，do-while的条件决定的是下一次是否继续循环，而第一次执行是必然的。可以将其理解为至少执行一次的while循环。

跳出循环

如果在循环执行过程中需要因特定原因退出，可以使用相应的关键字。

break用于永久终止当前所在的整个循环，而continue用于终止当前这一次迭代（立即进入下一次循环）。

例如，跳过i等于3时的情况：

for (let i = 0; i < 5; i++) {
  if (i === 3) {
    continue
  }
  let text = `当前数字为${i}`
  console.log(text)
}

在上述示例中，当i=3时，循环体内的判断为真并执行continue，此时该次迭代剩余的两行代码不再执行，程序直接跳入下一次循环。

for (let i = 0; i < 5; i++) {
  if (i === 3) {
    break
  }
  let text = `当前数字为${i}`
  console.log(text)
}

当前数字为0 当前数字为1 当前数字为2

若判断内使用break，当i=3时执行break，则后续所有迭代均不再执行。break会直接关闭整个循环。

总结

本文到此结束，希望能为您提供帮助，也欢迎继续关注本站获取更多内容！