JavaScript学习笔记（二）--- 运算符和流程控制

一、运算符（操作符）

1、运算符的分类

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

​ JavaScript中常用的运算符有：①算术运算符 ②递增（减）运算符 ③比较运算符 ④ 逻辑运算符 ⑤赋值运算符

2、算术运算符

​ 算术运算符就是变量或值进行算术运算时使用的符号。算术运算符共有五种，分别为：+ (加) ， - (减) ， * (乘) ， / (除) ，% (取余) 。其中稍微难一点的是 取余运算，取余运算又称取模运算，是指返回除法的余数，例如： 9 % 2 = 1 ; 5 % 3 = 2 ; 3 % 4 = 3.

​ 其次还需要注意的是，虽然浮点数最高能精确到17位小数，但其在进行算术运算时的精确度却不如整数，例如：

var result = 0.1 + 0.2; 
console.log(result);// 结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100);   // 结果不是 7，  而是：7.000000000000001

​ 这是因为计算机在进行算术运算时，需要把数据转换成二进制再进行计算，而浮点数的所占的位数多，十分容易出错。所以不要直接判断两个浮点数是否相等。

3、递增(减)运算符

​ 递增(减)运算符是指 ++ (递增) – (递减) ，用来给数字变量加一或者减一，功能相当于 num = num + 1 或 num = num - 1。而且在JS中，递增和递减运算符可以放在变量前面，成为前置递增(递减)运算符，也可以放在变量后面，称为后置递增(递减)运算符。

​ 前置递增(递减)运算符的使用口诀是：** 先自加，后返回值运算**。例如：

var  num = 10;
alert(++num + 10);   // 21

​ 当前置递增(递减)运算符与其他算数运算在一个表达式中时，要先运行变量递增(递减)再进行其他算术运算。

​ 而后置递增(递减)运算符正好相反。使用口诀是：先返回值运算，再自加。例如：

var  num = 10;
alert(10 + num++);  // 20

​ 即先进行其他算术运算，再进行变量递增(递减)。

4、比较运算符

​ 比较运算符又称关系运算符是用来对两个数据进行比较的，进行运算后，会返回一个布尔值(true / false ) 的结果。常见的比较运算符有以下几种：

​ > (大于) , < (小于) , >= (大于等于) , <= (小于等于) , == (等于) , != (不等) ,=== (全等) , !== (不等)

​ 其中 = = (等于) 和 = = = (全等) 的区别在于，前者只需要等号两边的值相等即可，数据类型不做要求，系统会自动进行数据类型转换，而后者必须值和数据类型都相等，结果才是 true。

​ != (不等) 和 !== (不等)也是一样，前者只关注于值是否不等，而后者还要关注数据类型是否相等，数据类型不同的值，一定不相等，结果一定为true。

var num = 1;  
var str = '1';
var test = 1; 

test == num  //true　相同类型　相同  
test === num //true　相同类型　相同值 
test !== num //false test与num类型相同，其值也相同,　非运算肯定是false
num == str  //true 　把str转换为数字，检查其是否相等。  
num != str  //false == 的 非运算 
num === str //false 类型不同，直接返回false 
num !== str //true  num 与 str类型不同 意味着其两者不等　非运算自然是true

5、逻辑运算符

​ 逻辑运算符是用来进行布尔值运算的运算符，运算符两侧都是布尔类型的数值，其返回值也是布尔类值。逻辑运算符包括： && (与) , || (或) , ! (非) 。注意：代表空 和 否定 的值 会被转换为 false ，如 ：’’、0、NaN、null、undefined，其他的值都为 true。

​ && (与) 运算，只有运算符两边都是 true 的情况下，返回值才为 true ，否则为 false。

var a = 2>1 && 3>1  //true
var b = 2>1 && 1>3  //false
var c = 2<1 && 3<1  //false

​ || (或) 运算，只有运算符两边都是false的情况下，返回值才为false，否则为true，只要有一边为 true 返回值就为true 。

var a = 2>1 || 3>1  //true
var b = 2>1 || 1>3  //true
var c = 2<1 || 3<1  //false

​ ! (非)运算，又称为取反符，就是取一个布尔值相反的值。

var a = !true; // false
var b = !false; // true

​ 逻辑中断(短路运算)：当一条语句中有多个表达式时，如果左边表达式的值可以确定结果时，就立即中断，不再运行右边的表达式，可以减少运算成本，节约系统资源。但是&& (与) 运算 和 || (或) 运算 逻辑中断的规则不同。

​ ①&& (与) 运算： 表达式1 && 表达式2

//如果第一个表达式的值为真，则返回表达式2的值
//如果第一个表达式的值为假，则返回表达式1的值
//当有多个表达式时，要按照从前到后的顺序一一进行运算
console.log( true && false );        // false
console.log( false && true );        // false
console.log( 123 && 456 );        // 456
console.log( 0 && 456 );          // 0
console.log( 123 && 456&& 789 );  // 789

​ **②|| (或) 运算：**表达式1 || 表达式2

//如果第一个表达式的值为真，则返回表达式1
//如果第一个表达式的值为假，则返回表达式2
//当有多个表达式时，要按照从前到后的顺序一一进行运算
console.log( true || false );        // true
console.log( false || true );        // true
console.log( 123 || 456 );         //  123
console.log( 0 ||  456 );          //  456
console.log( 123 || 456 || 789 );  //  123

6、赋值运算符

​ 赋值运算符是用来把数据赋给变量的运算符。包括有： = 、+= 、-= 、*= 、/= 、%= 。

​ 其中第一个是 直接把值赋值给变量，后五个都是先将变量进行算术运算得出结果后，再把值赋值给变量。

var age = 10; //直接赋值
age += 5;  // 相当于 age = age + 5;
age -= 5;  // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;
age /= 10; // 相当于 age = age / 10;
age %= 10; // 相当于 age = age % 10;

7、运算符优先级

​ 运算符的优先级从高到低为： ① 小括号（）②一元运算符 ++ – ！③算术运算符 先 * / % 后 + - ④关系运算符 > >= < <= ⑤相等运算符 == != === !== ⑥逻辑运算符 先 && 后 || ⑦赋值运算符 = ⑧逗号运算符 ，。

二、流程控制

1、概念

​ 流程控制就是指根据条件按照一定的结构顺序来执行代码。流程控制有三种结构顺序，分别为： 顺序结构、分支结构 和 循环结构 。

2、顺序结构流程控制

​ 顺序结构是程序中最简单的流程控制，就是简单地按照代码的先后顺序依次执行。

3、分支结构流程控制

​ 分支结构是指在代码的执行过程中，根据不同的条件，执行不同的代码，得到不同的结果，是一个多选一的过程。JavaScript提供了两种分支结构： if 语句 和 switch 语句。

①if 语句：分为if 单分支语句 、if else 双分支语句 和if else if 多分支语句：

	**if 单分支语句** ：

// 条件成立执行大括号内代码，否则跳过大括号 执行下一条语句
if (条件表达式) {
    // 条件成立执行的代码语句
}

​ if else 双分支语句 ：

// 条件成立  执行 if 里面代码，否则执行else 里面的代码
if (条件表达式) {
    // [如果] 条件成立执行的代码
} else {
    // [否则] 执行的代码
}

​ if else if 多分支语句：

// 适合于检查多重条件。
if (条件表达式1) {
    语句1；
} else if (条件表达式2)  {
    语句2；
} else if (条件表达式3)  {
   语句3；
 ....
} else {
    // 上述条件都不成立执行此处代码
}

②switch分支流程控制：

​ switch语句也是多分支流程控制，基于不同的条件执行不同的代码，当表达式的值是有限个固定的值时，推荐使用switch。switch表达式的值与case后面的值进行比较，如果值相等，就执行对应case中的代码，然后以break 结尾，跳出switch ，执行后面的代码。如果没有匹配的值，则执行default里面的代码。

switch( 表达式 ){ 
    case value1:
        // 表达式 等于 value1 时要执行的代码
        表达式1
        break;
    case value2:
        // 表达式 等于 value2 时要执行的代码
        表达式2
        break;
      .
      .
      .
    default:
        // 表达式 不等于任何一个 value 时要执行的代码
        表达式3
}

​ *注意：case中一定要在最后写break，否则当执行完匹配的case中的语句时，switch不会结束，会继续执行下一个case中的代码，无论值是否匹配都会执行，直到碰见break 或者 执行到最后。例如下面的代码，当与第一个case相匹配时，会一直执行到第四个case才会结束。

switch( 1 ){ 
    case 1:
        // 表达式 等于 value1 时要执行的代码
        表达式1
    case 2:
        // 表达式 等于 value2 时要执行的代码
        表达式2
    case 3:
        // 表达式 等于 value2 时要执行的代码
        表达式3
    case 4:
        // 表达式 等于 value2 时要执行的代码
        表达式4
        break;
      .
      .
      .
    default:
        // 表达式 不等于任何一个 value 时要执行的代码
        表达式5
}

③if-else语句和switch语句的区别

​ switch语句通常用于处理表达式的值比较固定的情况，而if-else语句通常用于范围的判断。

​ switch语句进行条件判断后会直接跳到相匹配的case中执行代码，效率更高，而if-else语句有几个条件判断语句就要进行几次条件判断。

​ 当分支数量较多时，switch语句的结构更清晰。

4、三元表达式

语法结构：

//表达式1 ? 表达式2 : 表达式3;
1>2? yes:no;  // no

​ 如果表达式1的值为true， 则返回表达式2的值，如果为false，则返回表达式3的值。类似于if-else双分支的简写，结构更清晰。