JavaScript入门——基础知识(3)

一、运算符

1.1 赋值运算符

目标:能够通过使用赋值运算符简化代码

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

  • 将等号右边的值赋予给左边,要求左边必须是一个容器
  • 其他赋值运算符:
    • +=
    • -=
    • *=
    • /=
    • %=
  • 使用这些运算符可以在对变量赋值时进行快速操作
    • 例如+=赋值运算符
      • 以前让一个变量加1如何做?

        javascript 复制代码
        <script>
            let num = 1
            num = num + 1
            console.log(num) // 结果是2
        </script>
      • 现在简单写法

        javascript 复制代码
        <script>
            let num = 1
            num += 1
            console.log(num) // 结果是2
        </script>
      • 提问:想变量加3怎么写?

        javascript 复制代码
        ​
        <script>
            let num = 1
            num += 3
            console.log(num) // 结果是4
        </script>
        
        ​

总结:

  1. =赋值运算符执行过程?
    • 将等号右边的值赋予给左边,要求左边必须是一个容器
  2. +=出现是为了简化代码,比如让let num = 10,num加5怎么写呢?
    • num += 5
  3. 其他类型的赋值运算符,与+=赋值运算符一样

1.2 一元运算符

众多的JavaScript的运算符可以根据所需表达式的个数,分为一元运算符、二元运算符、三元运算符

  • 二元运算符

    • 例:

      javascript 复制代码
      let num = 10 + 20
  • 一元运算符:

    • 例:正负号
  • 问题:以前让一个变量每次+1,是怎么做的?

    javascript 复制代码
    let num = 1
    num = num + 1
    //或
    let num = 1
    num += 1
  • 更简便的写法

    • 自增:
      • 符合:++
      • 作用:让变量的值+1,只能每次加一
      • 用法:
        • 前置自增

          javascript 复制代码
          let num = 1
          ++num  // 让num的值加1边2
        • 后置自增

          javascript 复制代码
          let num = 1
          num++  // 让num的值加1边2
        • 区别:

          • 前置自增:先自加1,再参与运算(口诀:++ 在前 先加)

            javascript 复制代码
            let i = 1
            console.log(++i + 2) // 结果是4
            //注意: i是2
            // i先自加1,变成2之后,在和后面的2相加
          • 后置自增:先参与计算,再自加1

            javascript 复制代码
            let i = 1
            console.log(i++ + 1)
  • 自减
    • 符合:--
    • 作用:让变量的值-1
  • 使用场景:经常用于计数来使用。比如进行10此操作,用它来计算进行了多少次了,一般都是单独使用后置++更多

1.3 比较运算符

目标:能使用常见的比较运算符进行比较运算

使用场景:比较两个数据大小、是否相等

比较运算符:

  • >:左边是否大于右边
  • <:左边是否小于右边
  • >=:左边是否大于或等于右边
  • <=:左边是否小于或等于右边
  • ==:左右两边值是否相等
  • ===:左右两边是否类型和值都相等
  • !==:左右两边是否不全等
  • 比较结果为boolean类型,即只会得到true或false

对比:

  • =单等是赋值
  • ==是判断
  • ===是全等
  • 开发中判断是否相等,强烈推荐使用===
javascript 复制代码
<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(2 === '2') // false
    console.log(undefined ==== null) // false
    console.log(NaN === NaN) // false  NaN不等于任何人,包括他自己
</script>

(1)字符串比较,是比较的字符对应的ASCII码

  • 从左往右依次比较
  • 如果第一位一样再比较第二位,以此类推
  • 比较的少,了解即可
javascript 复制代码
console.log('a' < 'b') // true

(2)NaN不等于任何值,包括它本身

  • 涉及到"NaN"都是false

(3)尽量不要比较小数,因为小数有精度问题

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

  • 最终把数据隐式转换成number类型再比较

1.4 逻辑运算符

目标:掌握逻辑运算符,为程序"能思考"做准备

提问:如果我想判断一个变量num是否大于5且小于10,该怎么做?

  • 错误写法:5<num<10

使用场景:逻辑运算符用来解决多重条件判断

  • 正确写法:num > 5 && num < 10

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

javascript 复制代码
<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 || fasle) // false

    // 逻辑非,取反
    console.log(!true) // false
    console.log(!false) // true
</script>

练习:判断一个数是4的倍数,且不是100的倍数

需求:用户输入一个,判断这个数能被4整除,但是不能被100整除,满足条件,页面弹出true,否则false

分析:

  • 用户输入一个
  • 判断条件,看余数是不是0,如果是0就是能被整除,余数不是0,则不能被整除
javascript 复制代码
    <script>
        // 1.用户输入
        let num = +prompt('请输入一个数:')
        // 弹出结果
        alert(num % 4 === 0 && num % 100 !==0)
    </script>

1.5 运算符优先级

目标:掌握运算符优先级,能判断运算符执行的顺序

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

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

逻辑与比逻辑或优先级高

二、语句

2.1 表达式和语句

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

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

表达式和语句的区别:

表达式:因为表达式可以被求值,所以它可以写在赋值语句的右侧。

如:num = 3 + 4

语句:而语句不一定有值,所以比如alert() for和break等语句就不能被用于赋值。

如:alert() 弹出对话框 console.log() 控制台打印输出

某些情况,也可以把表达式理解为表达式语句,因为它是在计算结果,但不是必须的成分(例如continue语句)

2.2 分支语句

分支语句可以选择性的执行想要的代码

分支语句包含:

  • if分支语句
  • 三元运算符
  • switch语句

2.2.1 if语句

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

1.单分支

单分支使用语法:

  • 括号内的条件为true时,进入大括号里执行代码
  • 小括号内的结果若不是布尔类型时,会发生隐式转换为布尔类型
  • 如果大括号只有一个语句,大括号可以省略,但是不提倡
javascript 复制代码
if(条件){
    满足条件要执行的代码
}

注意:

除0所有的数字都为真

除了 '' 所有的字符串都为真

练习 if语句

用户输入高考成绩,如果分数大于700,则提示恭喜你取得优异的成绩

javascript 复制代码
<script>
        // 1.用户输入
        let grade = +prompt('请输入高考成绩:')
        // 2.进行判断输出
        if (grade >= 700){
            alert('恭喜你取得优异的成绩')
        }
    </script>

2.双分支

javascript 复制代码
if(条件){
    满足条件要执行的代码
}else{
    不满足条件执行的代码    
}

练习:

用户输入,用户名:张三,密码:123456,则提示登录成功,否则提示登录失败

分析:

①弹出输入框,分别输入用户名和密码

②通过if语句判断,如果用户名是张三,并且密码是123456,则执行if里面的语句,否则执行else里面的语句。

javascript 复制代码
    <script>
        // 1. 用户输入
        let name = prompt('请输入用户名:')
        let password = prompt('请输入密码:')
        // 2. 判断输出
        if(name === '张三' && password === '123456'){
            alert('登录成功')
        }else{
            alert('用户名或者密码错误')
        }
     </script>

练习:判断闰年

让用户输入年份,判断这一年是闰年还是平年并弹出对应的警示框

分析:

①能被4整除但不能被100整除,或者被400整除的年份是闰年,否则都是平年

②需要逻辑运算符

javascript 复制代码
    <script>
        //1.用户输入
        let num = +prompt('请输入年份:')
        //2.判断输出
        if(num % 4 === 0 && num % 100 !== 0 || num % 400 ===0){
            alert(`${num}年是闰年`)
        }else{
            alert(`${num}年是平年`)
        }
    </script>

3.多分支语句

  • 先判断条件1,若满足条件1就执行代码1,其他不执行
  • 若不满足则向下判断条件2,满足条件2执行代码2,其他不执行
  • 若依然不满足继续往下判断,依次类推
  • 若以上条件都不满足,执行else里的代码n
  • 注:可以写N个条件
javascript 复制代码
if(条件1){
    代码1
}else if(条件2){
    代码2
}else if(条件3){
    代码3
}else{
    代码n
}

练习:输入成绩判断

根据输入不同的成绩,反馈不同的评价

注:

①成绩90以上是 优秀

②成绩70~90是 良好

③成绩60~70是 及格

④成绩60分以下是 不及格

javascript 复制代码
    <script>
        // 1.用户输入
        let score = +prompt('请输入您的成绩:')
        // 2.结果判断
        if (score >= 90){
            alert('优秀')
        }else if(score >= 70){
            alert('良好')
        }else if(score >= 60){
            alert('及格')
        }else{
            alert('不及格')
        }
    </script>

2.2.2 三元运算符

javascript 复制代码
条件 ? 满足条件执行的代码 : 不满足条件执行的代码

练习:判断2个数的最大值

用户输入2个数,控制台输出最大的值

分析:

①用户输入2个数

②利用三元运算符输出最大值

javascript 复制代码
    <script>
        //1.用户输入
        let num1 = +prompt('请输入第一个数:')
        let num2 = +prompt('请输入第二个数:')
        //2.判断输出
        num1 > num2 ? alert(`最大值是:${num1}`) : alert(`最大值是:${num2}`) 
    </script>

练习:数字补0

用户输入1个数,如果数字小于10,则前面进行补0,比如09 03等

分析:

①为后期页面显示时间做铺垫

②利用三元运算符补0计算

javascript 复制代码
    <script>
        //1.用户输入
        let num = prompt('请输入一个数:')
        //2.判断输入 小于10补0
        num = num < 10 ? 0 + num : num
        alert(num)
    </script>

2.2.3 switch语句

  • 找到跟小括号里数据全等的case值,并执行里面对应的代码
  • 若没有全等===的则执行default里的代码
  • 例:数据若跟值2全等,则执行代码2
javascript 复制代码
switch(数据){
    case 值1:
        代码1
        break
    case 值2:
        代码2
        break
    default:
        代码n
        break
}

1.switch case语句一般用于等值判断,不适合于区间判断

2.switch case一般需要配合break关键字使用,没有break会造成case穿透

javascript 复制代码
    <script>
        switch(1){
            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>

练习:简单计算器

用户输入2个数字,然后输入+-*/任何一个,可以计算结果

分析:

①用户输入数学

②用户输入不同算术运算符,可以去执行不同的运算(switch)

javascript 复制代码
    <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>

2.3 循环语句

2.3.1 断点调试

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

浏览器打开调试界面

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

2.3.2 while循环

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

1.while循环基本语法

javascript 复制代码
while(循环条件){
    要重复执行的代码(循环体)
}

2.while循环三要素

循环的本质就是以某个变量为起始值,然后不断产生变化量,慢慢靠近终止条件的过程。所以,while循环需要具备三要素:

  • 变量起始值
  • 终止条件(没有终止条件,循环会一直执行,造成死循环)
  • 变量变化量(用自增或者自减)
javascript 复制代码
    <script>
        //1.变量的起始值
        let i = 1
        //2.终止条件
        while(i <= 3){
            document.write('我要循环三次<br>')
            //3.变量的变化量
            i++
        }  
    </script>

练习 在页面中打印输出10句"月薪过万"

使用while循环,页面中打印,可以添加换行效果

javascript 复制代码
    <script>
        //1.变量的起始值
        let i = 1
        //2.终止条件
        while(i <= 10){
            document.write('月薪过万<br>')
            //3.变量的变化量
            i++
        }  
    </script>

练习 while

使用while循环,页面中打印,可以添加换行效果

1.页面输出1-100

2.计算从1加到100的总和并输出

3.计算1-100之间的所有偶数和

javascript 复制代码
    <script>
        //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){
        //     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) //2550
        
    </script>

3.循环退出

循环结束:

  • break:退出循环
  • continue:结束本次循环,继续下次循环

区别:

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

练习 页面弹框

页面弹出对话框,"今天吃什么",如果输入'拌面",则结束,否则一直弹出对话框

javascript 复制代码
    <script>
        while(true){
            let str = prompt('今天吃什么')
            // 退出条件
            if(str === '拌面'){
                break
            }
        }
    </script>

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

2.4.1 共同点

都能实现多分支选择,多选1

大部分情况下可以互换

2.4.2 区别

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

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

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

结论:

  • 当分支比较少时,if...else语句执行效率高
  • 当分支比较多时,switch语句执行效率高,而且结构更清晰

三、综合案例-简易的ATM取款机

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

分析:

  1. 循环的时候,需要反复提示输入框,所以提示框写到循环里面
  2. 退出的条件是用户输入了4,如果是4,则结束循环,不在弹窗
  3. 提前准备一个金额预先存储一个数额
  4. 取钱则是减法操作,存钱则是加法操作,查看余额则是直接显示余额
  5. 输入不同的值,可以使用switch来执行不同的操作
javascript 复制代码
    <script>
        //1.开始循环
        //3.准备一个总的金额
        let money = 100
        while(true){
            let re = +prompt(`
                请您选择操作:
                1.存钱
                2.取钱
                3.查看余额
                4.退出 
            `)
            //2.如果用户输入的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>
相关推荐
小政爱学习!18 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。23 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼30 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093333 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
web行路人1 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱0011 小时前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼9211 小时前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
周亚鑫2 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
落魄小二2 小时前
el-table 表格索引不展示问题
javascript·vue.js·elementui