while循环

循环作用:重复执行一些操作,如while循环 for循环.

while循环

语法:
while (循环条件) {
    重复执行的代码(循环体)
}

跟if语句很像，都要满足小括号里的条件为true才会进入 循环体 执行代码

while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出

循环三要素:

1.变量起始值

2.终止条件(没有终止条件，循环会一直执行，造成死循环)

3.变量变化量（用自增或者自减)

    // 1. 变量的起始值
    let i = 1
    // 2. 终止条件
    while (i <= 3) {
      document.write('我要循环三次 <br>')
    // 3. 变量的变化量
      i++
    }

思考:能不能改进，让用户输入打印输出的个数呢？

 // 1. 变量的起始值
    let end = +prompt('请输入次数:')
    let i = 1
    // 2. 终止条件
    while (i <= end) {
      document.write('我要循环三次 <br>')
      // 3. 变量的变化量
      i++
    }

循环练习

1 页面输出1~100 累加和

   let i = 1  // 变量的起始值
     let sum = 0  // 累加和变量
     while (i <= 100) {
       // 把i 累加到 sum 里面
        //sum = sum + i
        sum += i
        i++
    }
    console.log(sum) // 5050

1. 页面输出1~100 偶数和

 let i = 1
    let sum = 0
    while (i <= 100) {
      // 筛选偶数 只有偶数才累加
      if (i % 2 === 0) {
        sum = sum + i
      }
      // 每次循环都要自加
      i++
    }
    console.log(sum)

循环退出

continue 退出本次循环，一般用于排除或者跳过某一个选项的时候, 可以使用continue

break 退出整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用

// break    
 let i = 1
    while (i <= 10) {
      console.log(i)
      //break:整个循环结束，立即执行循环后面的代码
      if (i === 5) {
        break  // 退出循环
      }
      i++
   }

// continue 
let i = 1
    while (i <= 10)      
      if (i === 5) {
        i++
        continue
      }
      i++
​    }

页面弹框案例

需求：页面弹出对话框，‘你爱我吗’，如果输入‘爱’，则结束，否则一直弹出对话框

分析：

①：循环条件永远为真，一直弹出对话框

②：循环的时候，重新让用户输入

③：如果用户输入的是： 爱，则退出循环 （break）

while (true) {
      let str = prompt('你爱我吗')
      // 退出条件 爱
      if (str === '爱') {
        break
      }
    }

简易ATM机

需求：用户可以选择存钱、取钱、查看余额和退出功能

分析：

①：循环的时候，需要反复提示输入框，所以提示框写到循环里面

②：退出的条件是用户输入了 4，如果是4，则结束循环，不在弹窗

③：提前准备一个金额预先存储一个数额

④：取钱则是减法操作， 存钱则是加法操作，查看余额则是直接显示金额

⑤：输入不同的值，可以使用switch来执行不同的操作

  // 1. 开始循环 输入框写到 循环里面
    // 3. 准备一个总的金额 要写到循环的外面,不然每次循环都会重置
    let money = 100
    while (true) {
      let re = +prompt(`
        请您选择操作：
        1.存钱
        2.取钱
        3.查看余额
        4.退出
        `)
      // 2. 如果用户输入的 4 则退出循环， break  写到if 里面，没有写到switch里面， 因为4需要break退出循环
      if (re === 4) {
        break
      }
      // 4. 根据输入做操作
      switch (re) {
        case 1:
          // 存钱
          let cun = +prompt('请输入存款金额')
          money = money + cun
          //  money += +prompt('请输入存款金额')
          break
        case 2:
          // 存钱
          let qu = +prompt('请输入取款金额')
          money = money - qu
          // money -= +prompt('请输入存款金额')
          break
        case 3:
          // 存钱
          alert(`您的银行卡余额是${money}`)
          break
      }
    }

if 多分支和switch的区别

if 多分支语句和 switch的区别：

1. 共同点

   • 都能实现多分支选择， 多选1

   • 大部分情况下可以互换

2. 区别：

   • switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，通常用于范围判断(大于，等于某个范围)。

   • switch 语句进行判断后直接执行到程序的语句，效率更高，而if…else语句有几种判断条件，就得判断多少次

   • switch 一定要注意 必须是 === 全等，一定注意 数据类型，同时注意break否则会有穿透效果

   • 结论：

     • 当分支比较少时，if…else语句执行效率高。

     • 当分支比较多时，switch语句执行效率高，而且结构更清晰。