JavaScript 02 (运算符和选择结构)

js的关系运算符,js的逻辑运算符,js的赋值运算符,js的运算符的优先级问题,js的自增和自减,js的选择结构

目录：

一、关系运算符

二、逻辑运算符

三、赋值运算符

四、a++和++a

五、运算符的优先级问题

六、选择结构（if/else if/else）

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

欢迎大家去我的个人技术博客看看，点赞收藏注册的都是好人哦~

https://xiaowu.xyz

一、关系运算符

首先，关系运算符得到的结果一定是一个布尔值的结果，也就是true或者false.

---

关系运算符有哪些？

<、>、<=、>=、==、===、!=、!==

注意：单个等号(=)，表示的是赋值，而不是比较。

---

<、>、<=、>=是小学数学内容，类似于5>3，3<5这样的，就不细谈了。

两个等号(==)      判断两个值是否相等，只比较数值 不比较类型         

 !=        判断两个值是否不相等，只比较数值 不比较类型

三个等号(==)       判断两个值是否全等，既比较数值 又比较类型

!==       判断两个值是否不全等 (既比较数值 又比较类型)

---

数字的比较十分简单，我们需要记住一些特殊的比较。

    // 特殊的

    // undefined == null  //undefined 等于 null 

    // 0 != null;    //0  不等于 null

    // NaN != NaN   // NaN  不等于 NaN

    // "NaN" != NaN  // 字符串类型的NaN  不等于  number类型的NaN

    // "NaN" == "NaN"  // 字符串类型的NaN  等于 字符串类型的NaN 

    // 1 == true  // number类型的1  等于  布尔类型的true

    // 0 == false  // number类型的0  等于  布尔类型的false

    // 2 != true   // number类型的2   不等于  布尔类型的true

    // null != false  // null   不等于  布尔类型的false 

    // undefined != false  //undefined 不等于  布尔类型的false 

    // NaN != false  //NaN不等于  布尔类型的false 

---

null != false // null   不等于  布尔类型的false

undefined != false // undefined 不等于  布尔类型的false 

NaN != false // NaN 不等于  布尔类型的false 

这三个会有很多程序员有疑问。

因为我们肯定有用过

if(!null / undefined / NaN){

    alert(1);

}

---

这个1肯定会弹出，那么( !null / undefined / NaN) 一定是 true，那么(null / undefined / NaN)，一定是false

所以得到：

null                 == false

undefined     == false

NaN                == false

但是！这个是错误的！！！

写在if的表达式里，相当于：

if(Boolean(null / undefined / NaN)){}

所以(null / undefined / NaN)会被转换为布尔值类型的false来进行比较。

所以！！！

(null / undefined / NaN)直接进行比较是不等于false的

---

js中的 关系表达式不能连写（是可以写，但是结果不好理解，所以我们为什么要为难自己）

var c = 3 < 5 <  2;   //true    首先3<5  =>  true ，然后 true<2  ，true会被转成1，1<2  => true；

二、逻辑运算符

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

与/且 (&&) 同真为真 遇假为假 (找假的)

var result = 5 > 3 && 5 < 10;                                 // true && true => true

var result = 5 > 3 && 5 < 10 && 1 == false;          // true && true && false =>false

或 (||) 同假为假 遇真为真 (找真的)

    var result = 5 > 3 || 5 < 10;       // true || true => true

    var result = 5 > 3 || 5 > 10;       // true || false  => true

    var result = 5 < 3 || 5 > 10;       // false || false  => false

非(!) 颠倒是非,真变成假，假变成真

    var result = !(5 > 3);         // false

    var result = !false;            // true

    var result = !1;                 // false

    var result = !null;             // true

---

拓展：

我们需要明白一点，逻辑运算符不会去改变变量的类型，我们之前的例子出现的结果都是false和true是因为关系运算符的结果。

所以 

会有这样的操作

var a = 1 && 2;            //2

var a = 0 && 5;            //0

var a = 1 || 2;               //1

var a = 0 || 5;               //5

var b =  1 && 2 || 3;     //2 

思路是这样的

遇到&&的时候

会将 &&两边的值看做是一个布尔类型的值（只是判断的时候隐式转换了，但是没有改变原值）

当&&遇到true的时候，会继续往后找，直到找到 某个值 转换为布尔值为false，他就会停下来，那个值就是最终的结果。

如果没有值为false的，就会一直找到最后，输出最后一个值。

口诀：假前真后

遇到||的时候

会将 ||两边的值看做是一个布尔类型的值（只是判断的时候隐式转换了，但是没有改变原值）

当&&遇到false的时候，会继续往后找，直到找到 某个值 转换为布尔值为true，他就会停下来，那个值就是最终的结果。

如果没有值为true的，就会一直找到最后，输出最后一个值。

口诀：真前假后

---

逻辑运算符的优先级：

！>  &&  >  ||

三、赋值运算符

=  等号  赋值运算符

将一个值 +，-，*，/，%后再赋值给原值的就可以使用赋值运算符

var a = 10;

a = a + 5;

可以写成

    a += 5;

    // a += 5;          // a = a + 5;

    // console.log(a);

    // a -= 5;         // a = a-5;    //95

    // a *= 5;         // a = a*5;    //500

    // a /= 5;         // a = a/5;    //20

    // a %= 5;       // a = a/5;    //20 

如果 加减赋值运算 的具体 数值 为1的话  还可以进一步的简写

a++;

a--;

四、  a++ 和 ++a

！！！！！！！！！！！！！！！

    // 如果在自增过程中存在其他操作

    //  a++  先赋值  在自增

    //  ++a  先自增  在赋值

    //  a--  先赋值  在自减

    //  --a  先自减  在赋值

    // 总结 

    // ++/-- 在后 先赋值 再自操作 (a++,a--);

    // ++/-- 在前 先自操作 再赋值 (++a,--a);

自增过程中存在其他操作

    var a = 10;

    var b = a++;                 //10    先赋值  在自增

    console.log("a", a);      //11

    console.log("b", b);      //10

自增过程中不存在其他操作

无论是前自增还是后自增，变量本身都不会被影响，都会变成自增后的结果

var a = 10;

var b = a++;       //自增过程中 ++ 在后 先赋值,在运算

console.log(b);  //10 

console.log(a); // 11 无论你是先自增还是后自增 => 11 

复杂一点的：

     //     a        11      12         13         12     11 =>11

    var sum = a++ + ++a + a++ * 2 + a-- + --a;

    //    sum = 10 +     12  +  12*2   + 13  +  11;

五、运算符的优先级问题

运算符的优先级很重要，它将决定表达式的执行属性，如果不清楚运算符的优先级，可能会得到意想不到的结果

注意：

算术运算符  */%  高于  +-    

5 + 10 * 2

关系运算符  > , >=  < <=    高于  == ===  !=  !==      

举例 

5>3==1  =>  true == 1  => true

逻辑运算符  &&  ||  !      !  大于  &&  大于  ||      

举例 

5<3 || 5<10 && 5<2  => 5<3 || false  =>  false

! > 算术运算符 ( */%  >  +- )  >  关系运算符  >  逻辑运算符 (有一个比较特殊 ！)

    var result = 5 > !3; // ! 优先级高于 关系运算符 5>false

    var result = 5 + !3; //    !  优先级高于 算术运算符  5+false  => 5

运算符的优先级，越往上越高

运算符的优先级

六、选择结构（if/else if/else &&  switch case）

程序的三大结构

1.  顺序结构 (从上朝下执行的代码就是顺序)  代码一天接一条执行

2.  选择结构 (根据不同的情况，执行对应代码  作出不同的选择)；

3.  循环结构 (重复的做一件事)

if循环---单分支

if(表达式){

    表达式的结果为真的时候，所执行的语句

}

if循环---双分支

if(表达式){

    表达式的结果为真的时候，所执行的语句

}else{

    表达式的结果为假的时候，所执行的语句

}        

if循环---多分支

if(表达式1){

    表达式1 的结果为真的时候，所执行的语句

}else if(表达式2){

    表达式2 的结果为真的时候，所执行的语句 

}else if(表达式3){

    表达式3 的结果为真的时候，所执行的语句 

}else{

    前面表达式都为假的时候，所执行的语句

}

注意：

1.if后面的()不能省略。

2.无论执行语句是一条还是  多条，一对{ }都不能省略。

那么，什么是JS表达式呢?

JS表达式  由 运算符  和  操作数(变量和常量)  组成

（可以是单独的操作数，但是不能是单独的运算符）

    // 1+5      a+1

    // 5>3      5>a

    // 5>3 && 5

    // 数字 字符串  boolean

    // var a = 1;

    // var a = 10;

    // a++;  // a<10

    // a--;  // a>=10

    // console.log(a);

单分支

写一个0-20的随机数，如果这个数小于10，那么就加1

    var a = Math.round(Math.random() * 20);  // 0 - 20

    console.log(a); //13

// 当括号内的表达式结果成立(为true时)，则执行大括号内的语句，否则执行 else 中的语句。   

if (a < 10) {  

        a++;  //执行语句

    }

    console.log(a);

双分支

写一个0-20的随机数，如果这个数小于10，那么这个数就加1，否则这个数就减一

    var a = Math.round(Math.random() * 20);  // 0 - 20

    console.log(a); //13

// 当括号内的表达式结果成立(为true时)，则执行大括号内的语句，否则不执行。

if (a < 10) {  

        a++;  //执行语句

    } else {

        a--;

    }

    console.log(a);

多分支

判断学生分数的区间[0-100]

成绩判定

大于等于90  优秀  

大于等于80小于90 优秀

大于等于70小于80 良好

大于等于60小于70 及格

小于60  不及格

var score = Math.round(Math.random() * 100);     //0-100

    console.log(score)

    // 从上往下，满足哪个条件就执行其相对应的语句，都不满足时，执行最后的else的语句，只能进入其中之一。

    if (score >= 90) {

        document.write(score + "优秀");

    } else if (score >= 80 && score < 90) {  //[80-90)

        document.write(score + "良好");

    } else if (score >= 70) {      // [70,80)

        document.write(score + "一般");

    } else if (score >= 60) {

        document.write(score + "及格");

    } else {

        document.write(score + "不及格");

    }

选择结构的嵌套

// 选择结构是可以嵌套的

    var score = Math.round(Math.random() * 100); //0-100

    console.log(score)

    if (score >= 90) {  //90 - 100

        // document.write(score + "优秀");

        // 90-99

        // 100

        if (score == 100) {

            document.write(score + " 666666");

        } else {

            document.write(score + "优秀");

        }

    } else if (score >= 80 && score < 90) {  //80-90

        document.write(score + "良好");

    } else if (score >= 70) {  // [70,80)

        document.write(score + "一般");

    } else if (score >= 60) {

        document.write(score + "及格");

    } else {

        document.write(score + "不及格");

    }

拓展：在input框中输入一个成绩，并判断成绩的等级

   

   

   

   

    判断

这种练习还有很多，各种语言除了语法不同，但是大体的逻辑都是相同的。

比如：

输入一个0-100的数 判断是奇数还是偶数

随意输入一个年份，判断这个年份是否为闰年。

    1.能被4整除而不能被100整除.（如2004年就是闰年,1800年不是.）

    2.能被400整除.（如2000年是闰年）