Javascript高级编程学习笔记（5）—— JS操作符

话不多说，开始今天的码字之旅。

突然有种日更小说的感觉，emm...

操作符

ECMAScript（JS核心）描述了一组用于操作数据值的操作符，也包括算术操作符等等

而JS中这些操作符最鲜明的特点就是，可以适用于多种数据类型。

对于Object类型，通常会调用toString（）或valueOf（）方法以便运算符能够操作。

一元操作符

顾名思义，只能操作一个值的操作符叫做一元操作符

JS中这样的操作符有两类

1.  递增递减操作符

2.一元加（减），即常用的正负号

• 递增递减操作符

JS中的递增递减操作借鉴自C，且都拥有两种类型前置、后置。

这两种操作符相信大家应该都不陌生。

前置、后置的区别往往就在于一个是运算之前值就已经加一了，后置往往是运算完成后才加一或减一；

那么这两种操作符是如何实现的呢？

前置的很简单，直接将数加一就行，那后置的呢？

大概流程是这样的：

先创建一个该变量的副本，然后将这个变量+1（-1）,让变量的副本参与运算，这样就能实现后置递增

这些与C中的都差不多，但是最大的区别在于，JS这些运算符不仅仅能用于整数。

还可以应用于其他数据类型，而且不用像C++那样重载运算符。（当然由于JS的限制也不能重载emm）

对于其他类型的数据，递增递减操作符遵循以下规则：

1.对于包含有效数值的字符串，会先将该字符串转为数值，然后对该数值进行运算（即有效的字符串处理后会变成数值变量）

2.对于不包含有效数值的字符串，将值设为NaN，并将变量变为数值变量

3.对于Boolean类型，会先将true，false转为数值0、1然后进行运算

4.对于浮点数类型，会只对整数部分进行操作

5.对于Object，先调用valueOf，若返回值为NaN，然后调用toString

即相当于会先使用Number（）对所有的值进行类型转换后再进行相应操作，具体操作见前文

• 一元加、减

这个操作符的作用除了用于转换数值的正负之外，还可以用于数据类型的转换。

因为在转换正负之前，会先对数据使用Number（）进行数据转换

转换规则与上方一致，具体操作见前文

位操作符

位操作是一个给人感觉很高大上的东西，许多的面试题也喜欢出。

这里我不讲骚操作（我也没整明白emm...），只讲一下JS中位操作的规则，以及和其他语言的一些区别

前面我提过，JS的数值都以IEEE-754标准的64位格式存储，但是整数是32位。

所以在JS中位操作不会直接操作64位的值，会先将64位的值转为32位整数，进行位操作后转回64位

这样的操作会带来一个严重的副效应，即NaN和Infinity使用位操作时会被当作0来处理。

而对于非数值进行位操作，会先用Number（）对其转换后再进行相应操作

• 按位非 ~

其操作很简单，就是将二进制的数每一位都取反，0变1,1变0,底层实现感兴趣的盆友可以自行了解。

对于咱们前端来说，不一定需要知道底层的实现，但应该知道对一个值进行操作后会有怎样的影响。

对一个数进行~操作实际上就是将该数值变为负值然后减一

• 按位与 &

有的朋友可能没用过&，但大多数感兴趣点进来的朋友应该都用过&&

&其实就是对数值的二进制的每一位都是用&&，这个操作需要两个操作数

就将两个数的二进制对齐后对每一位进行&&，如果两个数的对应位都为1那么这一位的值为1,其他情况这一位的值都为0

比如4&5

100

101

->100

所以结果为4

• 按位或 |

其操作与上面的&很像，都需要两个操作数，不过不同的地方在于，两个数的二进制位上只要有一个是1就为1

即只有同时为0值才为0

同样用4和5举例

4|5

100

101

->101

所以结果为5

• 按位异或 ^

异或顾名思义，即这一位上的数不同即相异即为真也就是1

这一位上的两个数相同（同为1或同为0）这一位的值为0

说白了，也就是判断这一位上的两个二进制数是否相同，相同为0，不同为1

同样以4、5举例

4 ^ 5

100

101

->001

即值为1，

• 左移

<< 两个小于号表示将一个数的二进制数向左移

a<<b 即表示将 a 向左移 b 位

左移后的空位以0填充

实际上也就是将 a 乘 2的b次方

以4、5举例

100 向左移动 5 位 变成：

10000000 -> 128 也就是 4 * 32 或者 4 * 2^5

• 右移

跟左移相反，右移一位即除以2；

相当于将2进制的最后一位抹去，结果也就是整除2的结果

4 >> 2

100 -> 1

需要注意的是与左移不同右移产生的空位会以符号位来填充

比如-5 >> 2

在32位2进制中：

5： 0000 0000 0000 0000 0000 0000 0000 0101

转为-4（以补码的形式保存）

-5:  1111 1111 1111 1111 1111 1111 1111 1010

右移2位：

1001 1111 1111 1111 1111 1111 1111 1110

空位以符号位补齐（这里的值是补码，求原来的值需要-1再按位取反）

1111 1111 1111 1111 1111 1111 1111 1110

1111 1111 1111 1111 1111 1111 1111 1101

1000 0000 0000 0000 0000 0000 0000 0010

即得到的结果为

-2

• 无符号右移 >>>

与一般的右移不同。无符号右移不会以符号为来填充空位

而是用0来填充，并且符号位也会随之右移，所以对正数来说并不会有什么不同

而对于负数就有所区别了

以刚才-5的例子为例如果是无符号右移：

-5:1000 0000 0000 0000 0000 0000 0000 0101

补码： 1111 1111 1111 1111 1111 1111 1111 1011

右移2位：0011 1111 1111 1111 1111 1111 1111 1110

由于符号位是0，所以会当成一个正数

所以答案为2^30-2

也就是

位运算操作符就介绍到这里

下面介绍布尔操作符

布尔操作符

• 逻辑非！

返回一个boolean值

其规则为将一个操作数先用boolean()转换为布尔值

然后再对求到的值进行求反操作

即true->false  false->true

至于Boolean（）的转换规则在之前的文章中已经介绍，这里不再赘述

甚至要是你愿意可以用 ！！ 来代替Boolean（）

你会得到一致的结果

• 逻辑与 &&

该操作符需要两个操作数，只有当两个操作数都为真时，返回的值才为真（true）

需要注意的地方在于，如果两个操作数中有一个不是布尔类型的值，那么返回值就不一定是布尔类型

遵守如下规则：

第一个操作数为对象，则返回第二个操作数

如果第二个操作数为对象，则只有第一个操作数的求值结果为true才会返回该对象

两个操作数都是对象那么返回后面那个

第一个为null 返回 null

第一个为undefined 返回 undefined

第一个为NaN返回NaN

书上的这段话可能有一些难以理解，我来稍微翻译一下吧

当两个操作数都为布尔类型时会返回一个布尔类型的值，规则和按位与的意思一样这里不再多说。主要的在于下面的部分

实际上，我们用的更多的是非布尔值，使用&&来做流程控制，&&实际上是一种短路操作。

我们知道，对于与运算必须两个值都为1结果才为1，也就是说只要一个值为0，那么结果肯定为0

所以可以这样理解&&会先将非布尔的值使用Boolean（）转换成布尔值进行判断，如果值为false那么就将当前的非Boolean值返回，如果为true就判断下一个，如果都为true那么返回最后的那个非布尔值

• 逻辑或 ||

跟逻辑与相反，逻辑或一遇到真值就会停止，不会继续往后判断

所以我们在做浏览器兼容的时候往往就会使用 || 来做浏览器的功能性检测

这里的例子也和上面的差不多，所以就不贴出来了，因为这两个布尔操作符更重要是使用场景。

做前端的应该都知道对于样式，有优雅降级，和渐进增强的说法

其实我觉得这两种操作符的适用场景和，上面的两种说法有点像；

&&相当于就是渐进增强，因为如果你第一个满足条件，第二个也满足条件取后面的那个。

这就像是有几个对象同时满足条件，只要我们把更好的放在后面，就可以让程序运行时，自动选择更好的对象作为其他用途。

常见场景是封装函数的内部，可能有些参数可以覆盖其他的参数，内部就可以使用&&来完成

而||呢就像是优雅降级，取一个能满足条件的就不继续向后判断了（这里的形容可能不太恰当）

所以更加适用于做浏览器兼容的场景，只要最新的特征能够满足。我就没有必要去检测老版本的DOM API了

乘性操作符

ECMA中定义了3种乘性操作符

乘法、除法、求模

这些操作和其他语言中的很像，唯一不同的是JS在运算前会使用Number（）进行转换

乘法：

其用法和原理相信大家应该都知道

我就补充一下对于特殊值的处理：

1.如果有一个操作数是NaN那么结果就是NaN

2.无穷与0相乘结果为NaN

3.无穷与非0相乘得到正负无穷

4.无穷与无穷相乘结果为无穷

除法：

特殊规则如下：

求模

也就是我们常说的取余数

需要注意的也就是一些特殊规则：

加性操作符

加性操作符很简单，即加减运算

特殊规则：

对于+：

只要有一个操作数是字符串，那么+的操作就会变为字符串的拼接（不是字符串的转为字符串后操作）

加减都适用：

一个操作数为NaN那么结果为NaN(优先级次于+)

对于无穷，只有正无穷和负无穷相遇才会为NaN（因为都超出了范围所以没法计算）

而两个正无穷或两个负无穷就是符合逻辑的值

也就是 两个正的无穷大 加到一起当然还是正无穷

两个负无穷相减当然还是负无穷

关系操作符

即大于 > 小于 <  大于等于 >=  小于等于 <=

规则如下：

一个操作数为NaN则返回false

都是字符串比较字符串的编码值

布尔转为数值进行比较

对对象使用Number（）后进行比较

有一个操作数为数值，将另一个转为数值后进行比较

PS：Js中是存在既不小于1也不大于等于1的值的（手动滑稽），那就是NaN，因为怎么比较都会返回false

相等操作符

相等== 不相等!=

上面两种操作符会转换数据类型后进行比较

规则如下：

与关系操作符相似，都是进行数值的比较

boolean会转为数值后进行比较

一个是对象另一个不是，则会调用对象的valueOf后进行比较

一个数值另一个是字符串，将字符串转为数值后比较

null和undefined相等

一个操作数是NaN相等操作返回false，不等返回true（即所有值和NaN都不相等包括它本身）

两个都是对象则比较是否为同一对象

全等=== 不全等！==

不会转换类型，直接进行比较

规则类似于相等

不过除了判断值之外还会判断类型是否相等

即 undefined ！== null

条件操作符

表达式？值1：值2；（三目运算符）

对表达式求值，值为true返回值1，值为false返回值2

赋值操作符

=

将右侧的值赋值给左侧的变量

PS *= += 等复合赋值操作符只是简化了操作，但不会带来性能上的提升

逗号操作符

用于在一条语句中执行多个操作

如声明变量

或者：

var a = (1,2,3,4,5); // 5

以上就是今天的内容了，感谢浏览，求赞 ^_^