JavaScript 循环结构

Question

在 JavaScript​ 中，循环语句有三种，while、do..while、for 循环。

while 语句

基本语法：

// 当循环条件为 true 时，执行循环体，
// 当循环条件为 false 时，结束循环。
while (循环条件) {
  //循环体
}

代码示例：

// 计算 1-100 之间所有数的和
// 初始化变量
var i = 1;
var sum = 0;
// 判断条件
while (i <= 100) {
  // 循环体
  sum += i;
  // 自增
  i++;
}
console.log(sum);

案例：
打印 100 以内 7 的倍数
打印 100 以内所有偶数
打印 100 以内所有偶数的和
作业：
打印 100 以内的奇数
打印 100 以内的奇数的和

do...while 语句

do..while 循环和 while 循环非常像，二者经常可以相互替代，但是 do..while 的特点是不管条件成不成立，都会执行一次。

基础语法：

do {
  // 循环体;
} while (循环条件);

代码示例：

// 初始化变量
var i = 1;
var sum = 0;
do {
  sum += i;//循环体
  i++;//自增
} while (i <= 100);//循环条件

案例：

求 100 以内所有 3 的倍数的和
使用 do-while 循环：输出询问“我爱你，嫁给我吧？”，选择“你喜欢我吗？(y/n):"，如果输入为 y 则打印”我们形影不离“，若输入为 n,则继续询问 

for 语句

while 和 do...while 一般用来解决无法确认次数的循环。for 循环一般在循环次数确定的时候比较方便

for 循环语法：

// for 循环的表达式之间用的是;号分隔的，千万不要写成,
for (初始化表达式 1; 判断表达式 2; 自增表达式 3) {
  // 循环体 4
}

执行顺序：1243 ---- 243 -----243(直到循环条件变成 false)

1. 初始化表达式
2. 判断表达式
3. 自增表达式
4. 循环体

案例：

打印 1-100 之间所有数
求 1-100 之间所有数的和
求 1-100 之间所有数的平均值
求 1-100 之间所有偶数的和
同时求 1-100 之间所有偶数和奇数的和
打印正方形
// 使用拼字符串的方法的原因
// console.log 输出重复内容的问题
// console.log 默认输出内容介绍后有换行
var start = '';
for (var i = 0; i < 10; i++) {
  for (var j = 0; j < 10; j++) {
    start += '* ';
  }
  start += '\n';
}
console.log(start);
打印直角三角形
var start = '';
for (var i = 0; i < 10; i++) {
  for (var j = i; j < 10; j++) {
    start += '* ';
  }
  start += '\n';
}
console.log(start);

打印 9*9 乘法表
var str = '';
for (var i = 1; i <= 9; i++) {
  for (var j = i; j <=9; j++) {
    str += i + ' * ' + j + ' = ' + i * j + '\t';
  }
  str += '\n';
}
console.log(str);

作业：

求 1-100 之间所有数的乘积
求 1-100 之间所有奇数的和
计算 1-100 之间能 3 整除的数的和
计算 1-100 之间不能被 7 整除的数的和
// 讲解思路。如果不会写程序，可以先把数学公式准备好
本金 10000 元存入银行，年利率是千分之三，每过 1 年，将本金和利息相加作为新的本金。计算 5 年后，获得的本金是多少？
有个人想知道，一年之内一对兔子能繁殖多少对？于是就筑了一道围墙把一对兔子关在里面。已知一对兔子每个月可以生一对小兔子，而一对兔子从出生后第 3 个月起每月生一对小兔子。假如一年内没有发生死亡现象，那么，一对兔子一年内（12 个月）能繁殖成多少对？（兔子的规律为数列，1，1，2，3，5，8，13，21）

continue 和 break

• break：立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）
• continue：立即跳出当前循环，继续下一次循环（跳到 i++的地方）

案例：

求整数 1～100的累加值，但要求碰到个位为 3的数则停止累加
求整数 1～100的累加值，但要求跳过所有个位为 3的数

作业：

求 1-100 之间不能被 7 整除的整数的和（用 continue）
求 200-300 之间所有的奇数的和（用 continue）
求 200-300 之间第一个能被 7 整数的数（break）

调试 debug

调试的目的是确定错误的原因和位置，并解决错误

错误

• 语法错误
• 逻辑错误

过去调试 JavaScript 的方式

• alert()
• console.log()
• 断点调试

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

调试步骤

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

调试中的相关操作

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

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

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