[快速入门前端 46] JavaScript：迴圈 (1) for 、while、do while 简介

迴圈

迴圈 (Loop)，是指在符合条件下重複执行某区块内的程式直到条件结束 (为 true)主要分为 while、do while 和 for 三种类型，下面我们就来简单介绍这三种迴圈吧。

for 迴圈

for 迴圈 是最常见的迴圈形式，会在满足条件时不断重複执行某程式。在 for 的括号内必须包含三个必要项目：控制迴圈次数的变数开始值、迴圈终止条件、以及 每跑一圈变数的变化。

语法：

for ( 变数开始值; 终止条件; 变数变化 ) {重複执行的程式};

範例 (输出数字 1 ~ 3)：

// 输出 1 ~ 3for (let i = 1; i <= 3; i++) { // i 从 1 开始，直到 3 结束，i++表示每跑完一个轮迴后i+1    console.log(i);};// 执行过程// 1. 执行 for 括号中的 let i = 1，初始化变数// 2. 执行括号中的 i <= 3，判断是否执行循环      // 若为 true 则执行区块中的程式      // 若为 false 则不循环，直接跳出此 for 区块// 3. 区块中程式执行完毕后会执行变数更新 (i++)// 4. 变数更新后回到步骤 2 进行下一轮的判断

执行结果：

for 结合 if-else 判断

範例：

// 输出 1 到 20 中的偶数// 先跑 1 ~ 20 的迴圈for (i = 1; i <= 20; i++) {    if (i % 2 == 0) { // 用除 2 余数为 0 判断 i 是否为偶数      console.log(i); // 若 i 为偶数则输出    }};

// 要计算数量，所以需要有一个变数来存放数量let count = 0; // 若 count 宣告写在 for 迴圈中，则每跑一次迴圈都会宣告一次变回 0，失去计算意义// 跑 1 ~ 20 的迴圈for (i = 1; i <= 20; i++) {    if (i % 2 == 0) { // 用除 2 余数为 0 判断 i 是否为偶数      count++; // 若为偶数，则偶数数量 + 1    }};console.log(count); // 跑完迴圈后输出总数

While

while 在一开始会对条件进行判断，若为 true 则执行区块内的程式，执行完毕后继续回到 while 条件再进行一次判断，直到判断为 false 跳出 while 迴圈。
语法：

// 语法while (条件) {    要重複执行的程式}// 执行过程// 判断 while 的条件    // 若为 true        // 执行区块中的程式        // 执行完毕后回到最上再判断 while 的条件    // 若为 false，则跳出 while 迴圈

虽然 while 比较自由，只需要先设定条件就可以跑迴圈，不需要像 for 一样规定变数开始值和变数变化的写法，但在迴圈中还是需要注意这三个必要的要素，否则会变成无限迴圈 (迴圈永远不会停止)，导致网页挂掉。
範例：

// 印出 1 ~ 10// 正确範例let count = 1;while (count <= 10) {    console.log(count);    count++; // 每次执行最后 count 必须 + 1}// 错误範例：count 永远都是 1，永远不会符合迴圈停止条件let count = 1;while (count <= 10) {    console.log(count); // 会印出无限多个 1}

do while

do while 与 while 的差异在于 while 会先判断条件再执行，而 do while 则是先执行 (do) 再进行判断，也就是说无论如何 do while 都会先执行一次再进行条件判断。

语法：

// 语法do {    // 要执行的程式}while (条件)// 执行过程// 执行 do// 判断 while 的条件    // 若为 true        // 执行区块中的程式        // 执行完毕后进行 while 条件判断    // 若为 false，则跳出 do while 迴圈

範例：
不论判断是否成立，do while 都会执行一次。

let num = 11;// 变数 num 11 不符合判断条件，但还是会执行一次do {    console.log(num);    num++;}while(num < 10)

上一篇：[快速入门前端 45] JavaScript：条件判断 (2) switch 语句
下一篇：[快速入门前端 47] JavaScript：迴圈 (2) for 和 while 比较
系列文章列表：[快速入门前端] 系列文章索引列表