开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

JavaScript 基础 - 第2天

理解什么是流程控制，知道条件控制的种类并掌握其对应的语法规则，具备利用循环编写简易ATM取款机程序能力

• 运算符
• 语句
• 综合案例

运算符

算术运算符

数字是用来计算的，比如：乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。

算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等

运算符	作用
+	求和
-	求差
*	求积
/	求商
%	取模（取余数）,常用于作为某个数字是否被整除

注意：在计算失败时，显示的结果是 NaN （not a number）

// 算术运算符
console.log(1 + 2 * 3 / 2) //  4 

let num = 10
console.log(num + 10)  // 20
console.log(num + num)  // 20

//【取模用于】判断某个数是否能够被整除  
console.log(4 % 2) //  0  
console.log(6 % 3) //  0
console.log(5 % 3) //  2
console.log(3 % 5) //  3

//【注意】计算失败，返回的结果是NaN
console.log('pink老师' - 2)
console.log('pink老师' * 2)
console.log('pink老师' + 2) // pink老师2

赋值运算符

赋值运算符：对变量进行赋值的运算符

【 = 】将等号右边的值赋予给左边, 要求左边必须是一个容器

运算符	作用
+=	加法赋值
-+	减法赋值
*=	乘法赋值
/=	除法赋值
%=	取余赋值

<script>
let num = 1
// num = num + 1
num += 1 // 采取赋值运算符
console.log(num)
</script>

自增/自减运算符

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

1. ++i 和 i++在单独使用时二者并没有差别，一般开发中都是独立使用
2. i++（后缀式）会使用更多

注意：

1. 只有变量能够使用自增和自减运算符
2. ++、-- 可以在变量前面也可以在变量后面，比如: x++ 或者 ++x

<script>
    // let num = 10
    // num += 1  (num = num + 1)
    
    //[1]前置自增
    let i = 1
    ++i
    console.log(i)  //2
    let i = 1
    console.log(++i + 1) //(2+1=3)
    
    //[2]后置自增
    let i = 1
    i++
    console.log(i) //2
    let i = 1
    console.log(i++ + 1) //(1+1=2)

    // 了解 
    let i = 1
    console.log(i++ + ++i + i) //(1+3+3=7)
  </script>

比较运算符

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

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

<script>
  console.log(3 > 5) //false
  console.log(3 >= 3) //true
  console.log(2 == 2) //true
  
  //比较运算符有[隐式转换] 把'2' 转换为 2  双等号 只判断值
  console.log(2 == '2')  //true
  
  console.log(undefined === null) //false
  // === 全等 判断 值 和 数据类型都一样才行
  //以后判断是否相等 请用 ===
  console.log(2 === '2') //false
  
  // NaN 不等于任何人，包括他自己
  console.log(NaN === NaN)
  
  console.log(2 !== '2')  //true  
  console.log(2 != '2') //false 
  
  //字符串比较，是比较的字符对应的ASCII码
  console.log('a' < 'b') //true
  console.log('aa' < 'ab') //true
  console.log('aa' < 'aac') //true
</script>

逻辑运算符

使用场景：可以把多个布尔值放到一起运算，最终返回一个布尔值

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

<script>
    //【逻辑与】一假则假
    console.log(true && true) //true
    console.log(false && true) //false
    console.log(3 < 5 && 3 > 2) //true
    console.log(3 < 5 && 3 < 2) //false
    
    //【逻辑或】一真则真
    console.log(true || true) //true
    console.log(false || true) //true
    console.log(false || false) //false
    
    //【逻辑非】取反
    console.log(!true) //false
    console.log(!false)) //true

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

运算符优先级

优先级	运算符	顺序
1	小括号	（）
2	一元运算符	++ -- ！
3	算数运算符	先*/ 后+-
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先&& 后
7	赋值运算符	=
8	逗号运算符	,

逻辑运算符优先级： ！> && > ||

语句

表达式和语句

分支语句

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

分支语句包含：

1. if分支语句（重点）
2. 三元运算符
3. switch语句

if单分支语句

语法：

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

小括号内的条件结果是布尔值，为 true 时，进入大括号里执行代码；为false，则不执行大括号里面代码

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

如果大括号只有一个语句，大括号可以省略，但是不提倡这么做~

<script>
    if (false) {
       console.log('执行语句')
    } //不执行

    if (3 > 5) {
      console.log('执行语句')
    } //不执行

    if (2 === '2') {
      console.log('执行语句')
    } //不执行

    // 【1】除了0 所有的数字都为真
    if (0) {
      console.log('执行语句')
    } //不执行

    // 【2】除了 '' 所有的字符串都为真 true
    if ('小美') {
      console.log('执行语句')
    } //执行
   if ('') {
      console.log('执行语句')
   } //不执行

    // 1. 用户输入
    let score = +prompt('请输入成绩')
    // 2. 进行判断输出
    if (score >= 700) {
      alert('恭喜考入清华')
    }
  </script>

if双分支语句

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

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

例如：

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

if 多分支语句

使用场景： 适合于有多个条件的时候

 <script>
    // 1. 用户输入
    let score = +prompt('请输入成绩：')
    // 2. 判断输出
    if (score >= 90) {
      alert('成绩优秀')
    } else if (score >= 70) {
      alert('成绩良好')
    } else if (score >= 60) {
      alert('成绩及格')
    } else {
      alert('成绩不及格')
    }
  </script>

switch语句（了解）

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

注意：

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

例如：

【语法】
switch (表达式) {
  case 值1:
     代码1
     break
  case 值2:
     代码2
     break
 ...
  default:
     代码n
 }

<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>

if 多分支语句和 switch的区别

1. 共同点

   • 都能实现多分支选择， 多选1
   • 大部分情况下可以互换

2. 区别：

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

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

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

结论：

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

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

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

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

符号：? 与 : 配合使用

语法：

条件 ? 表达式1 ： 表达式2

例如：

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

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

//【需求：小于10的数字自动补0。01 02】
// 1. 用户输入 
let num = prompt('请输入一个数字:')
// 2. 判断输出- 小于10才补0
// num = num < 10 ? 0 + num : num
num = num >= 10 ? num : 0 + num
alert(num)


#### 断点调试

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

浏览器打开调试界面

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

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

### 循环语句

使用场景：重复执行 指定的一段代码，比如我们想要输出10次 '我学的很棒'

学习路径：

1.while循环

2.for 循环（重点）

#### while循环

while : 在…. 期间， 所以 while循环 就是在满足条件期间，重复执行某些代码。

**语法：**

while (条件表达式) {    // 循环体     }

例如：

//【需求】: 利用循环重复打印3次 '月薪过万不是梦' let i = 1 while (i <= 3) {   document.write('月薪过万不是梦~
')   i++   // 这里千万不要忘了变量自增否则造成死循环 }

循环三要素：

1.初始值 （经常用变量） 2.终止条件 3.变量的变化量

例如：

#### 中止循环

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

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

#### 无限循环

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

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

【需求： 页面会一直弹窗询问你爱我吗？】  (1). 如果用户输入的是 '爱'，则退出弹窗  (2). 否则一直弹窗询问

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

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

## 综合案例-ATM存取款机


<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/48bb9d721176420e9bb8f186a52d81b3~tplv-k3u1fbpfcp-watermark.image?" alt="1671018781557.png" width="70%" />

分析：

①：提示输入框写到循环里面（无限循环）

②：用户输入4则退出循环 break

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

④：根据输入不同的值，做不同的操作

​ (1) 取钱则是减法操作， 存钱则是加法操作，查看余额则是直接显示金额

​ (2) 可以使用 if else if 多分支 来执行不同的操作

完整代码：