• JavaScript 基础第二天笔记


    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
    
    // 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
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    赋值运算符

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

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

    运算符作用
    +=加法赋值
    -+减法赋值
    *=乘法赋值
    /=除法赋值
    %=取余赋值
    <script>
    let num = 1
    // num = num + 1
    // 采取赋值运算符
    // num += 1
    num += 3
    console.log(num)
    </script>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    自增/自减运算符

    符号作用说明
    ++自增变量自身的值加1,例如: x++
    自减变量自身的值减1,例如: x–
    1. ++在前和++在后在单独使用时二者并没有差别,而且一般开发中我们都是独立使用
    2. ++在后(后缀式)我们会使用更多

    注意:

    1. 只有变量能够使用自增和自减运算符
    2. ++、-- 可以在变量前面也可以在变量后面,比如: x++ 或者 ++x
    <script>
        // let num = 10
        // num = num + 1
        // num += 1
        // // 1. 前置自增
        // let i = 1
        // ++i
        // console.log(i)
    
        // let i = 1
        // console.log(++i + 1)
        // 2. 后置自增
        // let i = 1
        // i++
        // console.log(i)
        // let i = 1
        // console.log(i++ + 1)
    
        // 了解 
        let i = 1
        console.log(i++ + ++i + i)
      </script>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    比较运算符

    使用场景:比较两个数据大小、是否相等,根据比较结果返回一个布尔值(true / false)

    运算符作用
    >左边是否大于右边
    <左边是否小于右边
    >=左边是否大于或等于右边
    <=左边是否小于或等于右边
    ===左右两边是否类型都相等(重点)
    ==左右两边是否相等
    !=左右值不相等
    !==左右两边是否不全等
    <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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    逻辑运算符

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

    符号名称日常读法特点口诀
    &&逻辑与并且符号两边有一个假的结果为假一假则假
    ||逻辑或或者符号两边有一个真的结果为真一真则真
    !逻辑非取反true变false false变true真变假,假变真
    ABA && BA || B!A
    falsefalsefalsefalsetrue
    falsetruefalsetruetrue
    truefalsefalsetruefalse
    truetruetruetruefalse
    <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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    运算符优先级

    逻辑运算符优先级: !> && > ||

    语句

    表达式和语句

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    分支语句

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

    分支语句包含:

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

    语法:

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

    小括号内的条件结果是布尔值,为 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 ('pink老师') {
        //   console.log('执行语句')
        // }
        // if ('') {
        //   console.log('执行语句')
        // }
        // // if ('') console.log('执行语句')
    
        // 1. 用户输入
        let score = +prompt('请输入成绩')
        // 2. 进行判断输出
        if (score >= 700) {
          alert('恭喜考入黑马程序员')
        }
        console.log('-----------------')
    
      </script>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    if双分支语句

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

    if (条件表达式){
      // 满足条件要执行的语句
    } else {
      // 不满足条件要执行的语句
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5

    例如:

     <script>
        // 1. 用户输入
        let uname = prompt('请输入用户名:')
        let pwd = prompt('请输入密码:')
        // 2. 判断输出
        if (uname === 'pink' && pwd === '123456') {
          alert('恭喜登录成功')
        } else {
          alert('用户名或者密码错误')
        }
      </script>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    if 多分支语句

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

     <script>
        // 1. 用户输入
        let score = +prompt('请输入成绩:')
        // 2. 判断输出
        if (score >= 90) {
          alert('成绩优秀,宝贝,你是我的骄傲')
        } else if (score >= 70) {
          alert('成绩良好,宝贝,你要加油哦~~')
        } else if (score >= 60) {
          alert('成绩及格,宝贝,你很危险~')
        } else {
          alert('成绩不及格,宝贝,我不想和你说话,我只想用鞭子和你说话~')
        }
      </script>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    三元运算符(三元表达式)

    使用场景: 一些简单的双分支,可以使用 三元运算符(三元表达式),写起来比 if else双分支 更简单

    符号:? 与 : 配合使用

    语法:

    条件 ? 表达式1 : 表达式2
    
    • 1

    例如:

    // 三元运算符(三元表达式)
    // 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)
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    switch语句(了解)

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

    注意:

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

    例如:

    // switch分支语句
    // 1. 语法
    // 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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    断点调试

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

    浏览器打开调试界面

    1. 按F12打开开发者工具
    2. 点到源代码一栏 ( sources )
    3. 选择代码文件

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

    循环语句

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

    学习路径:

    1.while循环

    2.for 循环(重点)

    while循环

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

    语法:

    while (条件表达式) {
       // 循环体    
    }
    
    • 1
    • 2
    • 3

    例如:

    // while循环: 重复执行代码
    
    // 1. 需求: 利用循环重复打印3次 '月薪过万不是梦,毕业时候见英雄'
    let i = 1
    while (i <= 3) {
      document.write('月薪过万不是梦,毕业时候见英雄~
    '
    ) i++ // 这里千万不要忘了变量自增否则造成死循环 }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    循环三要素:

    1.初始值 (经常用变量)

    2.终止条件

    3.变量的变化量

    例如:

    <script>
      // // 1. 变量的起始值
      // let i = 1
      // // 2. 终止条件
      // while (i <= 3) {
      //   document.write('我要循环三次 
    ')
    // // 3. 变量的变化量 // i++ // } // 1. 变量的起始值 let end = +prompt('请输入次数:') let i = 1 // 2. 终止条件 while (i <= end) { document.write('我要循环三次
    '
    ) // 3. 变量的变化量 i++ } </script>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    中止循环

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

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

    <script>
        // let i = 1
        // while (i <= 5) {
        //   console.log(i)
        //   if (i === 3) {
        //     break  // 退出循环
        //   }
        //   i++
    
        // }
    
    
        let i = 1
        while (i <= 5) {
          if (i === 3) {
            i++
            continue
          }
          console.log(i)
          i++
    
        }
      </script>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    无限循环

    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
      }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    综合案例-ATM存取款机

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    分析:

    ①:提示输入框写到循环里面(无限循环)

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

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

    ④:根据输入不同的值,做不同的操作

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

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

    完整代码:

    <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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    <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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
  • 相关阅读:
    Covalent(CQT)降低数据可用性成本,加快 Layer2 在 Web3 领域的扩张
    PyTorch开发者福音, OpenVINO整合PyTorch实现推理加速!
    面试官:并发编程实战会吗?(线程控制操作详解)
    IBM MQ 故障诊断(一)
    【操作系统笔记二】链接阶段&ELF文件
    【飞控开发高级教程3】疯壳·开源编队无人机-定高、定点、悬停
    猿创征文|Android kotlin实现动态更换应用图标和名称
    Base64编码与打印标签(label)实例
    KMS在腾讯云的微服务实践助力其降本50%
    NIO知识总结四
  • 原文地址:https://blog.csdn.net/upgrade_bro/article/details/132962852