JavaScript 流程控制2-循环

目标

• 能够说出循环的目的
• 能够说出 for 循环的执行过程
• 能够使用断点调试来观察代码的执行过程
• 能够使用 for 循完成累加求和等案例
• 能够使用双重 for 循环完成乘法表案例
• 能够说出 while 循环和 do...while 循环的区别
• 能够说出 break 和 continue 的区别

循环

在实际开发中，有许多具有规律性的重复操作，在程序中要完成这类操作就需要重复执行某些语句

• 在程序中，一组被重复执行的语句称为循环体，能否继续重复执行，取决于循环的终止条件
• 由循环体及循环的终止条件组成的语句，被称为循环语句

for 循环

• for 循环主要用于把某些代码循环若干次，通常和计数有关系
• 初始化变量：用 var 声明的普通变量，通常作为计数器使用
• 条件表达式：终止条件。条件表达式为真，继续执行；条件表达式为假，跳出循环
• 操作表达式：每次循环最后执行的代码，用于变量自增（减）以进行下次条件判断（调试代码时可以清楚地看到每次行代码的执行顺序）

语法结构

for (初始化变量; 条件表达式; 操作表达式) {
  // 循环体
}

执行过程 

// for 循环的执行过程
// 首先执行 var i = 0;然后判断 i < 100;条件表达式为真,执行循环体内的语句;最后执行 i++
// 第二次循环时 i = i++ = i + 1 = 1;接着判断 i < 100,执行循环体内的语句;最后执行 i++
// 依次执行上述过程，直至 i < 100为假，跳出循环
for (var i = 0; i < 100; i++) {
  console.log('明天，你好！')
}

for 循环执行相同的代码

通过用户输入的内容决定循环次数

var num = prompt('请您输入循环次数：')
for (var i = 0; i < num; i++) {
  console.log('明天，你好！')
}

for 循环执行不同的代码

// 因为有计数器 i 的存在，所以可以依托 i 输出不同的内容
var num = prompt('请输入班级人数：')
for (var i = 0; i < num - 2; i++) {
  console.log('报数：' + i)
}
console.log('应到' + num + '人\n' + '实到' + i + '人')

for 循环案例

1 到 100 的累加和

var sum = 0 // 变量 sum 存放和
for (var i = 1; i < 101; i++) {
  sum += i
}
console.log('1 到 100 的累加和为' + sum)

var sum1 = 0 // 变量 sum1 存放奇数和
var sum2 = 0 // 变量 sum2 存放偶数和
var sum3 = 0 // 变量 sum3 存放 3 的倍数的和
for (var i = 1; i < 101; i++) {
  if (i % 2 == 0) {
    sum1 += i
  } else {
    sum2 += i
  }
}
console.log('1 到 100 之间的偶数的累加和为' + sum1)
console.log('1 到 100 之间的奇数的累加和为' + sum2)
for (var i = 1; i < 101; i++) {
  if (i % 3 == 0) {
    sum3 += i
  }
}
console.log('1 到 100 之间的 3 的倍数的累加和为' + sum3)

求学生成绩

var sum = prompt('请输入班级学生人数：')
var grades = 0
var average = 0
for (var i = 1; i <= sum; i++) {
  // 注意类型转换
  var grade = prompt('请输入第' + i + '名学生的成绩：')
  grades += parseFloat(grade)
}
average = grades / sum
alert('该班级学生的总成绩为' + sum)
alert('该班级学生的平均成绩为' + average)

一行打印 n 个星星

采取追加字符串的方式，可以将重复的内容打印出来，而不是一个重复内容之前显示重复的内容的个数

var str = ''
var num = prompt('请输入想要打印星星的个数:')
for (var i = 0; i < num; i++) {
  str += '⭐'
}
console.log(str)

     

双重 for 循环

• 循环嵌套：在一个循环语句中再定义一个循环语句的语法结构
• 在一个 for 循环语句中，再嵌套一个 for 循环，这样的 for 循环语句我们称之为双重 for 循环

// 双重 for 循环
// 我们可以把里面的循环整体看作是外层循环的执行语句
// 外层循环执行一次，里面的循环执行全部
var num = prompt('请输入想要循环的次数：')
for (var i = 1; i <= num; i++) {
  console.log('外层循环的第' + i + '次')
  for (var j = 1; j <= num; j++) {
    console.log('里层循环的第' + j + '次')
  }
}

打印n行n列星星

var str = ''
var num = prompt('请输入想要循环的次数：')
for (var i = 1; i <= num; i++) {
  //外层循环决定打印的行数
  for (var j = 1; j <= num; j++) {
    // 外层循环决定一行打印的星星数
    str += '⭐'
  }
  // 里层循环每执行一次，换行一次
  str = str + '\n'
}
console.log(str)

打印倒三角形

var str = ''
var num = prompt('请输入倒三角形的边长：')
// 分析永远比代码重要
for (var i = 1; i <= num; i++) {
  //外层循环决定打印的行数
  for (var j = i; j <= num; j++) {
    // 外层循环决定一行打印的星星数
    str += '⭐'
  }
  str += '\n'
}
console.log(str)

 

打印乘法表

var str = ''
var sum = ''
// 分析永远比代码重要
for (var i = 1; i < 10; i++) {
  for (var j = 1; j <= i; j++) {
    sum = j + '×' + i + '=' + i * j + '\t'
    str += sum
  }
  str += '\n'
}
console.log(str)

 

for 循环小结

• for 循环可以重复执行某些相同的代码
• for 循环可以重复执行些许不同的代码，因为计数器的存在
• for 循环可以重复执行某些操作，比如算术运算符加法操作
• 随着需求的增加，双重 for 循环可以做更多、更好看的效果
• 双重 for 循环，外层循环一次，内层循环全部执行
• for 循环是循环条件和数字直接相关的循环
• 分析比代码更重要
• 一些核心算法想不到，但是要学会，分析执行过程
• 举一反三，经常总结，做一些相似的案例

while 循环

• while 语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环
• while 循环可以执行一些相对复杂的判断

/**
 * while 语句的语法结构
 * 执行思路：先执行条件表达式
 * 如果结果为 true，则执行循环体代码
 * 如果为 false，则退出循环
 */
/**
 * 执行循环体代码
 * 循环体代码执行完毕后，程序会继续判断执行条件表达式
 * 如果条件仍为 true，则会继续执行循环体
 * 直到循环条件为 false 时，整个循环过程才会结束
 */
while (条件表达式) {
  // 循环体
}

while 循环的使用

// 循环体中必须有计数器，用来初始化变量
var num = 1
// 条件表达式
while (num <= 5) {
  console.log('加油！')
  // 循环体中必须有操作表达式，完成计数器的更新，防止死循环
  num++
}

计算 1 到 100 的累加和

var sum = 0
var num = 1
while (num <= 100) {
  sum += num
  // 循环体中必须有操作表达式，完成计数器的更新，防止死循环
  num++
}
console.log('1 到 100 的累加和为：' + sum)

var message = prompt('Do you love me?')
while (message !== 'i love you') {
  message = prompt('Do you love me?')
}
alert('i love you,too!')

do...while 循环

• do...while 语句其实是 while 语句的变体
• 该循环会先执行一次代码块，然后对条件表达式进行判断
• 如果条件为真，重复执行循环体；条件为假，退出循环
• do...while 循环语句至少执行一次循环体代码

// do...while 基本语法结构
do {
  // 循环体
} while (条件表达式)

简单应用

// do...while 基本语法结构
var num = 1
do {
  // 循环体
  console.log('how are you?')
  num++
} while (num <= 100)

// 1 到 100 的累加和
var sum = 0
var num = 1
do {
  // 循环体
  sum += num
  num++
} while (num <= 100)
console.log(sum)

// 在某些特殊情况下 do...while 比 while 更精炼
do {
  // 循环体
  var message = prompt('Do you love me?')
} while (message !== 'i love you')
alert('i love you,too!')

循环小结

• JS 中循环有 for、while、do...while
• 三种循环很多情况下都可以相互替代使用
• 如果用来计数，和数字相关的，三者使用基本相同，但 for 更常用
• while 和 do...while 可以执行更复杂的判断条件，比 for 循环灵活
• while 和 do...while 执行顺序不同，while 先判断后执行，do...while 先执行一次，再判断是否继续执行
• while 和 do...while 执行次数不同，do...while 至少执行一次循环体，而 while 可能一次都不执行
• 实际工作中，for 循环更常用，它的写法更简洁直观，重点掌握

continue break

continue

continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环中 continue 之后的代码少执行一次）

// continue 退出本次循环
for (var i = 1; i <= 5; i++) {
  if (i == 3) {
    continue // 某次循环中有 continue，则跳过 continue 之后的循环体语句，直接执行 i++
  }
  console.log('第' + i + '次循环已经被执行')
}

案例

// 求 1 到 100 之间，除了能被 7 整除之外的整数和
var sum = 0
for (var i = 1; i <= 100; i++) {
  if (i % 7 == 0) {
    continue // 某次循环中有 continue，则跳过本次循环，直接执行 i++
  }
  sum += i
}
console.log(sum)

break

• break 关键字用于立即跳出整个循环（循环结束）

// break 退出整个循环
for (var i = 1; i <= 5; i++) {
  if (i == 3) {
    break // 某次循环中有 break，退出整个循环
  }
  console.log('第' + i + '次循环已经被执行')
}

断点调试

断点调试是指自己在程序的某一行设置一个断点

调试时，程序运行到这一行就会停止，然后我们可以一步一步往下调试，调试过程中可以看到各个变量当前的值。

如果某行代码出错，调试到出错的代码行就会显示错误，停止继续调试

断点调试可以帮助我们观察程序的运行过程

断点调试步骤

• 浏览器中按 F12 ---> sources ---> 找到需要调试的文件 ---> 在程序的某一行设置断点 ---> 刷新浏览器
• watch：监视，通过 watch 可以监视变量的值的变化，找到 watch ，点击 '+'，输入要监视的变量名，回车，我们就可以看到每次执行循环过程中该变量的值的变化
• F11：程序单步执行，让程序一行一行执行，并观察 watch 中变量的值的变化
• 最后点击设置断点的代码行，退出调试
• 代码调试的能力十分重要，有助于提升解决 bug 的能力，这是程序员必备的基础能力