JavaScript 位運算符
JavaScript 在日常的應用中非常的少,其實當年在大學學習C#的時候,位運算符也不是重點,而且后來考試的時候根本就沒有考這章,但是對于對數字感興趣的我,當時聽的特認真,以至于雖然從來都沒再看過,印象還是非常的深刻,前幾天在用的時候進入了個誤區,所以這里還是記錄一下,鞏固一下哈~
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之間。(本文二進制編碼并不規范,僅為方便使用~)
相關文章: