JavaScript 的学习

303 阅读6分钟

运算符

1.赋值运算符

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

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

其它赋值运算符:+=,-=,*=,/=,%=;使用这些运算符可以在对变量赋值时进行快速操作 Snipaste_2022-05-23_10-54-44.png

一元运算符

一元运算符:正负号

前置自增:++i

后置自增:i++

前置自增和后置自增单独使用没有区别 Snipaste_2022-05-23_10-56-17.png 前置自增和后置自增如果参与运算就有区别: (难点,但是了解即可) Snipaste_2022-05-23_10-56-45.png

比较运算符

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

>: 左边是否大于右边

<: 左边是否小于右边

>=: 左边是否大于或等于右边

<=: 左边是否小于或等于右边

==: 左右两边值是否相等

===: 左右两边是否类型和值都相等(全等)

!==: 左右两边是否不全等(不全等)

!=: 不等

比较结果为boolean类型,即只会得到 true 或 false

= 单等是赋值

== 是判断

=== 是全等

开发中判断是否相等,强烈推荐使用 === Snipaste_2022-05-23_10-58-18.png

逻辑运算符

逻辑运算符用来解决多重条件判断 Snipaste_2022-05-23_10-59-20.png Snipaste_2022-05-23_10-59-32.png

  • 逻辑与案例 Snipaste_2022-05-23_11-00-33.png

运算符优先级

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

逻辑与比逻辑或优先级高 Snipaste_2022-05-23_11-17-28.png

语句

表达式和语句

表达式是可以被求值的代码,JavaScript 引擎会将其计算出一个结果。(简单理解表达式就是一个式子)

语句是一段可以执行的代码。(比如: prompt() 可以弹出一个输入框)

分支语句

以前我们写的代码,写几句就从上往下执行几句,这种叫顺序结构

有的时候要根据条件选择执行代码,这种就叫分支结构

某段代码被重复执行,就叫循环结构

  1. if分支 if语句有三种使用:单分支、双分支、多分支
  • 单分支 Snipaste_2022-05-23_11-21-20.png 括号内的条件为true时,进入大括号里执行代码

小括号内的结果若不是布尔类型时,会发生隐式转换转为布尔类型

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

  • 双分支 Snipaste_2022-05-23_11-22-37.png
  1. 判断闰年案例 需求:让用户输入年份,判断这一年是闰年还是平年并弹出对应的警示框

分析:

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

②:需要逻辑运算符 Snipaste_2022-05-23_11-23-35.png

  • 多分支 先判断条件1,若满足条件1就执行代码1,其他不执行

若不满足则向下判断条件2,满足条件2执行代码2,其他不执行

若依然不满足继续往下判断,依次类推

若以上条件都不满足,执行else里的代码n

注:可以写N个条件,但这里演示只写2个 Snipaste_2022-05-23_11-49-23.png 案例 需求:根据输入不同的成绩,反馈不同的评价

注:

①:成绩90以上是 优秀

②:成绩70~90是 良好

③:成绩是60~70之间是 及格

④:成绩60分以下是 不及格 Snipaste_2022-05-23_11-50-19.png

三元运算符

其实是比 if 双分支更简单的写法,可以使用 三元表达式

语法:

条件 ? 满足条件执行代码1 : 不满足条件执行代码2 Snipaste_2022-05-23_11-51-53.png

  • 求最大值案例 需求:用户输入2个数,控制台输出最大的值

分析:

①:用户输入2个数

②:利用三元运算符输出最大值 Snipaste_2022-05-23_11-53-06.png

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

分析:

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

②:利用三元运算符 补 0 计算 Snipaste_2022-05-23_11-54-05.png

switch语句

找到跟小括号里数据全等的case值,并执行里面对应的代码

若没有全等 === 的则执行default里的代码

例:数据若跟值2全等,则执行代码2 循环作用:重复执行一些操作,如while循环 for循环. 注意事项:

  1. switch case语句一般用于等值判断,不适合于区间判断
  2. switch case一般需要配合break关键字使用 没有break会造成case穿透 Snipaste_2022-05-23_11-55-24.png Snipaste_2022-05-23_11-56-35.png

循环

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

  • while循环 Snipaste_2022-05-23_13-47-35.png 跟if语句很像,都要满足小括号里的条件为true才会进入 循环体 执行代码

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

循环三要素:

1.变量起始值

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

3.变量变化量(用自增或者自减) Snipaste_2022-05-23_13-48-44.png 思考:能不能改进,让用户输入打印输出的个数呢? Snipaste_2022-05-23_13-49-19.png

循环练习

  1. 页面输出1-100 Snipaste_2022-05-23_13-50-47.png
  2. 页面输出1-100 累加和 Snipaste_2022-05-23_13-51-27.png
  3. 页面输出1-100 偶数和 Snipaste_2022-05-23_13-52-33.png

循环退出

continue 退出本次循环,一般用于排除或者跳过某一个选项的时候, 可以使用continue Snipaste_2022-05-23_13-54-19.png break 退出整个循环,一般用于结果已经得到, 后续的循环不需要的时候可以使用 Snipaste_2022-05-23_13-54-11.png

简易ATM机案例

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

分析:

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

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

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

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

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

Snipaste_2022-05-23_13-56-51.png

if 多分支和switch的区别

  1. 共同点

    -  都能实现多分支选择, 多选1
    -  大部分情况下可以互换
    
  2. 区别:

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

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

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

  • 结论:

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