JavaScript 基础 (二)

文章目录

  • JavaScript 基础 (二)
    • 一.运算符
      • 1.1 **算术运算符**
      • 1.1.1 基础
      • 1.1.2 算术运算符执行的优先级顺序
      • 1.1.3 小结
    • 1.2 **赋值运算符**
      • 1.2.1 基础
      • 1.2.2 小结
    • 1.3 **一元运算符**
      • 1.3.1 基础
      • 1.3.2 小结
    • 1.4 **比较运算符**
      • 1.4.1 比较运算符的介绍
      • 1.4.2 比较运算符的使用
      • 1.4.3 比较运算符的细节
      • 1.4.4 小结
    • 1.5 **逻辑运算符**
      • 1.5.1 逻辑运算符的介绍
      • 1.5.2 逻辑运算符的使用
      • 1.5.3 逻辑运算符里的短路
      • 1.5.4 小结
    • 1.6 **运算符优先级**
  • 二. 语句
    • 2.1 **表达式和语句**
    • 2.2 **分支语句**
      • 2.2.1 **程序三大流程控制语句**
      • 2.2.2 **分支语句**
        • 2.2.2.1 **if语句**
        • 2.2.2.2 **三元运算符**
        • 2.2.2.3 **switch语句**
      • 2.2.3 小结
    • 2.3 循环语句
      • 2.3.1 **断点调试**
      • 2.3.2 **while 循环**
        • 2.3.2.1 语法
        • 2.3.2.2 注意事项
      • 2.3.3 循环退出
        • 2.3.2.1 语法
        • 2.3.2.2 注意事项
      • 2.3.3 循环退出

JavaScript 基础 (二)

  • 掌握算术、比较、逻辑运算符,为程序“能思考”做准备

  • 掌握分支语句,让程序具备判断能力

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

一.运算符

1.1 算术运算符

1.1.1 基础

数学运算符也叫算术运算符,主要包括加、减、乘、除、取余(求模)。

+:求和

-:求差

*:求积

/:求商

%:取模(取余数)

1.1.2 算术运算符执行的优先级顺序

同时使用多个运算符编写程序时,会按着某种顺序先后执行,我们称为优先级。

JavaScript中 优先级越高越先被执行,优先级相同时以书从左向右执行。

  • 乘、除、取余优先级相同

  • 加、减优先级相同

  • 乘、除、取余优先级大于加、减

  • 使用 () 可以提升优先级

  • 总结: 先乘除后加减,有括号先算括号里面的

1.1.3 小结

  1. 算术运算符有那几个常见的?

* / %

  1. 算术运算符优先级怎么记忆?

先乘除取余,后加减,有小括号先算小括号里面的

  1. 取余运算符开发中的使用场景是?

来判断某个数字是否能被整除。

1.2 赋值运算符

1.2.1 基础

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

已经学过的赋值运算符:= 将等号右边的值赋予给左边, 要求左边必须是一个容器。

其他赋值运算符:

+=

-=

*=

/=

%=

  • 使用这些运算符可以在对变量赋值时进行快速操作。

1.2.2 小结

  1. = 赋值运算符执行过程?

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

  1. += *= 出现是为了简化代码, 比如让 let num = 10 , num 加5

怎么写呢?

num += 5

1.3 一元运算符

1.3.1 基础

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

自增:

符号:++

作用:让变量的值 +1

自减:

符号:–

作用:让变量的值 -1

前置自增:先自加再使用(记忆口诀:++在前 先加)

后置自增:先使用再自加(记忆口诀:++在后 后加)

自增运算符的用法:

  1. 前置自增和后置自增独立使用时二者并没有差别!

  2. 一般开发中我们都是独立使用。

  3. 后面 i++ 后置自增会使用相对较多。

1.3.2 小结

  1. 只需要一个表达式就可以运算的运算符叫一元运算符。

  2. 自增运算符也是为了简化写法,每次自加1,使用场景是什么?

经常用于计数来使用。用来计算多少次。

  1. 前后置自增的区别

前置:先自增后运算。

后置:先运算后自增。

自减同理…

开发中,我们一般都是单独使用的,后置++ 使用更多。

1.4 比较运算符

1.4.1 比较运算符的介绍

作用:比较两个数据大小、是否相等。

1.4.2 比较运算符的使用

">"左边是否大于右边

< 左边是否小于右边

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

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

==: 左右两边是否相等

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

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

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

1.4.3 比较运算符的细节

字符串比较,是比较的字符对应的ASCII码。

1.4.4 小结

  1. = 和 == 和 === 怎么区别?

= 是赋值

== 是判断 只要求值相等,不要求数据类型一样即可返回true

=== 是全等 要求值和数据类型都一样返回的才是true

开发中,请使用 ===

  1. 比较运算符返回的结果是什么?

结果只有2个, true 或者 false。

1.5 逻辑运算符

1.5.1 逻辑运算符的介绍

1.5.2 逻辑运算符的使用

逻辑运算符:

JavaScript 基础 (二)_第1张图片

1.5.3 逻辑运算符里的短路

  • 短路:只存在于 && 和 || 中,当满足一定条件会让右边代码不执行。

  • 原因:通过左边能得到整个式子的结果,因此没必要再判断右边。

  • 运算结果:无论 && 还是 || ,运算结果都是最后被执行的表达式值,一般用在变量赋值。

1.5.4 小结

  1. 逻辑运算符有那三个?

与(&&) 或(||) 非(!)

  1. 逻辑运算符短路运算符怎么执行的?

只存在于 && 和 || 中,当满足一定条件会让右边代码不执行。

1.6 运算符优先级

JavaScript 基础 (二)_第2张图片

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

  • 逻辑与比逻辑或优先级高。

二. 语句

2.1 表达式和语句

表达式:表达式是一组代码的集合,JavaScript解释器会将其计算出一个结果。

语句:js 整句或命令,js 语句是以分号结束(可以省略)

比如: if语句 for 循环语句

区别:

表达式计算出一个值,但语句用来自行以使某件事发生(做什么事)

表达式 3 + 4

语句 alert() 弹出对话框

小结

表达式和语句的区别

表达式计算出一个值 比如 3+5 x = 7

语句用来自行以使某件事发生(做什么事)

alert()

console.log()

分支语句…

2.2 分支语句

2.2.1 程序三大流程控制语句

JavaScript 基础 (二)_第3张图片

2.2.2 分支语句

分支语句可以让我们有选择性的执行想要的代码。

分支语句包含:

If分支语句

三元运算符

switch 语句

2.2.2.1 if语句

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

单分支使用语法:

JavaScript 基础 (二)_第4张图片

括号内的条件为true时,进入大括号里执行代码。

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

双分支if语法:

JavaScript 基础 (二)_第5张图片

多分支if语法:

JavaScript 基础 (二)_第6张图片

释义:

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

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

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

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

注:可以写N个条件,但这里演示只写2个

2.2.2.2 三元运算符

其实是比 if 双分支 更简单的写法,有时候也叫做三元表达式

符号:? 与 : 配合使用

语法:

2.2.2.3 switch语句

JavaScript 基础 (二)_第7张图片

释义:

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

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

例:数据若跟值2全等,则执行代码2。

注意事项

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

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

2.2.3 小结

  1. 程序三大流程控制

顺序

分支

循环

  1. if语句

三种形式

  1. switch语句

全等判断

break:结束switch语句,防止穿透。

  1. 三元运算符

也是双分支

一般用来取值

2.3 循环语句

2.3.1 断点调试

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

  • 浏览器打开调试界面

  1. 按F12打开开发者工具

  2. 点到sources一栏

  3. 选择代码文件

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

2.3.2 while 循环

循环:重复执行某段代码, 而 while : 在…. 期间

2.3.2.1 语法

释义:

跟if语句很像,都要满足小括号里的条件为true才会进入执行代码。

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

2.3.2.2 注意事项

循环的本质就是以某个变量为起始值,然后不断产生变化量,慢慢靠近终止条件的过程。

所以,循环需要具备三要素:

  1. 变量起始值

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

  3. 变量变化量(用自增或者自减)

2.3.3 循环退出

循环结束:

continue:结束本次循环,继续下次循环。

break:跳出所在的循环

2.3.2.1 语法

[外链图片转存中…(img-T3jq2RUK-1706584820516)]

释义:

跟if语句很像,都要满足小括号里的条件为true才会进入执行代码。

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

2.3.2.2 注意事项

循环的本质就是以某个变量为起始值,然后不断产生变化量,慢慢靠近终止条件的过程。

所以,循环需要具备三要素:

  1. 变量起始值

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

  3. 变量变化量(用自增或者自减)

2.3.3 循环退出

循环结束:

continue:结束本次循环,继续下次循环。

break:跳出所在的循环

你可能感兴趣的:(前端,javascript,前端)