Rumah >hujung hadapan web >tutorial js >JavaScript 位运算符
JavaScript 的位运算符一共有7个,分别是&、|、^、~、<<、>>、>>>(C#没有这个运算符,但是C#可以通过>>的逻辑右移来实现此运算),位运算的操作都是通过二进制进行的。
按位与运算符(&)
当两个数相同位都为1时返回1,否则返回0,例如1&2=0,1的二进制表示为0001,2的二进制表示为0010,二者的运算则返回0000。
按位或运算符(|)
当两个数相同位数字不同的时候返回1,否则返回0,例如1|2=3。
按位异或运算符(^)
当两个数相同位仅有一个为1的时候返回1,否则返回0,例如1^2=3。
按位非运算符(~)
~是一个一元运算符,它将所有位数取反。这里首先必须要说下负数的存储,负数是以其正数的二进制补码进行存储的,所以我们在进行负数的运算时,必须要正确的获取其二进制编码,也就是其正数的二进制补码。补码是取反然后加1来实现,下面看例子:
先计算3的反码:3的二进制形式为00000011,其反码为11111100,其补码为11111101,所以-3的二进制编码为11111101,那么我们要求~-3,就是取其反码,为00000010,这就是-3的反码,将其转化为十进制为2。
多试几个就会发现,其实一个数的反码就是其十进制的相反数减去1。
左移运算符(<<)
左移运算符就是将数的所有位集体左移,第一位变成第二位,第二位变成第三位。。。空出的新位用0补充。比如1<<2=4,-1<<2=-4。1的二进制表示为0000 0001,那么将其向左移动两位变成了0000 0100,转换为十进制就为4,-1的二进制表示为1111 1111,将其向左移动两位,得到1111 1100,1开头的为负数,将其转化为十进制则需要倒着执行一次补码的计算,就是先减去1,得到1111 1011,然后取反,得到0000 0100,转化为十进制加负号得到4。这里需要注意下二进制的减法运算法则:1-1=0-0=0,1-0=1,0-1=1(向高位借)。
这里我们可以发现左移运算就是将其十进制数乘以2的位数次方。
带符号的右移运算符(>>)
既然左移是乘以2,那么右移肯定应该是除以2了,事实上就是这样子的,如果数字本身为正数,则在高位补0,如果为负数则在高位补1。例如3>>1=1,-3>>1=-2。3的二进制编码表示为0000 0011,将其向右移动1位,得到0000 0001,转换为十进制就是1,-3的二进制编码为1111 1101,将其向右移动1位得到1111 1110,这是一个负数,负数转化为十进制,先减一得到1111 1101,取反为0000 0010,得到-2。
带符号的右移运算就是将其十进制数除以2的位数次方,并舍弃余数。
无符号的右移运算符(>>>)
正数的无符号右移运算结果跟带符号的右移运算是一样的,主要是负数的无符号右移运算。它跟带符号的右移的区别就在于,不管是正数还是负数,高位都以0补充,所以对正数来说带符号和无符号的运算都是一样的,而对于负数来说则是天壤之别。例如:-1>>>1=2147483647,数字很恐怖是吧,看看计算过程:-1的二进制编码为1111 1111 1111 1111 1111 1111 1111 1111,将其右移1位,并补0,得到0111 1111 1111 1111 1111 1111 1111 1111,第一位为0,是正数,将其转化为十进制就是230+229+……+20=230(1-1/231)/(1-1/2)=231-1=2147483647,这样最终得到了我们需要的结果,结果很恐怖,慎用!
位运算符的应用:
谈了这么久,最终的目的还是为了去用这些运算符,看些例子:
颜色的RGB值和十六进制的转换:例如一个颜色值:#33cc10,前两位代表红色(R),中间两位代表绿色(G),后两位代表蓝色(B),将其转化为二进制编码为:0011 0011 1100 1100 0001 0000(赋给color),首先我们要获取红色值,需要将其右移16位,color>>16,也就是0000 0000 0000 0000 0011 0011,这样子我们获取到R=51,那么我们要获取绿色值就需要将其先右移8位,color>>8,得到0000 0000 0011 0011 1100 1100,然后将前八位变为0,0000 0000 0011 0011 1100 1100|0000 0000 0000 0000 1111 1111,得到0000 0000 0000 0000 1100 1100,这样子我们得到G=204,最后取蓝色值,就是简单的将其前八位变为0,color | 0000 0000 0000 0000 0001 0000,我们得到B=16,#33cc10转化为RGB值就是(51,204,16)。反过来RGB转化为十六进制正好是反过来的方法,就是G << 16 | G << 8 | B,这里就不赘述啦。
判断一个节点是否为另一个节点的父节点:比如有两个节点a和b,ie的方法是a.contains(b)来确定a是否为b的子节点,而其它现代浏览器使用的方法是a.compareDocumentPosition(b),这个返回结果并不是一个boolean值,如果a和b是同一个节点则返回0,a和b在不同的document内或者至少有一个在document之外则返回1,如果b在a之前则返回2,a在b之前则返回4,b包含a则返回8,a包含b则返回16,32则为浏览器独享。0、1、2、4、8、16的二进制编码分别为0000 0000、0000 0001、0000 0010、0000 0100、0000 1000、0001 0000,我们可以通过判断a.compareDocumentPosition(b) & 16转化为boolean是true还是false来判断a是否为b的节点,那么为什么不用a.compareDocumentPosition(b) == 16判断呢?因为a.compareDocumentPosition(b)返回的应该是20(4+ 16),所以倒可以用a.compareDocumentPosition(b) == 20来运算,用&运算符的好处在于我们不需要考虑这些,我们只需要考虑它和我们需要的值16的&运算是否可以返回true。(John Resig有一个模拟compareDocumentPosition的方法,让其在ie下同样适用,有兴趣的可以参考文末的链接~)
按位左移运算:我们知道按位左移1位,就是乘以2,那么我们可以用a<<1来代替a*2,因为位运算的效率要快于普通运算(有时候可能会得到相反的结果,JavaScript 中位运算的速度非常的差,跟 C# 差的太远啦~)。
按位右移:一方面,可以用a>>1替代a/2,另外按位右移可以方便的将小数转化为整数,如3.1415>>0=3,因为按位移运算会将运算数必须为整型(详细请参考 ECMA-262 手册),所以操作后将舍弃小数位~
注:位运算符要求它的数字运算数是整型的,并且这些运算数是用32位的整数来表示的,第32位是符号位。而且运算数限制在32位的整数范围内,同时要求右边的运算数在0到31之间。(本文二进制编码并不规范,仅为方便使用~)