本文深入解析JavaScript中的三种循环语句：while、do...while和for循环，通过实例讲解循环的基本语法、执行流程及常见应用场景，帮助读者掌握循环语句的正确使用。
JavaScript循环语句
-
就是重复的做某些事情，一段代码在重复的执行，重复执行多少遍，由你来决定
-
三种循环语句：
- while 循环
- do … while 循环
- for 循环
-
循环的必要条件：
- 初始化变量
- 条件判断
- 要重复执行的代码
- 自身改变（改变初始化变量的值）
-
注意：不要写死循环，一定要有自身改变，并且能根据条件执行出一个 false
while 循环
// 1. 初始化变量
var n = 1
// 2. 条件判断
while (n < 5) {
// 3. 要重复执行的代码
console.log('我执行了一遍')
// 4. 自身改变(改变初始化的变量)
n = n + 1
}
console.log('后续代码继续执行')
- while 循环小案例1
/*
while 循环小案例
在控制台输出 1 ~ 100 的和 5050
需要使用循环得到 1 ~ 100 的每一个数字
使用一个 while 循环, 从 1 开始, 到 100 结束
*/
// 1. 初始化就为 1
var n = 1
// 准备一个变量接收计算的结果
var sum = 0
// 2. 条件判断, 到 100 为止, 包含 100
while (n <= 100) {
// 3. 重复执行的代码,每次把 n 的值叠加到 sum 变量身上
sum = sum + n // 简写成 sum += n
// 4. 自身改变,就是为了让自身 +1
// 有一个叫做 ++ 的运算符, 只要执行了, 必然会让自身的值 +1
// 你写 n++ 或者 ++n 都是可以的, 因为我们不是为了让他参与运算
// 只是为了改变 n 的值
n++
}
console.log(sum) // 5050
// 只有当 n === 101 的时候才会结束循环
// 现在这个位置是循环结束以后的位置, n 一定是 101
console.log(n)
- while 循环小案例2
/*
案例 - 根据三个数字, 分别表示 年月日, 来计算出是当年的第几天
准备三个变量
比如:
var year = 2008 用户输入的年份, 用来判断是平年还是闰年
var month = 3 用户输入的月份, 用来判断叠加几个月的整月天数
var date = 1 用户输入的几号, 用来把当月的零散天数叠加起来
输出结果, 就是 本年的第 61 天
*/
// 准备三个变量接收信息
var year = prompt('年份') - 0
var month = prompt('月份') - 0
var date = prompt('几号') - 0
// 别管有是第几天, 我总要把一些数字叠加起来
// 默认是今年的第 0 天
var num = 0
// 不管你是几月, 我都要把当月的天数叠加到 num 上
// 如果你是 10 号, 那么我的 num 就要是 10
// 如果你是 15 号, 那么我的 num 就要是 15
num = num + date
// 此时已经把当月的天数叠加起来了, 剩下的就是去叠加整月的天数了
// 根据 month 信息来叠加整月的天数了
// 如果是 2 月 叠加一个 1 月的天数
// 如果是 3 月 叠加一个 1 月 叠加一个 2 月的天数
// 如果是 12 月 叠加 1 ~ 11 月的整月天数
switch (month) {
case 12:
num = num + 30
case 11:
num = num + 31
case 10:
num = num + 30
case 9:
num = num + 31
case 8:
num = num + 31
case 7:
num = num + 30
case 6:
num = num + 31
case 5:
num = num + 30
// 如果是 4 月, 要叠加 3 月的整月天数, 就是 31 天
// 因为没有 break, 会向下穿透, 继续去叠加 2 月份的天数和 1 月分的天数
case 4:
num = num + 31
// 如果是 3 月, 要叠加 2 月的整月天数, 就是 28 天
// 因为没有 break 会向下穿透, 继续去叠加 1 月的整月天数, 就是 31 天
case 3:
// num = num + 28
// 这里叠加的是 2 月分的天数, 要在这里根据 年 来判断加 18 天还是 29 天
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
num = num + 29
} else {
num = num + 28
}
case 2: // 如果是 2 月, 要叠加 1 月的整月天数, 就是 31 天
num = num + 31
}
// 等着一段 switch 执行完毕, 那么月份和 天数就都叠加再一起了
console.log('是 ' + year + ' 年的第 ' + num + ' 天')
do … while 循环
// 初始化
var n = 10
do {
console.log(n) // 10
n++
} while (n <= 3)
- do … while 循环小案例
/*
do while 循环小案例
出现一个输入框, 让用户输入内容
只要不符合我确定的内容, 那么就再次弹出
如果符合我输入的内容了, 那么就结束了
*/
do {
var result = prompt('你爱不爱我 ?')
} while (result !== 'yes')
// 只要你写的不是 yes 就会再次弹出来
// 直到你写了 yes 就结束了
alert('我也爱你 ! ^_^')
for 循环
for (var i = 0; i < 3; i++) { console.log(i) }
/*
使用 for 循环求 1 ~ 100 的和
需要利用 for 循环出现 1 ~ 100 的每一个数字
*/
// 提前准备一个变量接收结果
var sum = 0
for (var i = 1; i <= 100; i++) {
// console.log(i) // i 出现的就是 1 ~ 100 的每一个数字
// 再循环里面把每一个数字叠加起来
sum += i
}
console.log(sum)
/*
for 循环小案例
再控制台输出 1 ~ 100 之间所有的 3 的倍数
1. 要有一个循环, 能得到 1 ~ 100 之间所有的数字
2. 再循环里面进行判断
=> 如果是 3 的倍数就再控制台输出
=> 如果不是 3 的倍数, 那么就什么也不做
*/
for (var i = 1; i <= 100; i++) {
// 判断, 这个数字是不是 3 的倍数
if (i % 3 === 0) {
// 表示循环的本次 i 能倍 3 整除, 就要输出一下
console.log(i)
}
}
/*
寻找水仙花数字 - 三次自幂数
前提: 是一个三位数字
当数字的每一位数字的三次方之和, 刚好和这个数字一样
我们就叫这个数字位水仙花数字, 三次自幂数
例子: 123
1 2 3
如果 1 * 1 * 1 + 2 * 2 * 2 + 3 * 3 * 3
刚好得到 123 那么就是水仙花数字
如果得不到 123 就不是水仙花数字
寻找 100 ~ 999 之间的所有的水仙花数字
需要一个循环, 得到 100 ~ 999 之间的所有数字
*/
// 1. 得到 100 ~ 999 之间的所有数字
for (var i = 100; i <= 999; i++) {
// console.log(i) // i 得到的就是 100 ~ 999 之间的所有数字
// 2. 把每一个数字拆开
// 拆开的是循环中的每一个数字, 所以一定要写在里面
var a = parseInt(i / 100)
var b = parseInt(i % 100 / 10)
var c = i % 10
// 3. 判断三个数字的三次方之和 是不是 和这个数字一样
if (a**3 + b**3 + c**3 === i) {
// 表示三个数字的三次方之和刚好和这个数字一样
console.log(i + ' 是水仙花数字')
}
}
/*
作业三: 找到 1000 ~ 2000 之间的所有闰年, 每四个一行输出再页面上
1. 找到 1000 ~ 2000 之间的所有数字
2. 判断每一个数字是不是闰年, 如果是就输出再页面上
3. 我们要记录输出的次数, 每达到四次的时候输出一个换行
提前准备一个变量为 0
每输出一个就让这个变量 +1
让他来当作一个计数器使用
*/
// 3. 提前准备一个计数器变量
var count = 0
// 1. 找到 1000 ~ 2000 所有的数字
for (var i = 1000; i <= 2000; i++) {
// 2. 判断一个数字是不是闰年
if (i % 4 === 0 && i % 100 !== 0 || i % 400 === 0) {
// 2-2. 输出再页面上
document.write(i + ' ')
// if 条件里面表示是闰年, 表示我要输出了一个
// 只要输出一个就让 count + 1, 计数器多一个
count++
// 3. 通过判断 count 是不是 4 的倍数来决定是不是要输出换行
if (count % 4 === 0) {
// 3-2. 输出一个换行标识
document.write('</br>')
}
}
}
/*
循环嵌套
就是再循环里面再次写一个循环
注意: 里外层循环变量不要一样
*/
for (var i = 1; i <= 5; i++) {
for (var j = 1; j <= 7; j++) {
// 里层循环, 会随着外层循环一遍一遍的执行
// 当 i === 0 的时候, 会完整执行一遍里层循环 j === 0 1 2
// 当 i === 1 的时候, 会完整执行一遍里层循环 j === 0 1 2
// 当 i === 2 的时候, 会完整执行一遍里层循环 j === 0 1 2
console.log(i + ' --- ' + j)
}
}
/*
九九乘法表
行 列
1 ---- 1
2 ---- 2
3 ---- 3
4 ---- 4
如果使用循环嵌套
外层跑一圈的时候, 里层也跑一圈
外层跑两圈的时候, 里层也跑两圈
外层跑多少圈, 里层就跑多少圈
*/
// 外层循环
for (var i = 1; i <= 9; i++) {
// 当 i === 1 的时候, 表示第一行, 里层循环循环 1 次
// 当 i === 2 的时候, 表示第二行, 里层循环循环 2 次
// 当 i === 9 的时候, 表示第九行, 里层循环循环 9 次
// i 是几里层循环就循环多少次
// 里层循环表示多少列
for (var j = 1; j <= i; j++) {
// 直接输出再页面上
document.write(j + ' * ' + i + ' = ' + i * j + '    ')
}
// 每一行的最后面要输出一个换行
document.write('</br>')
}
/*
杨辉三角形
就是为了练习循环嵌套, 再页面上打印一个由 * 组成的三角形
*
* *
* * *
* * * *
* * * * *
* * * * * *
* * * * * * *
* * * * * * * *
* * * * * * * * *
需要一个循环嵌套
第一行是一个, 第二行是两个
第几行就是几个
*/
for (var i = 1; i <= 9; i++) {
// 里层循环循环多少次由外层循环决定
for (var j = 1; j <= i; j++) {
document.write('* ')
}
document.write('</br>')
}
/*
换成右上直角三角形
*********
********
*******
******
*****
****
***
**
*
分析三角形
第 1 行, 1 个空格, 9 个星号, 带一个换行
第 2 行, 2 个空格, 8 个星号, 带一个换行
第 3 行, 3 个空格, 7 个星号, 带一个换行
第 9 行, 9 个空格, 1 个星号, 带一个换行
*/
// 外层循环, 表示第几行
for (var i = 1; i <= 9; i++) {
// 先输出对应的空格
// i 是几 就输出几个 空格
for (var j = 1; j <= i; j++) {
// i === 1 的时候, j 1 ~ 1 就是 1 次
// i === 2 的时候, j 1 ~ 2 就是 2 次
document.write(' ')
}
// 再输出对应的星号
// 当 i === 1 的时候需要 9 个
for (var k = i; k <= 9; k++) {
// 当 i === 1 的时候, k 1 ~ 9 一共 9 次
// 当 i === 2 的时候, k 2 ~ 9 一共 8 次
document.write('*')
}
// 再输出一个换行
document.write('</br>')
}
/*
判断一个数字是不是质数
质数:
一个数字, 从 1 ~ 自己
除了 1 和 自己 其他的数字都不能整除
那么整个数字就是制数
例子: 7
除了 1 和 7 以外, 2 3 4 5 6
7 / 6 不能整除
7 / 5 不能整除
7 / 4 不能整除
7 / 3 不能整除
7 / 2 不能整除
我们就说 7 是一个质数
1. 先准备一个数字
var n = 7
2. 循环, 从 2 ~ 本身-1
因为不需要管 1 和 自己本身
for (var i = 2; i < n; i++) {}
3. 在循环里面分别判断每一个数字的取余是不是得到 0
一旦得到 0 就表示整除了, 就不是质数了
直到循环结束, 都没有整除的, 那么就是一个质数
判断一个数字不是质数, 可以在循环中确定
判断一个数字是质数, 必须要等到循环结束才能确定
比如 9
当 9 % 2 的时候确实不是 0 但是我们不能这个时候就说他是质数
*/
// 准备数字
var n = 9
// 提前准备一个变量作为假设
var flag = true // 假设这个数字是一个质数
// 2. 循环从 2 到自己本身 -1
for (var i = 2; i < n; i++) {
// 3. 判断是不是质数, 就是判断取余是不是得到 0
if (n % i === 0) {
// 表示 7 和 2 3 4 5 6 中的某一个取余得到 0 了
// 表示整除了, 就肯定不是质数了
flag = false // 把我的假设变成否定
// 只要你和任何一个数字取余得到 0 了, 后面的就不需要了
break
}
}
// 代码执行到这个为止, 才表示循环结束了
// 当循环结束以后, 如果 flag === true
// 表示循环中的每一次 if 条件都不成立
// 表示每一个数字都不能整除
// 就是一个质数
// 当循环结束以后, 如果 flag === false
// 表示循环中至少有一次 if 条件成立了
// 表示至少有一个数字是整除了
// 就不是一个质数了
if (flag === true) { // 只有当 flag === true 的时候才能满足条件
console.log(n + ' 是质数')
} else {
console.log(n + ' 不是质数')
}
break 关键字
-
break是使用在循环里面的关键字
-
作用：就是用来打断循环，只要代码在循环里面的时候，执行到了break这个关键字，那么直接跳出循环，不管循环是不是结束了，都强行结束了。
for (var i = 1; i <= 10; i++) {
console.log('我吃了第 ' + i + ' 个包子')
// 判断当吃完第六个的时候, 后面的就都不吃了
if (i === 6) {
console.log('我吃饱了, 后面的不吃了')
break
}
}
continue 关键字
-
continue是使用在循环里面的关键字
-
作用：
- 结束循环的本次，进入下一次
- 当代码在循环里面的时候，遇到continue关键字，那么continue关键字后面的代码就不在继续执行了，直接进行 i++ 去到循环的下一次
-
总结：
- break 是在循环里面直接结束整个循环的关键字
- continue 是在循环里面结束循环的本次, 直接进入下一次循环的关键字
for (var i = 1; i <= 10; i++) {
// 第五个掉地上了
if (i === 5) {
console.log('这个包子掉地上了, 不吃了')
continue
}
console.log('我吃的第 ' + i + ' 个包子')
}
扫一扫
776
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
