js循环语句
1. 循环结构介绍
- 循环结构的作用: 重复执行一段代码
- 构成:
- 初始条件
- 条件判断
- 循环体代码
- 条件变化
在每个编程语言中都会有循环结构,本文主要介绍while、do..while、for
三种循环结构,以及continue、break
在循环中的作用。
2. 三种循环结构
2.1 while循环
语法格式
// 初始条件
var n = 0
// 条件判断
while(n<=10){
// 循环体代码
console.log(n)
// 条件变化
n++
}
以上是一个简单的while循环结构:
这里定义了一个初始条件n = 0[并不是固定写法,可根据需求来写]
,在while后的小括号中写判断条件,这里条件为n<=10[并不是固定写法,可根据需求来写]
。循环体代码是会重复执行的部分,最后进行条件变化[每次变化加1]
。最终运行效果如下图:
2.2 do…while循环
语法格式
// 初始条件
var n = 0
do{
// 循环体代码
console.log(n)
// 条件变化
n++
}while(n<=10) // 条件判断
以上是一个简单的while循环结构:
这里定义了一个初始条件n = 0[并不是固定写法,可根据需求来写]
,在while后的小括号中写判断条件,这里条件为n<=10[并不是固定写法,可根据需求来写]
。循环体代码是会重复执行的部分,最后进行条件变化[每次变化加1]
。最终运行效果如下图:
这里发现while、do…while的效果好像是一样的,那么两者到底有什么区别呢?
我们将上面的程序更改一下,将判断条件更改,观察以下代码会怎么执行
// 初始条件
var n = 0
// 条件判断
while(n<0){
// 循环体代码
console.log('我是while结构')
// 条件变化
n++
}
// 初始条件
var n = 0
do{
// 循环体代码
console.log('我是do..while结构')
// 条件变化
n++
}while(n<0) // 条件判断
执行结果如下:
我们可以发现,当第一次判断条件都不满足的时候,do…while仍然将循环体的代码执行了一次。即区别在于
不管什么情况,do..while循环总会至少执行一次循环体内的代码
2.3 for 循环
语法格式
for(var n=1; n<=10;n++){
console.log(n)
}
步骤 | 作用 |
---|---|
1 | 设置初始条件 |
2 | 条件判断 |
3 | 循环体代码 |
4 | 条件变化 |
for循环的执行顺序为1 -> 2 -> 3 -> 4,上面已经分析了每个步骤的含义这里不在详细分析
3.continue、break在循环中的作用
在上两小节介绍了三种循环的基本结构,本小节结合分支语句写一些demo,来帮助我们理解break、continue在循环中的作用以及循环中需要注意的事项。
3.1 实现1-100偶数的累加和
// 常规写法
var sum = 0
for (var i = 1; i <= 100; i++) {
if (i % 2 == 0) {
sum += i
}
}
console.log('常规:'+sum)
// 利用continue实现
var sum = 0
for (var i = 1; i <= 100; i++) {
if (i % 2 != 0) {
continue
}
sum += i
}
console.log('continue:'+sum)
// 利用条件变化实现
var sum = 0
for (var i = 0; i <= 100; i+=2) {
sum += i
}
console.log('条件变化实现:'+sum)
运行结果:
我们发现,三种均实现了需求。
通过第二种实现方式与第一种对比可以看出在不满足偶数的时候continue会将当前的循环轮数跳过,不在执行continue之后的代码,直接进入条件变化然后进行条件判断进入下一轮循环
3.2 实现一个无限次的猜数游戏
想一下怎么实现无限次循环? 怎么结束无限次循环?
//定义一个结果
var res = 88
// 无限循环
while(true){
var num = Number(prompt('请输入您猜的数字(1-100)'))
if(num > res){
alert('大了')
}else if(num < res){
alert('小了')
}else{
alert('猜对了')
break //猜对了结束
}
}
通过上面的代码可以发现将判断条件写为 true
的时候程序会一直执行,当我们猜中数字弹出猜对了,程序向下执行遇到break,循环结束所以break作用是结束循环
。如果将break换成continue会发生什么情况呢?答案是不论你输入什么数字,程序都会一直让你猜下去形成死循环。
4. 总结
在使用循环的时候需要注意,当遇到需要重复进行计算或者判断的时候考虑使用循环,循环一般需要具有四个结构且不可以构成死循环结构(除非有特殊要求)
while与for循环应重点掌握,do…while了解即可。当循环条件与结束条件明确时推荐使用for循环,循环条件与结束条件不明确时推荐使用while循环。
continue: 用于跳过本次循环,即不执行continue后的代码进入下一轮
break: 用于结束循环。