本章目标本章任务循环结构

假设你要给你心意的对象说100次，“我爱你”表白，通过我们之前所学的方式的话，可以这样做：

console.log('教瘦，我爱你'); console.log('教瘦，我爱你'); console.log('教瘦，我爱你'); console.log('教瘦，我爱你'); console.log('教瘦，我爱你'); …… console.log('教瘦，我爱你');

我们需要把一行重复的代码，敲打100遍，太痛苦了。聪明的你已经想到可以用 CV(复制/粘贴) 大法，复制粘贴100行也很麻烦。

当一件相似的事情重复执行很多次的时候我们可以使用循环结构快速解决。

生活中的循环

操场一圈是400米，在运动会的时候，2000米的跑步比赛，我们需要绕操场跑5圈，如下图：

循环结构经典例题 基础之循环结构(1)

这就是一个循环，那么，在这个过程中，其实我们动作只是跑一圈，剩下的过程只是在重复。

那我们来总结下循环：

  1. 重复执行一件相似的事情
  2. 循环的次数是有限制的

下面我们一起学习 JavaScript 中的三种基本循环结构的语句，分别是：

while 循环

while (条件表达式) { 循环体 }

    1. 先执行条件表达式，得到一个布尔类型的结果
    2. 如果表达式的结果为 false,循环结束，执行循环后面的代码
    1. 如果表达式的结果为 true，执行循环体
    2. 重复执行条件表达式，得到一个布尔类型的结果
    1. 重复 b~d 的过程，直到表达式结果为 false，结束循环

循环输出100次，“我爱你”。

// 定义循环变量，控制循环的次数 let i = 0; // 判断条件是否成立 while (i < 100) { // 循环体 // console.log('教瘦，我爱你'); console.log(i ' 教瘦，我爱你'); // 循环遍历自身加1 i ; }

求1~100之间的所有整数和

// 循环遍历 let i = 1; // 求和变量 let sum = 0; while (i <= 100) { sum = i; // sum = sum i; i ; } console.log('1-100之间所有数的和：' sum);

do...while 循环

do { 循环体 } while (条件表达式);

    1. 先执行循环体
    2. 再执行条件表达式，得到一个布尔类型的结果
    1. 表达式的结果为 false，循环结束，执行循环后面的代码
    2. 如果表达式的结果为 true，重复执行循环体
    1. 重复 a~d 的过程，直到表达式结果为 false，结束循环

循环输出100次，“我爱你”。

// 定义循环变量，控制循环的次数 let i = 0; do { console.log(i ' 教瘦，我爱你。'); i ; } while (i < 100);

求1~100之间的所有整数和

// 循环遍历 let i = 1; // 求和变量 let sum = 0; do { sum = i; // sum = sum i; i ; } while (i <= 100); console.log('1-100之间所有数的和：' sum);

仿 siri 项目循环输入

在分支结构中，我们已经实现了 siri 项目的部分功能，可以让用户输入编号选择要做的事情，但是一次只能执行一个任务。

学完两种循环结构之后，我们可以在之前的功能中增加循环执行的能力，继续实现 siri 项目的下面两个功能：

let running = true; while (running) { …… }

// 退出循环，只要让 running = false 即可 // prompt() 方法，点击取消按钮的时候返回 null case 'q': case null: running = false; break;

let running = true; while (running) { let msg = prompt('您好，我是您的私人助理 siri \n' '请输入编号或《关键词》选择功能，按q退出 \n' '1. 计算《总和》\n' '2. 获取《时间》\n' '3. 讲个《笑话》\n' '4. 来个《抽奖》' ); switch (msg) { case '1': case '总和': console.log('计算总和'); break; case '2': case '时间': console.log('获取当前时间'); break; case '3': case '笑话': console.log('随机讲笑话'); break; case '4': case '抽奖': console.log('随机抽奖'); break; case 'q': case null: running = false; break; default: console.log('您说什么，我听不太懂'); break; } }

for 循环

下面我们来学第三种循环结构：for 循环。for循环结构是后续使用最多的一种。在循环次数固定的场景下我们都会选择使用 for 循环结构。例如：打印100次“我爱你”、求1-100所有数的和，这些循环次数固定的情况下，使用 for 循环是最方便的。

for (初始化表达式; 条件表达式; 更新循环遍历){ 循环体 }

循环结构经典例题 基础之循环结构(2)

    1. 首先执行初始化表达式
    2. 执行条件表达式
    1. 如果条件表达式的结果为 false，结束循环，继续执行循环后面的代码
    2. 如果条件表达式的结果为 true，执行循环体
    1. 更新循环遍历
    2. 重复b~e的步骤，直到条件表达式的结果为false，结束循环

// 求1-3的和（断点调试） let sum = 0; for (let i = 1; i <= 3; i ) { sum = sum i; }

案例

let sum = 0; for (let i = 1; i <= 100; i ) { if (i % 2 !== 0) { sum = i; } } console.log(sum);

for (let i = 0; i < 6; i ) { let str = ''; for (let j = 0; j < 6; j ) { str = '* '; } str = '\n'; console.log(str); }

控制台默认对输出重复的内容进行分组输出(不重复输出相同内容，在前面用数字标识)，如下图：

循环结构经典例题 基础之循环结构(3)

关闭分组输出，可以打印重复内容

循环结构经典例题 基础之循环结构(4)

循环结构经典例题 基础之循环结构(5)

let str = ''; for (let i = 1; i <= 9; i ) { for (let j = 1; j <= i; j ) { str = j '*' i '=' i * j '\t'; } str = '\n'; } console.log(str);

总结continue 和 break

在循环的过程中我们可以通过 continue 终止本次循环继续下一次循环，或者通过 break 终止全部循环。

continue

// 计算1-100以内所有奇数的和 let sum = 0; for (let i = 1; i <= 100; i ) { if (i % 2 === 0) { // 如果当前i是偶数，终止当前循环，继续下一次循环(后面的代码不再执行) continue } sum = i; } console.log(sum);

break

// 找到100-999之间的第一个水仙花数并打印 for (let i = 100; i <= 999; i ) { let bai = parseInt(i / 100); let shi = parseInt(i % 100 / 10); let ge = parseInt(i % 10); if (i === bai * bai * bai shi * shi * shi ge * ge * ge) { console.log(i); // 终止循环 break; } }

这个题目修改下，如果要找到 100到999 之间的最后一个水仙花数该如果实现？

在浏览器中调试代码调试过程

断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。

浏览器中按F12-->sources/来源-->找到需要调试的文件-->在程序的某一行设置断点

Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。 F10: 程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。 F8：跳到下一个断点处，如果后面没有断点了，则程序执行结束。

tips: 监视变量，不要监视表达式，因为监视了表达式，那么这个表达式也会执行。

  1. 代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试，知识点花点功夫肯定学的会，但是代码调试这个东西，自己不去练，永远都学不会。
  2. 今天学的代码调试非常的简单，只要求同学们记住代码调试的这几个按钮的作用即可，后面还会学到很多的代码调试技巧。
调试程序

下面的代码期望运行的效果：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { text-align: center; line-height: 25px; } </style> </head> <body> <script> var t = prompt('请输入一个整数', ''); if (t > 5) { document.write('<div>'); for (var i = t, i > 0; i--) { for(var j = 0; j < i; j ) { document.write('* '); } document.wirte('<br />'); } document.write('</div>'); } else { document.write('<div>'); for (var k = t; k < 0; k--) { for (var m = 0; m < k; m ) { document.write('* '); } document.write('<br />'); } for (var n = 1; n <= t; n ) { for (var h = 0; h < n; h ) { document.write('* '); } document.write('<br />'); } document.write('</div>'); } </script> </body> </html>

作业,