目标
- 能够说出循环的目的
- 能够说出 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 的能力,这是程序员必备的基础能力