
<body>
  <script> 
    // 算术运算符
    console.log(1 + 2 * 3 / 2) //  4 
    let num = 10
    console.log(num + 10)  // 20
    console.log(num + num)  // 20

    // 1. 取模(取余数)  使用场景：  用来判断某个数是否能够被整除
    console.log(4 % 2) //  0  
    console.log(6 % 3) //  0
    console.log(5 % 3) //  2
    console.log(3 % 5) //  3

    // 2. 注意事项 : 如果我们计算失败，则返回的结果是 NaN (not a number)
    console.log('pink老师' - 2)
    console.log('pink老师' * 2)
    console.log('pink老师' + 2)   // pink老师2
  </script>
</body>

赋值运算符

= 是对变量进行赋值的运算符

= 将等号右边的值赋予给左边, 要求左边必须是一个容器(变量)

运算符	作用	用法举例	等效表达式
+=	加法赋值	a += b	a = a + b
-=	减法赋值	a -= b	a = a - b
*=	乘法赋值	a *= b	a = a * b
/=	除法赋值	a /= b	a = a / b
%=	取余赋值	a %= b	a = a % b

语法格式案例

赋值运算符


<body>
  <script> 
    let num = 1

    // 新值等于旧值+1
    // num = num + 1

    // 采取赋值运算符
    // num += 1

    num += 3
    console.log(num)
  </script>
</body>

自增/自减运算符

根据所需表达式/参数的个数，分为一元运算符、二元运算符、三元运算符

例如：
let num = 10 + 20
let num = 1 num = num + 1 // num += 1
均为二元运算符
拓展阅读：运算符可以是一元、二元或三元的
一元运算符有1个操作数。例如，递增运算符"++"就是一元运算符
二元运算符有2个操作数。例如，除法运算符"/"有2个操作数
三元运算符有3个操作数。例如，条件运算符"?:"具有3个操作数
运算符的行为还可能因所提供的操作数的数量而异减法运算符-既是一元运算符又是二元运算符对于减法运算符，如果只提供一个操作数，则该运算符会对操作数取反并返回结果如果提供两个操作数，则减法运算>符返回这两个操作数的差
// 将减法运算符用作一元运算符(取反运算符)
trace(-5); // -5
// 将减法运算符用作二元运算符
trace(9-3); // 6

自增/自减运算符为一元运算符

场景：常用于计数来使用

符号	作用	说明
++	自增	变量自身的值加1，例如: x++
--	自减	变量自身的值减1，例如: x--

只有变量能够使用自增和自减运算符

++在前和++在后在单独使用时二者并没有差别，而且一般开发中我们都是独立使用
++在后，即后置自增，使用更多
如果在自增的基础上，再参与多元运算，会有区别

前置自增减：先自元增减，再参与多元运算

let i = 1
console.log(++i + 2)

//打印结果是 4
//i在参与多元运算前，i先自加1，变成2以后，再与2相加

后置自增减：先参与多元运算，最后自增加

let i = 2
console.log(i++ + 3)

//打印结果是 5
//i先参与多元运算，i+3，变成5以后，结果再参与下一轮运算
//由于没有下一轮运算，这里直接就打印结果了，所以就是5，相当于自增在本轮运算不生效

后置自增使用更多，因为很多时候是跑完了函数后，再自增跑下一个周期，参与下一轮运算

例如以下Java案例 int a = 3;
int b = a++; //执行完后,b=3。先给b赋值，再自增。
int c= ++a; //执行完后,c=5。先自增,再给b赋值

在本轮运算的结果，不自增

语法格式案例

自增减一元运算符


<body>
  <script> 
    // let num = 10
    // num = num + 1
    // num += 1

    // // 1. 前置自增
    let a = 1
    ++a
    console.log(a)  //结果是2

    let b = 1
    console.log(++b + 1)   //结果是3

    // 2. 后置自增
    let c = 1
    c++
    console.log(c)   //结果是2

    let d = 6
    console.log(d++ + 3)   //结果是9

    let y = 1
    // console.log(y++)
    // console.log(y + 2)
    console.log(y++ + 2)   //结果是3

    let x = 1
    console.log(x)    //结果是1
    x++
    console.log(x)    //结果是2

    // 了解 
    let i = 1
    console.log(i++ + ++i + i)  //结果是7

    //说明：
    //i++是第二轮运算的时候才加入，第一轮运算是 ++i + i，即 2+1=3
    //第二轮运算是 3++ + 3 ，即 4+3=7
  </script>
</body>

比较运算符

使用场景：比较两个数据大小、是否相等，根据比较结果返回一个布尔值（true / false）

运算符	作用
>	左边是否大于右边
<	左边是否小于右边
>=	左边是否大于或等于右边
<=	左边是否小于或等于右边
===	左右两边是否`类型`和`值`都相等（重点）
==	左右两边`值`是否相等
!=	左右值不相等
!==	左右两边是否不全等

比较运算符的比较结果：为boolean类型，即只会得到 true 或 false

对比：

= 单等是赋值
== 是判断 //只要求值相等，不要求数据类型一样即可返回true
=== 是全等 //要求值和数据类型都一样返回的才是true

字符串比较，是比较的字符对应的ASCII码

从左往右依次比较
如果第一位一样再比较第二位，以此类推

NaN不等于任何值，包括它本身

涉及到"NaN“ 都是false

尽量不要比较小数，因为小数有精度问题

不同类型之间比较会发生隐式转换

最终把数据隐式转换转成number类型再比较
开发中，判断是否相等，我们更应该严谨进行准确的比较，使用 === 或者 !==

语法格式案例

比较运算符


<body>
  <script> 
    console.log(3 > 5)
    console.log(3 >= 3)
    console.log(2 == 2)
    // 比较运算符有隐式转换 把'2' 转换为 2  双等号 只判断值
    console.log(2 == '2')  // true

    // console.log(undefined === null)
    // === 全等 判断 值 和 数据类型都一样才行
    // 以后判断是否相等 请用 ===  
    console.log(2 === '2')
    console.log(NaN === NaN) // NaN 不等于任何人，包括他自己
    console.log(2 !== '2')  // true  
    console.log(2 != '2') // false 
    console.log('-------------------------')
    console.log('a' < 'b') // true
    console.log('aa' < 'ab') // true
    console.log('aa' < 'aac') // true
    console.log('-------------------------')
  </script>
</body>

逻辑运算符

使用场景：

逻辑运算符用来解决多重条件判断
可以把多个布尔值放到一起运算，最终返回一个布尔值

符号	名称	日常读法	特点	口诀
&&	逻辑与	并且	符号两边有一个假的结果为假	一假则假
\|\|	逻辑或	或者	符号两边有一个真的结果为真	一真则真
!	逻辑非	取反	true变false false变true	真变假，假变真

A	B	A && B	A \|\| B	!A
false	false	false	false	true
false	true	false	true	true
true	false	false	true	false
true	true	true	true	false

逻辑运算符的比较结果：为boolean类型，即只会得到 true 或 false

语法格式案例

逻辑运算符


<body>
  <script> 
    // 逻辑与 一假则假
    console.log(true && true)
    console.log(false && true)
    console.log(3 < 5 && 3 > 2)
    console.log(3 < 5 && 3 < 2)
    console.log('-----------------')

    // 逻辑或 一真则真
    console.log(true || true)
    console.log(false || true)
    console.log(false || false)
    console.log('-----------------')

    // 逻辑非  取反
    console.log(!true)
    console.log(!false)
    console.log('-----------------')

    let num = 6
    console.log(num > 5 && num < 10)
    console.log('-----------------')
  </script>
</body>

运算符优先级

一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高

逻辑运算符优先级：！> && > || （非>与>或）

优先级	运算符名称	符号及类型内次序	备注
1	小括号	()
2	一元运算符	++ -- !	自增、自减、非，同级
3	算术运算符	先 * / % 后 + -	先乘除余同级，后加减
4	关系运算符	> >= < <=	大于、大于等于、小于、小于等于，同级
5	相等运算符	== != === !==	值相等、值不等、全等、不全等，同级
6	逻辑运算符	先! 然 && 后 \|\|	先取反，然逻辑与，后逻辑或
7	赋值运算符	=	右边赋值给左边
8	逗号运算符	,	通常`,`号起分割，逗号两边元素并列

语法格式案例

运算符优先级体验


<body>
  <script> 
    //判断一个数是4的倍数，且不是100的倍数
    //需求：用户输入一个，判断这个数能被4整除，但是不能被100整除，满足条件，页面弹出true，否则弹出false

    // 1. 用户输入
    let num = +prompt('请输入一个数字:')
    // 2. 弹出结果
    alert(num % 4 === 0 && num % 100 !== 0)

    //先算 > < == 再算 &&  得出 a = false
    let a = 3 > 5 && 2 < 7 && 3 == 4
    console.log(a); 

    //先算 <= > ! 再算 || 得出 b = true
    let b = 3 <= 4 || 3 > 1 || 3 != 2
    console.log(b);

    //先算 === 得出 c = false
    let c = 2 === "2"
    console.log(c); 

    //先算 ! 再算 &&  再算|| 即 d= true||true&&false = true||false = true
    let d = !c || b && a
    console.log(d);

  </script>
</body>

算术运算符
- + 加法
- - 减法
- * 乘法
- / 除法
- % 取余
- ++ 自增
- -- 自减
赋值运算符
- = 赋值
- += 加并赋值
- -= 减并赋值
- *= 乘并赋值
- /= 除并赋值
- %= 取余并赋值
比较运算符
- == 等于
- != 不等于
- === 严格等于
- !== 严格不等于
- < 小于
- <= 小于或等于
- > 大于
- >= 大于或等于
逻辑运算符
- && 与（AND）
- || 或（OR）
- ! 非（NOT）
位运算符
- & 与（AND）
- | 或（OR）
- ^ 异或（XOR）
- ~ 非（NOT）
- << 左移
- >> 右移
条件运算符（三元运算符）
- condition ? trueValue : falseValue
其他运算符
- ; 分号（语句分隔符）
- , 逗号（值分隔符）
- . 句点（对象属性访问符）
- [] 方括号（数组元素访问符）
- () 圆括号（函数调用符）
- {} 花括号（对象字面量符）

语句

表达式和语句

表达式：表达式是可以被求值的代码 JavaScript 引擎会将其计算出一个结果

语句：语句是一段可以执行的代码比如： prompt() 可以弹出一个输入框，还有 if语句 for 循环语句等等

区别：

表达式：可以被求值的代码，写在赋值语句的右侧，并将其计算出一个结果，给到左侧
语句：一段可以执行的代码，是一个行为，例如分支语句，循环语句
语句不一定有值，所以比如 alert() for和break 等语句就不能被用于赋值

程序三大流程控制语句：

写几句就从上往下执行几句，这种叫顺序结构
有的时候要根据条件选择执行代码，这种就叫分支结构
某段代码被重复执行，就叫循环结构

分支语句

分支语句可以根据条件判定真假，来选择性的执行想要的代码

分支语句包含：

if分支语句（重点）
三元运算符
switch语句

if语句有三种使用：单分支、双分支、多分支

if 单分支语句

只有一个条件，返回 true or false

if(条件表达式) {
  // 满足条件要执行的语句
}

为 true 时，进入大括号里执行代码
为 false，则不执行大括号里面代码

小括号内的条件结果是布尔值
小括号内的结果若不是布尔类型时，会发生类型转换为布尔值，类似Boolean()

如果大括号只有一个语句，大括号可以省略，但是不提倡，老实写上

语法格式案例

if单分支语句


<body>
  <script> 
    // 单分支语句
    // if (false) {
    //   console.log('执行语句')
    // }
    // if (3 > 5) {
    //   console.log('执行语句')
    // }
    // if (2 === '2') {
    //   console.log('执行语句')
    // }
    //  1. 除了0 所有的数字都为真
    //   if (0) {
    //     console.log('执行语句')
    //   }
    // 2.除了 '' 所有的字符串都为真 true
    // if ('pink老师') {
    //   console.log('执行语句')
    // }
    // if ('') {
    //   console.log('执行语句')
    // }
    // // if ('') console.log('执行语句')

    // 1. 用户输入
    let score = +prompt('请输入成绩')
    // 2. 进行判断输出
    if (score >= 700) {
      alert('恭喜考入黑马程序员')
    }
    console.log('-----------------')

  </script>
</body>

if 双分支语句

如果有两个条件的时候，可以使用 if + else 双分支语句

if (条件表达式){
  // 满足条件要执行的语句
} 
else {
  // 不满足条件要执行的语句
}

//

if (condition){
  // dosomething
} 
else {
  // do something else
}

满足条件时，进入if大括号里执行代码
不满足条件，则执行else大括号里面代码

小括号内的条件结果是布尔值
小括号内的结果若不是布尔类型时，会发生类型转换为布尔值，类似Boolean()

语法格式案例

if双分支语句


<body>
  <script> 
    //案例1
    // 1. 用户输入
    let uname = prompt('请输入用户名:')
    let pwd = prompt('请输入密码:')
    // 2. 判断输出
    if (uname === 'pink' && pwd === '123456') {
      alert('恭喜登录成功')
    } else {
      alert('用户名或者密码错误')
    }

    //案例2
    // 1. 用户输入
    let year = +prompt('请输入年份')
    // 2. 判断输出
    if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
      alert(`${year}年是闰年`)
    } else {
      alert(`${year}年是平年`)
    }
  </script>
</body>

if 多分支语句

有多个条件，有多个结果时，使用 if + else if 双分支语句

if (条件表达式1){
  // 满足条件1要执行的语句代码1
} 
else if (条件表达式2) {
  // 满足条件2要执行的语句代码2
}
else if (条件表达式n) {
  // 满足条件n要执行的语句代码n
}
else {
  // 退出条件n+1要执行的语句代码n+1
}

先判断条件1，若满足条件1就执行代码1，其他不执行
若不满足则向下判断条件2，满足条件2执行代码2，其他不执行
若依然不满足继续往下判断，依次类推
可以写n个条件，一直判断完所有条件
若以上条件都不满足，执行else里的代码n+1

满足条件时，进入相应大括号里执行代码
不满足条件，则执行else大括号里面代码

小括号内的条件结果是布尔值
小括号内的结果若不是布尔类型时，会发生类型转换为布尔值，类似Boolean()

语法格式案例

if多分支语句

<body>
  <script> 
    // 1. 用户输入
    let score = +prompt('请输入成绩：')
    // 2. 判断输出
    if (score >= 90) {
      alert('成绩优秀，宝贝，你是我的骄傲')
    } else if (score >= 70) {
      alert('成绩良好，宝贝，你要加油哦~~')
    } else if (score >= 60) {
      alert('成绩及格，宝贝，你很危险~')
    } else {
      alert('成绩不及格，宝贝，我不想和你说话，我只想用鞭子和你说话~')
    }
  </script>
</body>

三元运算符（三元表达式）

使用场景：

一些简单的双分支，可以使用三元运算符（三元表达式）
写起来比 if else双分支更简单
一般用来取值

语法：

条件 ? 满足条件执行的代码 ： 不满足条件执行的代码

语法格式案例

三元表达式语句


<body>
  <script> 
    // 案例1
    // 三元运算符
    // 条件 ? 代码1 : 代码2
    // console.log(3 > 5 ? 3 : 5)
    // if (3 < 5) {
    //   alert('真的')
    // } else {
    //   alert('假的')
    // }
    // 3 < 5 ? alert('真的')  : alert('假的')

    let sum = 3 < 5 ? 3 : 5
    console.log(sum)

    //案例2
    // 三元运算符（三元表达式）
    // 1. 语法格式
    // 条件 ? 表达式1 : 表达式2 

    // 2. 执行过程 
    // 2.1 如果条件为真，则执行表达式1
    // 2.2 如果条件为假，则执行表达式2

    // 3. 验证
    // 5 > 3 ? '真的' : '假的'
    console.log(5 < 3 ? '真的' : '假的')

    // let age = 18 
    // age = age + 1
    //  age++

    // 1. 用户输入 
    let num = prompt('请您输入一个数字:')
    // 2. 判断输出- 小于10才补0
    // num = num < 10 ? 0 + num : num
    num = num >= 10 ? num : 0 + num
    alert(num)

    //案例3 求最大值
    // 1. 用户输入
    let num1 = +prompt('请您输入第一个数：')
    let num2 = +prompt('请您输入第二个数：')
    // 2. 判断输出-三元运算符
    // if (num1 > num2) {
    //   alert(num1)
    // } else {
    //   alert(num2)
    // }
    num1 > num2 ? alert(`最大值是: ${num1}`) : alert(`最大值是: ${num2}`)

    //案例4
    // let age = 18 
    // age = age + 1
    //  age++

    // 1. 用户输入 
    let num = prompt('请您输入一个数字:')
    // 2. 判断输出- 小于10才补0
    // num = num < 10 ? 0 + num : num
    num = num >= 10 ? num : 0 + num
    alert(num)

  </script>
</body>

三元表达式多条件嵌套写法

三元表达式语句

var num = prompt('查询快递，请输入1~4');
// 第一段如果num=1，则返回'已下单'，否则在:右边进行下一段判断，以此类推
var express_order = num == 1 ? '已下单' :  num == 2 ? '已付款' : num == 3 ? '已发货' : num == 4 ? '已收货' : '未查询到，不到1~4范围内';
// 弹窗
// alert(express_order);

switch语句

找到跟小括号里数据全等的case值，并执行里面对应的代码
若没有全等 === 的则执行default里的代码

语法：

switch (表达式或数据) {
  case 值1:
    代码1
    break

  case 值2:
    代码2
    break
  ...
  default:
    代码n
}

使用场景：

适合于有多个条件的时候，也属于分支语句
大部分情况下和 if多分支语句功能相同

注意：

switch case 语句一般用于等值判断，if适合于区间判断
switch case 一般需要配合 break 关键字使用没有break会造成case穿透
if 多分支语句开发要比switch更重要，使用也更多

语法格式案例

switch语句

<body>
  <script> 
    switch (2) {
      case 1:
        console.log('您选择的是1')
        break  // 退出switch
      case 2:
        console.log('您选择的是2')
        break  // 退出switch
      case 3:
        console.log('您选择的是3')
        break  // 退出switch
      default:
        console.log('没有符合条件的')
    }
  </script>
</body>

switch简单案例

<body>
  <script> 
    // 1.用户输入  2个数字 +  操作符号  + - *  / 
    let num1 = +prompt('请您输入第一个数字:')
    let num2 = +prompt('请您输入第二个数字:')
    let sp = prompt('请您输入 + - * / 其中一个:')
    // 2. 判断输出
    switch (sp) {
      case '+':
        alert(`两个数的加法操作是${num1 + num2}`)
        break
      case '-':
        alert(`两个数的减法操作是${num1 - num2}`)
        break
      case '*':
        alert(`两个数的乘法操作是${num1 * num2}`)
        break
      case '/':
        alert(`两个数的除法操作是${num1 / num2}`)
        break
      default:
        alert(`你干啥咧，请输入+-*/`)
    } 
  </script>
</body>

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

共同点
- 都能实现多分支选择，多选1
- 大部分情况下可以互换
区别：
- switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，通常用于范围判断(大于，等于某个范围)。
- switch 语句进行判断后直接执行到程序的语句，效率更高，而if…else语句有几种判断条件，就得判断多少次
- switch 一定要注意必须是 === 全等，一定注意数据类型，同时注意break否则会有穿透效果
- 结论：
  - 当分支比较少时，if…else语句执行效率高。
  - 当分支比较多时，switch语句执行效率高，而且结构更清晰。

循环语句

使用循环语句实现指定的一段代码重复执行

循环语句包括

while循环
for 循环（重点）

while循环

在满足对应条件期间，重复执行对应代码

跟if语句很像，都要满足小括号里的条件为true才会进入循环体 执行代码
while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足
若满足又继续执行大括号里的代码，然后再回到小括号判断条件
直到括号内条件不满足，即跳出

语法：

while (循环条件表达式) {
  在满足循环条件时重复执行的代码 // 即：循环体    
}

循环三要素：

初始值（经常用变量）
终止条件（小括号内的：循环条件表达式，即为终止条件，必须要有）
变量的变化量（常用自增或者自减）

例如：

// while循环: 重复执行代码
// 1. 需求: 利用循环重复打印3次 '月薪过万不是梦，毕业时候见英雄'
let i = 1             //变量起始值
while (i <= 3) {      //小括号为循环的终止条件，没有终止条件，循环会一直执行，造成死循环
  document.write('月薪过万不是梦，毕业时候见英雄~<br>')
  i++   // 这里千万不要忘了变量自增否则造成死循环
}

语法格式案例

while循环语句

<body>
  <script>
    //  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++
    }
  </script>
</body>

语法格式案例

while循环案例

<body>
  <script>

    // 需求：使用while循环，页面中打印，可以添加换行效果
    //
    // 1. 页面输出1-100
    //
    //   核心思路： 
    //      利用 i ,因为正好和 数字对应
    //
    // 2. 计算从1加到100的总和并输出
    //
    //   核心思路：
    //      声明累加和的变量 sum
    //      每次把 i 加到 sum 里面
    //
    // 3. 计算1-100之间的所有偶数和
    //
    //   核心思路：
    //      声明累加和的变量 sum
    //      首先利用if语句把 i 里面是偶数筛选出来
    //      把 筛选的 i 加到 sum 里面
    //
    //
    // let age = 18
    // age = age + 1
    // age += 1
    //
    // 1. 页面输出1~100
    // let i = 1
    // while (i <= 100) {
    //   document.write(`这是第${i}个数<br>`)
    //   i++
    // }
    //
    // 2. 页面输出1~100 累加和
    // let i = 1  // 变量的起始值
    // let sum = 0  // 累加和变量
    // while (i <= 100) {
    //   // 把i 累加到 sum 里面
    //   // sum = sum + i
    //   sum += i
    //   i++
    // }
    // console.log(sum) // 5050
    //
    // 3. 页面输出1~100 偶数和
    let i = 1
    let sum = 0
    while (i <= 100) {
      // 筛选偶数 只有偶数才累加
      if (i % 2 === 0) {
        sum = sum + i
      }
      // 每次循环都要自加
      i++
    }
    console.log(sum)
  </script>
</body>

中止循环

循环结束：

break：退出循环
continue：结束本次循环，继续下次循环

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

continue 结束本次循环，一般用于排除或者跳过某一个选项的时候

break退出整个循环案例

案例说明：

等于3就退出整个循环了，打印在自增和判断之前，所以打印结果是1、2、3

<script>

  let i = 1
  
  while (i <= 5) {
    console.log(i)
  
    if (i === 3) {
      break  // 退出整个循环
    }
  
    i++
  }
  //等于3就退出整个循环了，打印在自增和判断之前，所以打印结果是1、2、3
</script>

continue结束本次循环案例

案例说明：

自增的循环在外层，只有当自增到3的时候，才跑内层循环
还不到3时，不跑内层循环，打印1、2
等于3时，跑内层循环，此时自增1，自增完了就被continue结束了本次循环了
打印在内层循环之后，所以在continue结束退出时，只能打印到4了
退出以后还继续跑，直到等于5，打印的结果是1、2、4、5

<script>

  let i = 1

  while (i <= 5) {
    if (i === 3) {
      i++

      continue  // 结束本次循环
    }

    console.log(i)

    i++
  }
  //自增的循环在外层，只有当自增到3的时候，才跑内层循环，还不到3时，不跑内层循环，打印1、2
  //等于3时，跑内层循环，此时自增1，自增完了就被continue结束了本次循环了
  //打印在内层循环之后，所以在continue结束退出时，只能打印到4了
  //退出以后还继续跑，直到等于5，打印的结果是1、2、4、5
</script>

无限循环

1.while(true) 来构造“无限”循环，需要使用break退出循环（常用）

2.for(;;) 也可以来构造“无限”循环，同样需要使用break退出循环

利用while做无限循环案例
需求：页面弹出对话框，‘你爱我吗’，如果输入‘爱’，则结束，否则一直弹出对话框
分析：
①：循环条件永远为真，一直弹出对话框
②：循环的时候，重新让用户输入
③：如果用户输入的是：爱，则退出循环（break）

语法格式案例

while循环案例

<script>
  // 无限循环  
  // 需求： 页面会一直弹窗询问你爱我吗？
  // (1). 如果用户输入的是 '爱'，则退出弹窗
  // (2). 否则一直弹窗询问

  // 1. while(true) 无限循环
  // while (true) {
  //   let love = prompt('你爱我吗?')
  //   退出条件 爱
  //   if (love === '爱') {
  //     break
  //   }
  // }

  // 2. for(;;) 无限循环
  for (; ;) {
    let love = prompt('你爱我吗?')
    if (love === '爱') {
      break
    }
  }
</script>

综合案例

ATM存取款机
分析：
①：提示输入框写到循环里面（无限循环）
//循环的时候，需要反复提示输入框，所以提示框写到循环里面
②：用户输入4则退出循环 break
③：提前准备一个金额预先存储一个数额 money
④：根据输入不同的值，做不同的操作
(1) 取钱则是减法操作，存钱则是加法操作，查看余额则是直接显示金额
(2) 可以使用 if else if 多分支，或者 switch 来执行不同的操作

语法格式案例

while循环案例

<body>
  <script>
  // 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
      break
    case 2:
      // 存钱
      let qu = +prompt('请输入取款金额')
      money = money - qu
      break
    case 3:
      // 存钱
      alert(`您的银行卡余额是${money}`)
      break
  }
}
  </script>
</body>

附：断点调试

通过浏览器的断点调试，可以在写代码过程中，更好地理解代码实际跑的流程

作用：学习时可以帮助更好地理解代码运行，工作时可以更快找到bug

浏览器打开调试界面

按F12打开开发者工具
点到源代码一栏sources一栏
选择代码文件

断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来

for 语句

掌握 for 循环语句，让程序具备重复执行能力

for 是 JavaScript 提供的另一种循环控制的话句，它和 while 只是语法上存在差异

for语句的基本使用

实现循环的 3 要素

语法：

  // for(起始值; 终止条件; 变化量) {
  //    要重复执行的代码（循环体）
  // }

语法格式案例

for语句语法

<script>
  // 1. 语法格式
  // for(起始值; 终止条件; 变化量) {
  //   // 要重复执行的代码
  // }

  // 2. 示例：在网页中输入标题标签
  // 起始值为 1
  // 变化量 i++
  // 终止条件 i <= 6
  for(let i = 1; i <= 6; i++) {
    document.write(`<h${i}>循环控制，即重复执行<h${i}>`)
  }
</script>

变化量和死循环，for 循环和 while 一样，如果不合理设置增量和终止条件，便会产生死循环。
跳出和终止循环

语法：

  // for(起始值; 终止条件; 变化量) {
  //   要重复执行的代码（循环体）
  //   跳出条件/终止条件
  // }

语法格式案例

for语句的跳出与终止

<script>
    // 1. continue 
    for (let i = 1; i <= 5; i++) {
        if (i === 3) {
            continue  // 结束本次循环，继续下一次循环
        }
        console.log(i)
    }
    // 2. break
    for (let i = 1; i <= 5; i++) {
        if (i === 3) {
            break  // 退出结束整个循环
        }
        console.log(i)
    }
</script>

退出循环

continue 退出本次循环，一般用于排除或者跳过某一个选项的时候, 可以使用continue
break 退出整个for循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用

了解

while(true) 来构造“无限”循环，需要使用break退出循环
for(;;) 也可以来构造“无限”循环，同样需要使用break退出循环

结论：

JavaScript 提供了多种语句来实现循环控制，但无论使用哪种语句都离不开循环的3个特征，即起始值、变化量、终止条件，做为初学者应着重体会这3个特征，不必过多纠结三种语句的区别
起始值、变化量、终止条件，由开发者根据逻辑需要进行设计，规避死循环的发生
当如果明确了循环的次数的时候推荐使用for循环
当不明确循环的次数的时候推荐使用while循环

注意：for 的语法结构更简洁，故 for 循环的使用频次会更多

语法格式案例

if语句的使用案例

<body>
  <script>
    //案例1
    // 利用for循环输出三句话 月薪过万
    for (let i = 1; i <= 3; i++) {
      document.write('月薪过万<br>')
    }
    // 课堂练习： 输出10句月薪过万，并说出for循环的执行过程


    //案例2
    // 1. 输出1~100岁
    // for (let i = 1; i <= 100; i++) {
    //   document.write(`今年我${i}岁了 <br>`)
    // }
    // 2. 求1~100之间的偶数和
    // let sum = 0
    // for (let i = 1; i <= 100; i++) {
    //   if (i % 2 === 0) {
    //     // 把i加到sum里面去
    //     // sum = sum + i
    //     sum += i
    //   }
    // }
    // document.write(`1~100之间的偶数和是: ${sum}`)
    // 3. 页面打印5个小星星
    // for (let i = 1; i <= 5; i++) {
    //   document.write('★')
    // }
    // 4. 打印数组
    let arr = ['刘德华', '刘晓强', '刘晓庆', '刘若英', '刘热巴', 'pink老师']
    // console.log(arr[0])
    // console.log(arr[1])
    // console.log(arr[2])
    // console.log(arr[3])
    // i <= 4    长度 - 1
    // for (let i = 0; i <= arr.length - 1; i++) {
    //   console.log(arr[i])
    // }
    // 必须从0开始，因为数组索引号从0开始  arr.length = 6
    // 遍历数组 ：  从第一个循环到最后一个
    for (let i2 = 0; i2 < arr.length; i2++) {
      console.log(arr[i2])
    }

    let arr1 = []
    console.log(arr1)
    console.log(arr1[0]) // undefined
    console.log(arr1[1]) // undefined

    //案例3

    // for (let i = 1; i <= 5; i++) {
    //   if (i === 3) {
    //     continue  // 退出本次循环，本次循环中 continue下面的语句不在执行
    //   }
    //   console.log(i)
    //   document.write(i)
    // }

    // for (let i = 1; i <= 5; i++) {
    //   if (i === 3) {
    //     break  // 退出整个循环 结束循环
    //   }
    //   console.log(i)
    //   document.write(i)
    // }
    // 无限循环
    for (; ;) {
      console.log(11)
    }

  </script>
</body>

循环的嵌套

JavaScript 中任何一种循环语句都支持循环的嵌套

语法：

for (外部声明记录循环次数的变量;循环条件;变化值) {
  for (内部声明记录循环次数的变量;循环条件;变化值) {
    循环体
  }
}

语法格式案例

循环嵌套案例

<body>
  <script>

    //案例1
    // 外层循环打印 第 n 天
    for (let i = 1; i <= 3; i++) {
      document.write(`第${i}天<br>`)
      // 里层循环打印 第几个单词
      for (let j = 1; j <= 5; j++) {
        document.write(`记住了第${j}个单词<br>`)
      }
    }

    //案例2
    // // 外层循环打印行数
    // for (let i = 1; i <= 5; i++) {
    //   // 里层循环打印几个星星
    //   for (let j = 1; j <= 5; j++) {
    //     document.write('☆')
    //   }
    //   // 进行换行显示
    //   document.write('<br>')
    // }

    let row = +prompt('请输入行数:')
    let col = +prompt('请输入列数:')
    // 外层循环打印行数
    for (let i2 = 1; i2 <= row; i2++) {
      // 里层循环打印几个星星
      for (let j2 = 1; j2 <= col; j2++) {
        document.write('☆')
      }
      // 进行换行显示
      document.write('<br>')
    }

    // 1. 外层循环控制行数
    for (let i22 = 1; i22 <= 5; i22++) {
      // 2. 里层循环控制列数（几个星星）
      for (let j22 = 1; j22 <= i22; j22++) {
        document.write('◆')
      }
      // 换行
      document.write('<br>')
    }

    //案例3
    //css
    span {
    display: inline-block;
    width: 100px;
    padding: 5px 10px;
    border: 1px solid pink;
    margin: 2px;
    border-radius: 5px;
    box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);
    background-color: rgba(255, 192, 203, .1);
    text-align: center;
    color: hotpink;
    }
    //javascript
    // 外层打印几行
    for (let i3 = 1; i3 <= 9; i3++) {
      // 里层打印几个星星
      for (let j3 = 1; j3 <= i3; j3++) {
        // 只需要吧 ★ 换成  1 x 1 = 1   
        document.write(`
      <div> ${j3} x ${i3} = ${j3 * i3} </div>
      `)
      }
      document.write('<br>')
    }

  </script>
</body>