前端-JavaScript2-5——JavaScript之运算符进阶
Posted 在北京要饭次的衡水小代代 (′・ω・`)
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端-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()自己帮你转格式 2 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"); //38 console.log(3 + undefined); //NaN console.log(3 + null); //3 console.log(3 + false); //3 console.log(3 + true); //4
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);
以上是关于前端-JavaScript2-5——JavaScript之运算符进阶的主要内容,如果未能解决你的问题,请参考以下文章