CD's blog CD's blog
首页
  • HTMLCSS
  • JavaScript
  • Vue
  • TypeScript
  • React
  • Node
  • Webpack
  • Git
  • Nestjs
  • 小程序
  • 浏览器网络
  • 学习笔记

    • 《TypeScript 从零实现 axios》
    • Webpack笔记
  • JS/TS教程

    • 《现代JavaScript》教程
🔧工具方法
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

CD_wOw

内卷的行情,到不了的梦
首页
  • HTMLCSS
  • JavaScript
  • Vue
  • TypeScript
  • React
  • Node
  • Webpack
  • Git
  • Nestjs
  • 小程序
  • 浏览器网络
  • 学习笔记

    • 《TypeScript 从零实现 axios》
    • Webpack笔记
  • JS/TS教程

    • 《现代JavaScript》教程
🔧工具方法
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 简介

  • JavaScript 基础知识

    • 空值合并运算符
    • 变量
    • 循环和for
      • “while” 循环
      • “do…while” 循环
      • “for” 循环
      • 跳出循环
      • 继续下一次迭代
      • 总结
    • Switch语句
    • Symbol类型
    • 对象
    • 对象引用和复制
    • 构造器和操作符“new”
    • 垃圾回收
    • 可选链
  • 数据类型

  • 函数进阶内容

  • 对象属性配置

  • 原型,继承

  • 类

  • 错误处理

  • Promise,asyncawait

  • Generator,高级 iteration

  • 模块

  • 杂项

  • 《现代JavaScript》教程
  • JavaScript 基础知识
CD_wOw
2020-12-06
目录

循环和for

我们经常需要重复执行一些操作。

例如,我们需要将列表中的商品逐个输出,或者运行相同的代码将数字 1 到 10 逐个输出。

循环 是一种重复运行同一代码的方法。

# “while” 循环

while 循环的语法如下:

while (condition) {
  // 代码
  // 所谓的“循环体”
}
1
2
3
4

当 condition 为真时,执行循环体的 code。

例如,以下将循环输出当 i < 3 时的 i 值:

let i = 0;
while (i < 3) { // 依次显示 0、1 和 2
  alert( i );
  i++;
}
1
2
3
4
5

循环体的单次执行叫作 一次迭代。上面示例中的循环进行了三次迭代。

如果上述示例中没有 i++,那么循环(理论上)会永远重复执行下去。实际上,浏览器提供了阻止这种循环的方法,我们可以通过终止进程,来停掉服务器端的 JavaScript。

任何表达式或变量都可以是循环条件,而不仅仅是比较。在 while 中的循环条件会被计算,计算结果会被转化为布尔值。

例如,while (i != 0) 可简写为 while (i):

let i = 3;
while (i) { // 当 i 变成 0 时,条件为假,循环终止
  alert( i );
  i--;
}
1
2
3
4
5

单行循环体不需要大括号

如果循环体只有一条语句,则可以省略大括号 {…}:

let i = 3;
while (i) alert(i--);
1
2

# “do…while” 循环

使用 do..while 语法可以将条件检查移至循环体 下面:

do {
  // 循环体
} while (condition);
1
2
3

循环首先执行循环体,然后检查条件,当条件为真时,重复执行循环体。

例如:

let i = 0;
do {
  alert( i );
  i++;
} while (i < 3);
1
2
3
4
5

这种形式的语法很少使用,除非你希望不管条件是否为真,循环体 至少执行一次。通常我们更倾向于使用另一个形式:while(…) {…}。

# “for” 循环

for 循环更加复杂,但它是最常使用的循环形式。

for 循环看起来就像这样:

for (begin; condition; step) {
  // ……循环体……
}
1
2
3

我们通过示例来了解一下这三个部分的含义。下述循环从 i 等于 0 到 3(但不包括 3)运行 alert(i):

for (let i = 0; i < 3; i++) { // 结果为 0、1、2
  alert(i);
}
1
2
3
语句段
begin i = 0; 进入循环时执行一次
condition i < 3; 在每次循环迭代之前检查,如果为false,进入循环
body(循环体) alert(i); 条件为真时,重复运行
step i++; 在每次循环迭代后执行

一般循环算法的工作原理如下:

开始运行
→ (如果 condition 成立 → 运行 body 然后运行 step)
→ (如果 condition 成立 → 运行 body 然后运行 step)
→ (如果 condition 成立 → 运行 body 然后运行 step)
→ ...
1
2
3
4
5

# 跳出循环

通常条件为假时,循环会终止。

但我们随时都可以使用 break 指令强制退出。

# 继续下一次迭代

continue 指令是 break 的“轻量版”。它不会停掉整个循环。而是停止当前这一次迭代,并强制启动新一轮循环(如果条件允许的话)。

如果我们完成了当前的迭代,并且希望继续执行下一次迭代,我们就可以使用它。

下面这个循环使用 continue 来只输出奇数:

for (let i = 0; i < 10; i++) {

  //如果为真,跳过循环体的剩余部分。
  if (i % 2 == 0) continue;

  alert(i); // 1,然后 3,5,7,9
}
1
2
3
4
5
6
7

# 总结

我们学习了三种循环:

  • while —— 每次迭代之前都要检查条件。
  • do..while —— 每次迭代后都要检查条件。
  • for (;;) —— 每次迭代之前都要检查条件,可以使用其他设置。

通常使用 while(true) 来构造“无限”循环。这样的循环和其他循环一样,都可以通过 break 指令来终止。

如果我们不想在当前迭代中做任何事,并且想要转移至下一次迭代,那么可以使用 continue 指令。

编辑 (opens new window)
#现代JavaScript
上次更新: 2021/08/22, 01:09:59
变量
Switch语句

← 变量 Switch语句→

最近更新
01
gsap动画库学习笔记 - 持续~
06-05
02
远程组件加载方案笔记
05-03
03
小程序使用笔记
03-29
更多文章>
Theme by Vdoing | Copyright © 2020-2023 CD | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式