JavaScript系统学习---02---流程控制

目录

一、运算符

1.1 算术运算符

1.2 赋值运算符

1.3 一元运算符

1.4 比较运算符

1.5 逻辑运算符

1.6 运算符优先级

二、语句

2.1 表达式和语句

2.2 分支语句

2.3 循环结构

2.3.1 断点调试

 2.3.2 while 循环

---

一、运算符

1.1 算术运算符

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

•  +：求和
•  -：求差
•  *：求积
•  /：求商
•  %：取模（取余数）
  •  开发中经常作为某个数字是否被整除

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

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

•         乘、除、取余优先级相同 
•         加、减优先级相同 
•         乘、除、取余优先级大于加、减
•         使用 () 可以提升优先级

1.2 赋值运算符

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

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

3. 其他赋值运算符：

•          +=
•          -=
•          *=
•          /=
•          %=

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

1.3 一元运算符

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

自增：

         符号：++

         作用：让变量的值 +1

自减：

         符号：--

         作用：让变量的值 -1

使用场景：

        经常用于计数来使用。 比如进行10次操作，用它来计算进行了多少次了。

2.自增运算符的用法：

 3. 案例：

let i=1;
console.log(i++ + ++i + i);

输出结果：7，原因：

先计算 i++ ,此时 i++ 整体为1，执行完成后，i 更新到2；

++i 先自增，由于 i 当前值为2，所以自增后为 i = 3；

所以 i++ + ++i + i 等价于 1 + 3 + 3 = 7;

1.4 比较运算符

1. 比较运算符的介绍

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

2. 比较运算符的使用

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

ps: == 只要值一样就是true ，不管数据类型 ；（专业用 === ，不要用 == ）

3. 比较运算符的细节

（1）字符串比较，是比较的字符对应的ASCII码

•         从左往右依次比较
•         如果第一位一样再比较第二位，以此类推
•         比较的少，了解即可

（2）NaN不等于任何值，包括它本身

（3）尽量不要比较小数，因为小数有精度问题

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

•         最终把数据隐式转换转成number类型再比较 
•         所以开发中，如果进行准确的比较我们更喜欢 === 或者 !==

1.5 逻辑运算符

1. 逻辑运算符的使用

 2.逻辑运算符的短路

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

符号	短路条件
&&	左边为false就短路
||	左边为true就短路

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

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

 1.6 运算符优先级

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

        （2）逻辑与比逻辑或优先级高。

二. 语句

2.1 表达式和语句

1. 表达式

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

2. 语句

        js 整句或命令，js 语句是以分号结束（可以省略）

        比如： if语句 for 循环语句

3. 区别

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

•          表达式 3 + 4
•          语句
•         alert() 弹出对话框

其实某些情况，也可以把表达式理解为语句，因为它是在计算结果，也是做事。

2.2 分支语句

1. if分支语句

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

单分支使用语法：

       （1） 括号内的条件为true时，进入大括号里执行代码 。

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

2. 三元运算符

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

（2）符号：? 与 : 配合使用 。

（3）语法： 。

条件 ？ 满足条件执行的代码 ： 不满足条件执行的代码

 （4）一般用来取值。

3. swich语句

释义： 

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

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

例：数据若跟值2全等，则执行代码2

注意事项：

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

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

2.3 循环结构

2.3.1 断点调试

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

2. 浏览器打开调试界面 ：

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

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

 2.3.2 while 循环

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

while 循环语法：

• 跟if语句很像，都要满足小括号里的条件为true才会进入执行代码 。
•  while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到 小括号判断条件，直到括号内条件不满足，即跳出。