JavaScript -- 三种循环语句的介绍及示例代码

循环语句

通过循环语句可以使指定的代码反复执行

JS中一共有三种循环语句

• while语句
• do-while语句
• for语句

通常编写一个循环，要有三个要件

1. 初始化表达式（初始化变量）
2. 条件表达式（设置循环运行的条件）
3. 更新表单式（修改初始化变量）

1 While循环

• 语法：

  while(条件表达式){
  	语句...
  }
  1
  2
  3

• 执行流程：

  • while语句在执行时，会先对条件表达式进行判断，
    • 如果结果为true，则执行循环体，执行完毕，继续判断
    • 如果为true，则再次执行循环体，执行完毕，继续判断，如此重复
    • 知道条件表达式结果为false时，循环结束

死循环：当一个循环的条件表达式恒为true时，这个循环就是一个死循环，会一直执行（慎用）

let i = 0		// 初始化表达式
while(i < 5){		// 条件表达式
    console.log(i)
    i++			// 更新表达式
}

// 上面的循环等价于：
let i = 0
while(1){
    console.log(i)
    i++

    if(i >= 5){
        break
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

练习：假设银行存款的年利率为5%，问1000块存多少年可以变成5000块

// 创建一个变量表示钱数
let money = 1000

// 创建一个计数器来记录循环执行的次数
let year = 0

// 编写循环，计算存款的年数
while(money < 5000){
    money *= 1.05 // 循环没执行一次，就相当于钱存了一年
    year++
}

console.log(`需要存${year}年，最终的钱数为${money}元！`)
1
2
3
4
5
6
7
8
9
10
11
12
13

2 do-while循环

• 语法

  do{
      语句...
  }while(条件表达式)
  1
  2
  3

• 执行顺序：

  • do-while语句在执行时，会先执行do后的循环体，执行完毕后，会对while后的条件表达式进行判断
    • 如果为false，则循环终止
    • 如果为true，则继续执行循环体，以此类推

• 和while的区别：

  • while语句是先判断再执行
  • do-while语句是先执行再判断
  • 实质的区别：
    • do-while语句可以确保循环至少执行一次

let i = 10
do{
    console.log(i)
    i++
}while(i < 5)
    
// 等价以下while循环
let i = 10
while(i < 5){
    console.log(i)
    i++
}
1
2
3
4
5
6
7
8
9
10
11
12

3 for循环

for循环和while没有本质区别，都是用来反复执行代码

不同点就是语法结构，for循环更加清晰

• 语法：

  for(①初始化表达式; ②条件表达式; ④更新表达式){
  	③语句...
  }
  1
  2
  3

• 执行流程：
  ① 执行初始化表达式，初始化变量
  ② 执行条件表达式，判断循环是否执行（true执行，false终止）
  ③ 判断结果为true，则执行循环体
  ④ 执行更新表达式，对初始化变量进行修改
  ⑤ 重复②，直到判断为false为止

• 初始化表达式，在循环的整个的生命周期中只会执行1次

• for循环中的三个表达式都可以省略

  • 使用let在for循环的()中声明的变量是局部变量，只能在for循环内部访问
  • 使用var在for循环的()中声明的变量可以在for循环的外部访问

• 创建死循环的方式：

  • while(1){}
  • for(;;){}

for(let i=0; i<5; i++){
    console.log(i)
}
1
2
3

4 嵌套循环

在循环中也可以嵌套其他的循环

示例一：

for (let i = 0; i < 5; i++) {
    for (let j = 0; j < 5 - i; j++) {
        document.write("*  ")
    }

    document.write("
")
}
1
2
3
4
5
6
7

示例二：

for (let i = 0; i < 5; i++) {
    for (let j = 0; j < i + 1; j++) {
        document.write("*  ")
    }

    document.write("
")
}
1
2
3
4
5
6
7

示例三：

for (let i = 0; i < 5; i++) {
    // 创建一个内层循环来控制图形的宽度
    for (let j = 0; j < 5; j++) {
        document.write("*  ")
    }

    document.write("
")
}
1
2
3
4
5
6
7
8