Web前端基础—JavaScript基础（运算符与流程控制）

运算符

1. 运算符

运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算法运算等功能的符号。

JavaScript中常用的运算符有：

1. 算数运算符；
2. 递增和递减运算符；
3. 比较运算符；
4. 逻辑运算符；
5. 赋值运算符

1. 算数运算符

2.1算数运算符概述

概念：算数运算使用的符号，用于执行两个变量或值的算数运算。

运算符	描述	实例
+	加	10 + 20 = 30
-	减	10 - 20 = -10
*	乘	10 * 20 = 200
/	除	10 / 20 = 0.5
%	取余数（取模）	返回除法的余数9 % 2 = 1

注意：

浮点数会有精度的问题，尽量避免浮点数直接参与运算。

不能直接判断两个浮点数是否相等！

算数运算符的优先级：先乘除，后加减，有小括号先算小括号里面的。

2.2表达式和返回值

表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得到的组合。

简单理解为：是由数字。运算符、变量等组成的式子。

表达式最终都有一个结果，返回给我们，我们称为返回值。

1. 递增和递减运算符

3.1递增和递减运算符概述

如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（--）运算符来完成。

在JavaScript中，递增（++）和递减（--）既可以放在变量的前面，也可以放在变量的后面。放在前面时，我们称之为前置递增（递减）运算符，放在后面时，我们称之为后置递增（递减）运算符。

注意：递增和递减运算符必须和变量配合使用。

3.2递增运算符

1. 前置递增运算符

++num前置递增，就是自加1，类似于num = num + 1。

口诀：先自加，后返回值。 

1. 后置递增运算符

num++后置递增，就是自加1，类似于num = num + 1。

1. 前置和后置的异同点
   1. 前置自增和后置自增如果单独使用，效果是一样的。
   2. 后置自增  口诀：先返回原值，后自加1。

1. 比较运算符

概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true/false）作为比较运算的结果。

运算符名称	说明	案例	结果
<	小于号	1 < 2	true
>	大于号	1 > 2	false
>=	大于等于号	2 > = 2	true
<=	小于等于号	3 < = 2	false
==	判等号（会转型 默认将字符串类型转换成数字型）	37 == 37	true
!=	不等号	37 != 37	false
===  !==	全等  要求值和数据类型都一致	37 === ‘37’	false

1. 逻辑运算符

5.1逻辑运算符概述

概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值是布尔值。

逻辑运算符	说明	案例
&&（与）	“逻辑与”，简称“与” and	true&&false
||（或）	“逻辑或”，简称“或” or	true||false
！	“逻辑非”，简称“非” not	！true

注意：

&&（与）： 两侧都真，才是真；一个为假，就是假。

||（或）：  两侧全假，才是假；一个为真，就是真。

！（非）： 将布尔值取反。

5.2短路运算（逻辑中断）

短路运算原理：当有多个表达式（值）时，左边的表达式可以确定结果时，就不再继续运算右边的表达式的值。

逻辑&&（与）---------------返回的结果永远是  假  的

1. 语法：表达式1 && 表达式2
2. 如果第一个表达式1的值为真，则返回表达式2
3. 如果第一个表达式1的值为假，则返回表达式1

逻辑||（或）---------------返回的结果永远是  真  的

1. 语法：表达式1 && 表达式2
2. 如果第一个表达式的1值为真，则返回表达式2
3. 如果第一个表达式的1值为假，则返回表达式1

1. 赋值运算符

概念：用来把数据赋值给给变量的运算符

赋值运算	说明	案例
=	直接赋值	var usrName = ‘我是值’;
+=、-=	加、减一个数 后再赋值	var age = 10; age += 5;  //15
*=、/=、%=	乘、除、取模后再赋值	var age = 2; age *=5;   //10

  var age = 10;

    age += 5; //相当于  age = age + 5;

    age -= 5; //相当于  age = age - 5;     

    age *= 10; //相当于  age = age * 5;

1. 运算符的优先级

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

流程控制

1. 流程控制

流程就是来控制我们的代码按照什么结构顺序来执行的。

流程控制主要有三种结构：分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。

1. 顺序结构

顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。

1. 分支流程控制if语句

3.1分支结构

由上到下执行代码的过程，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果。

两种分支结构语句：

if语句；

if( 条件表达式 ) {

//执行语句

}

执行思路：

如果if里面的表达式结果为真，则执行大括号里面的执行语句

如果if里面的表达式结果为假，则执行if语句后面的代码

if else语句；（双分支语句 ）

if( 条件表达式 ) {

//执行语句

} else {

//执行语句

}

if else语句；（多分支语句 ）

if( 条件表达式 ) {

//执行语句

} else if {

//执行语句

} else {

//执行语句

}

switch语句：

1. 三元表达式  （？ ：）

三元表达式也能做一些简单的条件选择，有三元运算符组成的式子称为三元表达式。

4.1语法结构

条件表达式 ？ 表达式1 ：表达式2

4.2执行思路：

如果条件表达式结果为真，则 返回 表达式1 的值；

如果条件表达式结果为假，则 返回 表达式2 的值.

var num = 10;

num > 5 ? ‘是的’ : ’不是的’；

1. switch分支语句

5.1. switch 语句也是多分支语句 也可以实现多选1

5. 2. 语法结构 switch 转换、开关  case 小例子或者选项的意思

         switch (表达式) {

             case value1:

                 执行语句1;

                 break;

             case value2:

                 执行语句2;

                 break;

                 ...

                 default:

                     执行最后的语句;

         }

  5.3. 执行思路  利用我们的表达式的值 和 case 后面的选项值相匹配 如果匹配上，就执行该case 里面的语句  如果都没有匹配上，那么执行 default里面的语句。

   5.4switch注意事项

        var num = 1;

        switch (num) {

            case 1:

                console.log(1);

break;

            case 2:

                console.log(2);

break;

            case 3:

                console.log(3);

                break;

        }

        // 1. 我们开发里面 表达式我们经常写成变量

        // 2. 我们num 的值 和 case 里面的值相匹配的时候是 全等   必须是值和数据类型一致才可以 num === 1

        // 3. break 如果当前的case里面没有break 则不会退出switch 是继续执行下一个case

1. switch 语句和 if else if 语句的区别

  - 一般情况下，它们两个语句可以相互替换

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

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

  - 当分支比较少时，if… else语句的执行效率比 switch语句高。

  - 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。