前端-JavaScript2-5——JavaScript之运算符进阶

运算符（Operators，也翻译为操作符），是发起运算的最简单形式。

运算符的分类见仁见智，我们的课程对运算符进行如下分类：

数学运算符(Arithmetic operators)

比较运算符(Comparison operators)

逻辑运算符(Logical operators)

赋值运算符(Assignment operators)

按位运算符(Bitwise operators)

条件 (三元) 运算符(Conditional operator)

3.1 数学运算符

+ - * / % ()

■ 这里面要知道%的意思，我们昨天已经算过很多了，不赘述。

■ 要知道计算顺序，先乘除求余，然后加减，我们昨天已经算过很多了，不赘述。

■ 隐式转换，所有带有字符串的运算都会尽可能的转为数字进行计算，加号比较特殊。

数学运算符的正统，是number和number的数学运算，结果是number。出于面试的考虑，有一些奇奇怪怪的数学运算：

数学运算中，只有纯字符串、布尔值、null能够帮你进行隐式转换：

1 //隐式转换：就是没有写parseInt()、parseFloat()自己帮你转格式

3 console.log(3 * "8"); //24

4 console.log("3" * "8"); //24

5 console.log("48" / "2"); //24

6 console.log("24" % 55); //24

1 console.log(3 * null); //0 隐式转换的时候null将被转为0

2 console.log(3 * false); //0 隐式转换的时候false将被转为0

3 console.log(3 * true); //3 隐式转换的时候true将被转为1

不纯的字符串和undefined是不能帮你进行隐式转换的，结果都是NaN

1 console.log(3 * "8天"); //NaN 数学运算中，不纯的字符串没法隐式转换

2 console.log(3 * undefined); //NaN 数学运算中，undefined不能进行隐式转换

加法比较特殊，因为+同时是加法和连字符的符号，所以加法在面对字符串的时候没有隐式转换

1 //加法没有隐式转换

2 console.log(3 + "8"); //38

3 console.log(3 + undefined); //NaN

4 console.log(3 + null); //3

5 console.log(3 + false); //3

6 console.log(3 + true); //4

总结：

无论哪种运算，只要出现了undefined参与运算，结果都是NaN。

然后"4"、false、true、null都能进行隐式转换。

加号比较特殊，面对"4"没有隐式转换的

特殊数值的计算，就是NaN、Infinity参与的运算，我们看《高3》来学习。

我们就举几个例子：

1 Infinity + 1000 //Infinity

2 Infinity - 1000 //Infinity

3 Infinity / 1000 //Infinity

4 Infinity - Infinity //NaN

5 Infinity /Infinity //NaN

6 Infinity * Infinity //Infinity

7 0 / 0 //NaN

8 6 / 0 //Infinity

9 NaN / 8 //NaN

//隐式转换：就是没有写parseInt()、parseFloat()自己帮你转格式

        // console.log(3 * "8");    //24

        // console.log("3" * "8");    //24

        // console.log("48" / "2"); //24

        // console.log("24" % 55);    //24

        // console.log(3 * null); //0   隐式转换的时候null将被转为0

        // console.log(3 * false); //0  隐式转换的时候false将被转为0

        // console.log(3 * true);    //3  隐式转换的时候true将被转为1

        // console.log(3 * "8天");    //NaN    数学运算中，不纯的字符串没法隐式转换

        // console.log(3 * undefined); //NaN  数学运算中，undefined不能进行隐式转换

        // //加法没有隐式转换

        console.log(3 + "8");    //

        console.log(3 + undefined);    //NaN

        console.log(3 + null);        //

        console.log(3 + false);        //

        console.log(3 + true);        //

3.2 关系运算符

> 大于

< 小于

>= 大于等于

<= 小于等于

== 等于

!= 不等于

=== 全等于

!== 不全等

关系运算符的正统，number和number进行数学运算，得到的答案boolean。

1 console.log(8 > 5);

2 console.log(7 < 4);

关系运算的结果，是boolean类型的。

true和false叫做布尔值。boolean类型，boolean类型只有两个值，就是true和false。表示真、假。

== 我们叫做“相等判断”，它会帮你进行一个隐式转换，尽可能的得到true的答案：

1 console.log(5 == "5"); //true

===我们叫做“全等判断”，不仅仅比较数值是否相等，还比较类型是否相等

!= 是==的反面，如果==运算是true，那么!=就是false

!==是===的反面，如果===运算是true，那么!==就是false

1
console.log(5 != "5"); //false ，脑子要反着想一下，5=="5"结果是t，所以就是f

2
console.log(5 !== "5"); //true ，脑子要反着想一下，5==="5"结果是f，所以就是t

正统的运算讲完了，number和number进行关系运算，结果是boolean。

现在我们讲一丢丢不正统的关系运算，为了面试，划一下重点，更多的自己通过《高三》P50、P51、P52：

① string 和 string 也能够进行关系运算，比较的就是字符编码顺序。

字符编码顺序，就是数字、大写字母、小写字母

1
"a" < "b" //true

2
"A" < "B" //true

3
"A" < "a" // true ，大写字母在字符集里面是在小写字母前面

4
"1" < "A" //true ，数字在字母前端

5
"blank" < "blue" //true
因为一位一位比，直到比出大小

6
"25678" < "3" //true
因为是string和string比，比的是字符编码顺序

② 与数字进行关系运算时，纯数字字符串被转为数字，null转换为0，true转换转为1， false转换为0

null不能进行和0的相等判定

1
null < 0.00001 //true

2
null > -0.0001 //true

3
null == 0
//false 具体原因，我们后面讲解Object的时候介绍

4
false == 0
//true

5
true == 1 //true

③ NaN不等于自己，不全等于自己

1
NaN == NaN
//false

2
NaN === NaN
//false

3
NaN != NaN //true

4
NaN !== NaN //true

④ string 和 number比，string会被隐式转换为number

1
"25" < 3 //false

需要注意的是，我们已经了解了一些不正统的运算，所以不要出洋相，不能连续使用关系运算符！！

比如我们想验证3大于2,2大于1：

表达式：

1
3 > 2 > 1

的值是多少？

解：原式=(3>2)
>1 = true > 1 = false
(因为true会被当做1来与1进行比较)

也就是说，不能连续使用关系运算符！！因为一旦连续使用了，实际上还是从左至右计算，所以就有上一步的boolean参与了下一步的运算。

剧透一下，如果想要使用连续关系运算，1<2 &&
2<3

// console.log(8 > 5);        //true

        // console.log(7 < 4);        //false

        // console.log(9 >= 8);    //true

        // console.log(9 >= 9);    //true

        // console.log(5 <= 9);    //true

        // console.log(5 <= 5);    //true

        // console.log(5 <= 4);    //false

        //==表示相等，会帮你进行隐式转换

        // console.log(5 == 8);    //false

        // console.log(5 == 5);    //true

        // console.log(5 == "5");    //true

        // console.log("5" == 5);    //true

        //===表示全等，不仅仅比较数值是否相等，还比较类型是否相等

        // console.log(5 === 5);    //true

        // console.log(5 === "5");    //false

        // console.log("5" === 5);    //false

        // != 和 !==

        console.log(5 != 6);    //true

        console.log(5 != "5");    //false ， 脑子要反着想一下，5=="5"结果是t，所以就是f

        console.log(5 !== "5");    //true ， 脑子要反着想一下，5==="5"结果是f，所以就是t

3.3 逻辑运算符

逻辑运算符就三个：

&& 逻辑与运算

|| 逻辑或运算

! 逻辑非运算

正统来说，参与逻辑运算的是boolean和boolean，得到的结果也是boolean

值按照真值表来定

&& 逻辑与，“且”

a && b
a	b	结果
真	真	真
真	假	假
假	真	假
假	假	假

“都真才真”，“有假就假”。

命题1：“地球是圆的” 真的

命题2：“宋仲基很帅” 真的

命题1 且命题2 真的

命题1：“1+1=3” 假的

命题2：“地球是方的” 假的

命题1 且命题2 假的

1
//逻辑运算符

2
console.log(true &&
true); //t

3
console.log(true &&
false); //f

4
console.log(false &&
true); //f

5
console.log(false
&& false); //f

|| 逻辑或，“或者”的意思

a \|\| b
a	b	结果
真	真	真
真	假	真
假	真	真
假	假	假

“有真就真”，“都假才假”

命题1： 1 + 1 = 2

命题2：“邵老师很帅”

命题1 或者命题2 总结果是真

1
console.log(true ||
true); //t

2
console.log(true ||
false); //t

3
console.log(false ||
true); //t

4
console.log(false ||
false); //f

!就是“逻辑非”，相反的

1
console.log(!true); //f

2
console.log(!false); //t

3
console.log(!!!!!!!!!false); //t

运算顺序是非、与、或

1
true || false && !true || false;

解：原式 = true
|| false && false || false

= true || false || false

= true || false

= true

逻辑运算符最最有意思的事情，就是所谓的“短路语法”。

就是你发现没有，

如果计算一个且运算的时候，比如a
&& b，a如果就是一个false，那么就不会管b是什么，直接输出false就行了，等于说直接输出a。

如果计算一个且运算的时候，比如 a
&& b ，a如果就是一个true，那么也不用管b是什么，直接把b当做结果输出就行了。

也就是说，本质上计算机进行a&&b运算的时候，不是在进行逻辑分析，这小子就想着要么扔a，要么扔b。如果a是负性的，那么直接扔出a；如果a是正性的，直接扔出b。

—— 短路语法。要么a被短路，要么b被短路。

负性的：false，null， 0， NaN，空字符串("")，undefined

正性的：除了上面的，全是正性的。

1
false && 8 //false
因为计算机发现，且运算a已经是false了，直接输出false

2
null && 8 //null
因为计算机发现，且运算a已经是false性的了，直接扔出来null

3
true && 13 //13
因为计算机发现，且运算a是true，所以总结果就是看b，直接扔出b

4
12 && 13 //13
因为计算机发现，12当做true，所以总结果看b，直接扔出b

5
13 && 12 //12
因为计算机发现，13当做true，所以总结果看b，直接扔出b

6
undefined && 哈哈 //undefined
不报错，因为a已经是负性的了，所以直接扔出a，哈哈不管

7
哈哈
&& undefined //报错

8
true && NaN //NaN
扔后面

|| 逻辑或的短路也是类似的，a||b

计算机发现a是真，那么扔a；如果a是假，那么扔b

1
0 || 18
//18 前面假，扔后面

2
18 || 0
//18 前面真，扔前面

3
undefined || NaN //NaN
前面假，扔后面

4
NaN || undefined //undefined 前面假，扔后面

1
88 || 99 && 66 || 55

解：原式 = 88 ||
66 || 55

= 88 || 55

= 88

1
undefined && ("3"
!= 3) || NaN && null

解：原式 = undefined
&& false || NaN && null

= undefined || NaN
&& null

= undefined || NaN

= NaN

总结一下短路语法：

a&&b，
计算机要么执行a要么执行b。a真执行b，a假执行a；

a||b，
计算机要么执行a要么执行b。a真执行a，a假执行b。

千万不要背，从真值表中自己推倒。

console.log(true && true);        //t

        console.log(true && false);        //f

        console.log(false && true);        //f

        console.log(false && false);    //f

        console.log(true || true);        //t

        console.log(true || false);        //t

        console.log(false || true);        //t

        console.log(false || false);    //f    

        console.log(!true);            //f

        console.log(!false);        //t

        console.log(!!!!!!!!!false);    //t

        运算顺序是非、与、或

        var a = true || false && !true || false;

        console.log(a);

3.4 赋值运算符

= 赋值

+= 简便写法

-= 简便写法

*= 简便写法

/= 简便写法

%= 简便写法

赋值运算的参与者，一定是变量。

1 var a = 1;

2 a += 2; //这行语句等价于a = a + 2;

3 console.log(a); //3

1 var b = 6;

2 b /= 3; //等价于b = b / 3

3 console.log(b); //2

1 var c = 100;

2 c %= 10; //等价于c = c % 10;

3 console.log(c); //0

1 var a = "我";

2 a += "爱";

3 a += "你";

4 console.log(a);

++运算符：

1 var e = 10;

2 e++; //等价于e=e+1

3 console.log(e); //11

++可以与输出语句写在一起，++写在变量前和写在变量后不是一个意思

a++ : 先用a的原值，然后a加1；

++a ：先给a加1，然后用a的新值

1 var f = 10;

2 console.log(f++); //10 ，先引用原值，然后加1

等价于：

1 //等价于

2 var f= 10;

3 console.log(f); //先输出f

4 f++; //然后f加1

1 var g = 10;

2 console.log(++g); //11 ，这次是先加1，然后输出

++有花式玩儿法，仅面试有用：

1 var a = 8;

2 console.log(4 + a++); //12 ，先使用原来的a的值，就是4+8，输出12.然后a加1

3 console.log(a); //9

1 var i = 9;

2 console.log(++i % 5); //0 , 先把i加1，然后使用i，10%5=0

3 console.log(i); //10

运算符的计算顺序：

++ -- !贴身的 →→→ 数学 →→→ 比较 →→→ 逻辑 →→→赋值

1
var a = 3 < 6 && 7 < 14; //true

原式 = true
&& true

= true

1
var a = 1 + 2 < 3 + 3 && 3 + 4 <
2 * 7;

原式 = 3 <
6 && 7 < 14

= 上一题

= true

1
var a = false + true && 13;

原式 = 0 + 1
&& 13

= 1 && 13

= 13

1
var a = 15;

1
false + a++ + true > 8 && 13 || 6

原式 = false
+ 15 + true > 8 && 13 || 6

= 16 > 8 && 13
|| 6

= true && 13 || 6

= 13 || 6

= 13

用户输入一个数字，告诉用户是否已经成年

//第1步，用户输入一个年龄

        var age = parseInt(prompt("请输入你的年龄"));

        //第2步输出

        // (age >= 18) && alert("你已经成年了！！");

        // (age < 18) && alert("你没有成年啊！！！");

        // 也可以这么写，程序是对的：

        (age < 18) || alert("你已经成年了");

        (age >= 18) || alert("你没有成年啊！！");

赋值运算符
// var a = 1;

        // a += 2;        //这行语句等价于a = a + 2;

        // console.log(a);        //3

        // var b = 6;

        // b /= 3;   //等价于b = b / 3

        // console.log(b);        //2

        // var c = 100;

        // c %= 10;        //等价于c = c % 10;

        // console.log(c);    //0

        // var d = "我";

        // d += "爱";

        // d += "你";

        // console.log(d);

        // var e = 10;

        // e++;            //等价于e=e+1

        // console.log(e);    //11

        // var f = 10;

        // console.log(f++);    //10

        // //等价于

        // var f= 10;

        // console.log(f);

        // f++;

        // var g = 10;

        // console.log(++g);    //11

        // //等价于

        // var g = 10;

        // g++;

        // console.log(g);

        // var h = 8;

        // console.log(4 + h++);

        // console.log(h);

        // var i = 9;

        // console.log(++i % 5);   //0  , 先把i加1，然后使用i，10%5=0

        // console.log(i);     //10

综合运算符
// var a = 3 < 6 && 7 < 14;    //true

        // console.log(a);

        // var a = 1 + 2 < 3 + 3 && 3 + 4 < 2 * 7;        //true

        // console.log(a);

        var a = false + true && 13;

        console.log(a);