Go to comments

JavaScript 运算符

一、比较运算符


计算机的一切运算符,但凡它叫运算符不管是逻辑运算符、计算运算符…,它强调的是运算,其它的都是作为运算的修饰词,

“比较运算符”比较是运算的修饰词叫定语,运算是重要的但凡运算就要求结果的


比如  1 > 2  1大于2是要求结果的,拿个变量就能接收它的结果,结果是什么呢?结果就两个布尔值 true/false 代表比较运算符的结果

var a = 1 > 2;

document.write(a); // false


 1 < 2  返回结果是true

var a = 1 < 2;

document.write(a); // true


只有数字和数字能比吗?

一切东西都能比,只是比较规则需要探究而已


看下面的例子,始皇帝比我大吗?

var a = "秦始皇" > "我本人";

document.write(a); // true

 "秦始皇" > "我本人"  比较的是字符串,字符串比较的有它一系列的规则,字符串比的是 ASCII 码(0 - 127)


什么是ASCII码?

ASCII 码最开始有128个,ASCII码由二进制数来表示,一开始由7位二进制数  0000000  这7个二进制的数能表示128个十进制的数。

比如 0000001 代表十进制的1,0000010 代表十进制的2,

这七位二进制的数能表示十进制的“0到127”,这0到127每个数都对应的什么东西呢?

0到127每个数后面都对应的是一个字符,计算机要比较两个字符,比如  "a" < "b"  比较的是字符串"a"后面对应的ASCII码和"b"后面对应的ASCII码它俩谁大。


看一下ASCII码表,a代表97、b代表98…大写A代表65

pic1611118722345611.png


简单的说字符串比较的就是ASCII码的顺序

var a = 'a'; // ASCII:97

var b = 'b'; // ASCII:98

document.write(a > b); // false


补充一下

ASCII 码分 ASCII一码 跟 ASCII二码,ASCII二码是8位二进制数128-255(0 - 255),在拓展就拓展到 Unicode 编码


字符串"1"大于字符串"8"吗?字符串"1"的ASCll码是49,"8"的ASCll码是56

var a = "1" > "8";

document.write(a); // false


字符串"10"和字符串"8"比呢?字符串"10"不读十,它读字符串"一零"。

奥运会国家出场顺序是按照26个字母顺序排的,有很多个a开头的国家怎么办呢?比第二个字母。

所以字符串"10"符号的原则是先拿开头的"1"比较,字符串"1"已经小于字符串"8"了,就不看第二个字符了,这是字符串比较的原则。

var a = "10" > "8";

document.write(a); // false


== 等不等于,是否等于

1是否等于2?把1是否等于2的结果赋到a里面去,但凡比较运算符得的结果是布尔值

var a = 1 == 2;

document.write(a); // false


>=<= 不说了


!= 是否不等于,叹号是不等于到意思

var a = 1 != 2;

document.write(a); // true


下面说一个特殊的原则


数字1等于数字1

var a = 1 == 1;

document.write(a); // true


undefined等于undefined返回true,两边看着视觉上都一样

var a = undefined == undefined;

document.write(a); // true


然后看一个

infinity等于infinity吗?等于返回true,计算机里面infinity加1大于正无穷,是固定值下面

var a = infinity == infinity;

document.write(a); // true


再看非数NaN,就NaN这个是特例,NaN不等于任何东西包括自己,这就是定式是一个规则

var a = NaN == NaN;

document.write(a); // false

下面的逻辑运算符是本次课程的重点!


二、逻辑运算符

这三个"&&"、"||"、"!"是重点叫逻辑运算符


1、与运算符(&&)

&&

与运算符一般是放在 if 判断里面,其实那种用法是变相用法,本质上可以是这样的  var a = "1 && 2" ,一定记住运算符就是要求结果

 1 && 2  一般来说两边是真才是真,1和2都是真应该返回true,而结果返回数字2

var a = 1 && 2;

document.write(a); // 2


与运算符(&&)有个规则是为了求结果的,它是一定会返回结果,结果怎么返回呢?

这里只研究前后两个表达式的情况,

它会先看“与运算符”前面第一个表达式是一个单独的数也好(1 && 2),是一个计算的表达式(1+1 && 2)也好都算是一个表达式,第一个表达式转换成布尔值的结果如果为真

那么它会看第二个表达转换为布尔值的结果,

然后如果只有两个表达式的话,只看到第二个表达式就可以返回该表达式的值了,如果前面第一个表达式转换成布尔值为真,第二个表达不用看了,直接把第二个表达式的结果返回,也就是说运算结果是2


注意:这六个值 undefined、null、NaN、 ""、0、false,转换成布尔值都是 false


如果前面的运算结果为真,它就会把第二个表达式的运算结果返回,下面第二个表达式是  2 + 2 

判断第一个表达式 1 转换成布尔值是真,看第二个表达式的运算结果直接返回,所以a的运算结果是4不会返回true或false,只会返回原本的值这是第一种情况

var a = 1 && 2 + 2;

document.write(a); // 4


第二种情况,当第一个表达式0转换成布尔值为false的时候,不再往后走了直接把第一个表达式的值 0 返回

var a = 0 && 2 + 2;

document.write(a); // 0

两个表达式的时候就看第一个表达式,如果第一个是真把第二个结果返回,如果第一个是假就把第一个表达式的结果返回


关注一下整体的,下面这个表达式运算完结果的布尔值,如果第一个表达式为假它返回的结果是0,0再转换成布尔值是假

var a = 0 && 1;

document.write(a); // 0

如果第一个是真第二个是假,它会返回第二个,不会看第二个是不是假,直接返回第二个0,返回这个0转换成布尔值还是假

var a = 1 && 0;

document.write(a); // 0

所以那句顺口溜是这么来的,是关注它的结果“全真才为真,有一个假就是假”是片面抽象完后的结果,如果关注值返回的是真实得值,只不过把值转换成布尔值,才出现这句话全真才为真,有一个假就是假。

var a = 1 && 1;
document.write(a); // 1

var a = 1 && 0;
document.write(a); // 0

var a = 0 && 1;
document.write(a); // 0

如果是三个表达式或多个表达式呢?它会按照这个规则依次往后看

先看第一个表达式是否为真,如果为真看第二个表达式,如果第二个的表达式也为真,它会看第三个表达式,也就是说它往后走的原则是,当是真的就往后走,一旦遇到假的就返回假的值。

下面第一个是真看第二个,第二个表达式也是真看第三个,第三个表达式如果是最后一个直接把结果返回

var a = 1 && 1 && 1;

document.write(a); // 1

如果当第一个为假呢?那就直接返回第一个表达式的值

var a = 0 && 1 && 1;

document.write(a); // 0

如果第一个不是假,第二个是假false呢?那到第二个表达式就中断了,遇到假的就停并返回值

var a = 1 && false && 1;

document.write(a); // false

所以连成串也是符合那个道理,有一个假就是假,全真才为真,这就是“与运算符”

“与运算符”还可以复杂点

什么是运算符?运算符就是两侧还可以兼容其它运算符

var a = 1 + 1 && 1 - 1;

document.write(a); // 0

与运算符(&&)的高级的用法

与运算符有中断的作用,如果前面是0就不看后面的了,这是一种中断,与运算符两侧只写上表达式就可以,这个表达式可以是数字运算、计算、也可以是一种函数的写法或打印出东西的写法都行。

下面用“与运算符”不在接收它的返回值了,只拿它当做一种短路语句来用,什么是短路语句?如果…那么…

换句话说我只关注它能不能读到第二句,如果它能读到第二句就执行,读不到就不执行

0 && document.write('打印');

这样方便做一个判断,如果2大于1就打印出后面的语句,这样不关注返回值只关注执行顺序

2 > 1 && document.write('二大于一符合条件打印了');

不关注返回值,这时候它就变成了“短路语句”,如果前面是假的后面就不执行,如果前面是真才执行后面的内容跟短路了一样,虽然跟if语句差不多,这里我们叫它短路语句,它是if的简写形式,if的表达形式太过复杂。

一般公司里处理需求的时候,后端会给前端传数据,前端拿到后端给的数据以后放到页面里面去,但后端的传的数据有时候是不靠谱的,有时候数据是空的或错误数据,所以前端拿到数据的时候先判断一下,数据是有还是没有,没有就不能处理否则会报错,这时候就要短路语句来处理。

var data = ...;
// 执行一个语句会用到data
// 但是不能直接执行,要先判断data有没有意义才执行

data && 执行一个语句
// 如果data是空的,变量是没有值是undefinde转化布尔值false,就不会不执行到下面去
// 执行这个语句得到一个保障,只要前面的值有意义才执行没意义的不执行,这是短路语句的一个基本应用

一般在公司里是这样写的,ajax传的参数

data && fn(data); // 参数传过来才有意义,如果参数没有意义程序就瘫痪了,所以判断一下传过来在执行。

单独的与"&"真实的开发中没有用,知道有这样一个存在!

//有一种高大上的运算叫与运算,二进制什么的没懂!!!
var a = 1 & 2;
document.write(a);//0

2、或运算符“||”

或运算符与运算符大致差不多,但有点东西是相反的,或运算符先看第一个表达式是不是真,如果是真就不往后看了并把值返回(1),或运算符是碰到真就返回

var num = 1 || 3;

document.write(num); // 1

第一个表达式是4,或运算符根本不看第二个表达式,遇到真就返回4

var num = 4 || 3;

document.write(num);// 4

第一个表达式是0呢?碰到假就往后看寻找一个真返回,如果有两个表达式第一个为假,第二个不管是什么都得返回第二个,所以第二个用不着看了直接返回3

var num = 0 || 3;

document.write(num); // 3

如果第一个表达式是数字0第二个是false呢?一共就两个表达式,只能返回最后一个false了

var num = 0 || false;

document.write(num); // false

这里也符合原则,如果关注这个“与逻辑运算符”它运算完结果的值,结果的布尔值有一个真就为真,全假才为假

var num = 0 || false || 1;

document.write(num);// 1

 ||      有一个真就是真,全假才为假,“或运算符”碰到真就停。

 &&  全真才为真,有一个假就为假,“与运算符”碰到假就停。

var num = 0 || false || 2 || 1;

document.write(num); // 2

工作中“或运算符”写兼容

div.onclick = function(ev){

    // var event = ev; 在标准浏览器,事件对象ev直接写就可以了
    // var event = ev; 在IE浏览器ev不好使,事件对象存在window.event
    
    var event = ev || window.event; // 写一个兼容,在所有浏览器里事件对象都好使,如果遇到ev里面有值就不往后看了,没有值就往后看window.event
}

3、非运算符 "!"

“非”就是否的意思,非的意思就是先把这个东西转换成布尔值在取反,不管是什么数据类型,先转换成布尔值在取反。

123转布尔值为true,true在取反为false

var a = !123;

document.write(a); // false;

空字符串是false,取反后为true

var a = !"";

document.write(a); // true

下面难一点的“!!”

“非非”意思是变布尔值取反,在把布尔值再取反

var a = !!"";

document.write(a); // false;

验证一下“非非”取反再取返,把结果是false的6个值都验证一下

var a = !!0;
document.write(a); // false;

var a = !!NaN;
document.write(a); // false;

var a = !!null;
document.write(a); // false;

var a = !!undefined;
document.write(a); // false;

var a = !!false; // false不用说也是false
document.write(a); // false;

下面a最后得的是什么?a是false,自身取反赋给自身

var a = true;

a = !a;

document.write(a); // false;

有没有“非等于”?没有,下面这是表达a、b它俩个等不等

a != b;



Leave a comment 0 Comments.

Leave a Reply

换一张