淺談JavaScript位操做符

位操做符的基本概念

由於ECMAscript中全部數值都是以IEEE-75464格式存儲,因此纔會誕生了位操做符的概念.前端

位操做符做用於最基本的層次上,由於數值按位存儲,因此位操做符的做用也就是操做數值的位.不過位操做符並不能操做64位的值.因此位操做符會先將64位的值轉換成32位的值,而後執行操做,最後再將結果轉換成64位的值.面試

但對於開發人員來講,這整個過程就像是隻存在32位的數值同樣,這是由於64位存儲格式是透明的.函數

固然這裏所說的數值指的是整數.在對於有符號的整數中,32位的前31位用於表示整數的值,而第32位則表示整數的符號(即0表示正數,1表示負數),咱們把這第32個表示符號的位叫作符號位,符號位也決定了其它位的數值的格式.學習

正數都是按純二進制格式存儲的,在前31位中的每個位都表示2的冪.即第一位表示2^0(2的零次方),第二位表示2^1(2的1次方),依次類推.第一位也叫作位0,後面依次類推,第32位就叫作位31,其它沒有用到的位都以0填充,也能夠被忽略不計.spa

好比十進制整數10的二進制表示是0000 0000 0000 0000 0000 0000 0000 1010或者更簡單的1010。這是4個有效位,這4位就決定了實際的值.在前面說到過能夠用toString()方法指定參數能夠表示將一個十進制數轉換成二進制數.因此我在這裏寫了一個函數,表示將一個十進制數轉換成二進制數,以下圖所示:code

clipboard.png

既然二進制數1010就是十進制數10,那麼咱們還能夠將這個二進制數轉換成十進制數,是如何計算的呢?很簡單,由於二進制數最後一位表示符號,因此不計,這裏的101各表明冪數爲3,2,1,這也是爲何十進制轉換成二進制數要取餘數倒排的緣由,而後將位上的數乘以基數2的冪數.也就是說能夠寫成等式2 ^ 3 * 1 + 2 ^ 2 * 0 + 2 ^ 1 * 1 = 10.(2 ^ *表示2*次方).對象

負數一樣以二進制碼存儲,只不過與正數有點區別,區別就是負數的格式是二進制補碼.在求二進制補碼的時候,有如下三個規則:blog

(1).先求出這個負數的絕對值的二進制碼.好比十進制數-17,就是先求17的二進制碼.ip

(2).而後求二進制碼的反碼,就是將0變成1,1變成0.開發

(3)最後將獲得的二進制反碼加1.

好比說求十進制數-10的二進制碼,咱們要先求10的二進制碼,也就是
0000 0000 0000 0000 0000 0000 0000 1010,而後取反碼就是
1111 1111 1111 1111 1111 1111 1111 0101,最後加1,但由於二進制數只能是1或者0表示,因此1+1大於2的話,就會向前進位1.因此這個反碼加1最後獲得的值應該是1111 1111 1111 1111 1111 1111 1111 0110.而這個也是-10的二進制表示.須要注意的是在處理有符號的整數的時候,是訪問不到第32位的(也就是位31).

但在實際狀況中,ECMAscript是會盡力向咱們隱藏全部的這些信息.也就是說在實際轉換負數的二進制碼時,它只會將這個負數的絕對值的二進制碼前面加上一個負號,就表示這個負數的二進制碼.以下圖所示:

clipboard.png

這個轉換過程說明ECMAscript解析引擎理解了二進制補碼並將其以更合乎邏輯的形式展現出來.

在默認狀況下,ECMAscript中的全部整數都是有符號整數.固然也存在無符號整數,對於無符號的整數來講,第32位不會再表示符號,由於無符號整數只能是正整數.並且無符號整數的值能夠更大,由於第32位再也不表示符號,而能夠表示成數值.什麼意思呢?就是說當咱們再將十進制數轉換成二進制數時,必需要除到商爲0時,纔會倒排餘數,而第32位剛好就是商爲0的那個餘數.而正整數值越大,咱們能夠省略的有效位數就越多,此時值也就越大.

ECMAscript中,當對數值應用位操做符的時候,雖而後臺會發生將64位數值轉換成32位數值,而後執行完操做以後,再轉換成64位的數值這個轉換過程.但正由於這個轉換過程致使了一個嚴重的副效應,也就是說在對特殊的NaNInfinity值應用位操做符時,這兩個值會被當成0來處理.

而若是對非數值應用位操做符,會自動使用Number()函數將其轉換成一個數值來操做,而後再應用位操做符,獲得的結果也將是一個數值.

總的說來,位操做符主要包含按位非(NOT),按位與(AND),按位或(OR),按位異或(XOR),左移,無符號右移和有符號右移7個操做符.接下來,我們就來一一分析這7個操做符.

a.按位非(NOT)

按位非用一個波浪線符號"~"表示,執行按位非的結果就是取得數值的反碼.它也是ECMAscript中少數幾個與二進制計算相關的操做符.

好比求10的按位非結果,那麼按照求二進制獲得10的二進制碼是0000 0000 0000 0000 0000 0000 0000 1010,而後取反碼就是1111 1111 1111 1111 1111 1111 1111 0101.而要將這個反碼轉換成十進制數,還須要如下過程:

此時,位31上的1表明符號爲負,由於負數的補碼就是反碼加1,因此得知負數的反碼就等於補碼減1,因此此時求得負數的反碼是1111 1111 1111 1111 1111 1111 1111 0100,因此負數的原碼就是取反,變成了0000 0000 0000 0000 0000 0000 0000 1011,因此此時再將這個二進制數轉換成十進制數就是-(2 ^ 3 * 1 + 2 ^ 2 * 0 + 2 ^ 1 * 1 + 2 ^ 0 * 1)=-11.要理清這個轉換過程,須要知道什麼是反碼,什麼是原碼,什麼又是補碼,由於參與計算的是補碼,而要轉換的是求原碼.也就是說,要想將二進制反碼轉換成十進制數,就必須求得二進制反碼的原碼,而後對原碼直接按照二進制轉換成十進制的方式來計算轉換.如今咱們來驗證一下是不是咱們所想的,以下圖所示:

clipboard.png

再好比求-10的按位非結果,按照理論分析,咱們從前述能夠得知最終-10的二進制碼爲1111 1111 1111 1111 1111 1111 1111 0110,取反碼就變成了0000 0000 0000 0000 0000 0000 0000 1001,而此時的二進制反碼的補碼,原碼都同樣,因此直接計算就是2 ^ 3 * 1 + 2 ^ 2 * 0 + 2 ^ 1 * 0 + 2 ^ 0 * 1 = 9.以下圖所示:

clipboard.png

經過以上示例還應該獲得一個結論:正整數的二進制碼的反碼與原碼補碼不一致,而負整數的二進制碼的反碼就與原碼補碼一致.換句話說,就是正數的原碼與補碼同樣,負數的原碼與補碼不同.

若是實在是不能理解原碼,補碼與反碼,能夠直接把這個操做符理解爲數值加1取反.如101取反就變成-11,-101取反就變成9.

而實際上,對按位非的結果好比~10~-10,咱們還能夠寫成以下圖所示的表示:

clipboard.png

咱們能夠用變量來表示,以下圖所示:

clipboard.png

雖然不用按位非操做符的以上所表示的代碼也能輸出一樣的結果,但因爲按位非是對底層進行操做,因此使用按位非操做符的速度會更快.

b.按位與(AND)

按位與操做符用一個和號字符(&)表示,它有兩個操做數,從本質上講,按位與操做就是將數值的每一位二進制碼對齊,而後根據如下規則,對相同爲止上的兩個數執行AND操做.規則以下:

第一個數值的位               第二個數值的位             結果
    1                             1                     1
    1                             0                     0
    0                             1                     0
    0                             0                     0

簡而言之,就是隻在兩個數值的位數都對應爲1的時候,結果才爲1,任何一位是0,結果都是0.

如如下示例:

clipboard.png

106進行按位與操做時返回2,這是爲何呢?請看底層原理:

首先10轉換成二進制數就是0000 0000 0000 0000 0000 0000 0000 1010,而6轉換成二進制數則是0000 0000 0000 0000 0000 0000 0000 0110.過程能夠以下:

10 = 0000 0000 0000 0000 0000 0000 0000 1010
 6  = 0000 0000 0000 0000 0000 0000 0000 0110
——————————————————————————————————————————————
AND = 0000 0000 0000 0000 0000 0000 0000 0010

而後按位與結果轉換成十進制數就是2 ^ 1 * 1 = 2.因此最終結果爲2.

再好比求2 & 5的結果,如今我們按照步驟來計算出結果,而後再驗證答案對不對.

首先求得2的二進制數爲0000 0000 0000 0000 0000 0000 0000 0010,5的二進制數爲0000 0000 0000 0000 0000 0000 0000 0101。 

2 = 0000 0000 0000 0000 0000 0000 0000 0010
 5  = 0000 0000 0000 0000 0000 0000 0000 0101
——————————————————————————————————————————————
AND = 0000 0000 0000 0000 0000 0000 0000 0000

而這個結果轉換成十進制數就是0。因此得出結果是0,如今我們來驗證一下,以下圖所示:

clipboard.png

c.按位或(OR)

   按位或操做符由一個豎線符號(|)表示,一樣也有兩個操做數.從本質上講,也能夠說是將數值的二進制碼對齊,但與按位與操做符有一點點區別,就是它的規則與按位與操做符不同,具體以下:

第一個數值的位               第二個數值的位               結果
    1                             1                      1
    1                             0                      1
    0                             1                      1
    0                             0                      0

簡而言之,就是按位或操做符只有其對應的兩個位都是0的狀況下才是0,其它有一個位是1的狀況下都是1.如如下示例:

clipboard.png

如今,咱們就來分析一下爲何結果是7,其實與按位與的底層操做很類似,2和5的二進制數前述示例已求得:

2 = 0000 0000 0000 0000 0000 0000 0000 0010
5  = 0000 0000 0000 0000 0000 0000 0000 0101
——————————————————————————————————————————————
OR = 0000 0000 0000 0000 0000 0000 0000 0111

而將按位或的結果轉換成十進制數就是2 ^ 2 * 1 + 2 ^ 1 * 1 + 2 ^ 0 * 1 = 7。因此結果7就是這麼求來的。

d.按位異或(XOR)

 按位異或操做符由一個插入符號(^)表示,也有兩個操做數,其本質也與按位與和按位或操做符相同,但其規則也不同,以下:

第一個數值的位          第二個數值的位               結果
    1                      1                        0
    1                      0                        1
    0                      1                        1
    0                      0                        0

也就是說,按位異或操做符只有在其中一個位爲1時才返回1,不然就是0。如對2 ^ 5求結果以下圖:

clipboard.png

如今來分析一下爲何結果是7,過程也與求按位與和按位或結果一致.

2 = 0000 0000 0000 0000 0000 0000 0000 0010
5  = 0000 0000 0000 0000 0000 0000 0000 0101
——————————————————————————————————————————————
XOR = 0000 0000 0000 0000 0000 0000 0000 0111

這裏由於對應位沒有變化,因此最終結果纔會和按位或結果一致。

e.左移

  左移操做符由兩個小於號(<<)表示,也是兩個操做數,第一個操做數就表示要左移的數值,第二個操做數表示左移的位數.因此左移操做符的含義就是將數值的全部位向左移動指定的位數.

而在向左移動了指定的左移位數以後,原數值的右側會多出指定的位數個空位(好比指定左移4位,也就多出4個空位,依次類推)出來,不過左移操做會自動以0來填充這些空位.

如如下示例:

clipboard.png

如今來分析一下爲何結果是40,首先5的二進制數是
0000 0000 0000 0000 0000 0000 0000 0101,指定的是向左移動3位,因此總體向左移動3位,就變成了0000 0000 0000 0000 0000 0000 0010  1000,而這個二進制轉換成十進制數就是2 ^ 5 * 1 + 2 ^ 3 * 1 = 40.
因此最終結果就是40.

注意,左移操做並不會影響操做數的符號位,換句話說,若是將-5左移3位,結果將是-40,而不是40.

f.右移操做符

 右移操做符又分爲無符號右移有符號右移操做符.

(1).有符號的右移操做符。

 有符號的右移操做符由兩個大於符號表示(>>),這個操做符的含義就是將數值的位向右移指定的位數,同時保留符號位的值(正負號標記),有符號的右移操做符與左移操做符恰好相反,好比40向右移動3位就是5.

一樣的,在移位的過程當中,也會出現空位,而這時候,ECMAscript會用符號位的值來填充全部空位,也就是說每向右移動一位,移走的位上的數不論是1,仍是0都會消失了,則會在數值的左側補充一位,而這位的值就是符號位的值,即若是是正數,補充0,負數補充1.

如如下一個示例:

clipboard.png

如今,我們就來分析分析爲何最終結果爲0.首先由前述能夠得知40的二進制數爲0000 0000 0000 0000 0000 0000 0010  1000,指定的是向右移動3位,那麼總體向右移就變成了0000 0000 0000 0000 0000 0000 0000 0101,這個轉換成十進制數也就是5.因此纔會說有符號的右移與左移結果相反.

再來看一個示例:

clipboard.png

如今,我們就來分析分析爲何最終結果爲0.首先由前述能夠得知5的二進制數爲0000 0000 0000 0000 0000 0000 0000 0101,指定的是向右移動3位,那麼總體向右移3位,左側就要補充符號位的值,由於是正數(正數符號表示爲0),因此補充30,就變成了
0000 0000 0000 0000 0000 0000 0000 0000.因此最終結果爲0

若是這樣不能理解的話,那麼假設向右移動一位,也就是求5 >> 1的結果,一樣在最左側補充一個符號位的值0,右移走了末位的1.因此變成了0000 0000 0000 0000 0000 0000 0000 0010.這個轉換成十進制數就是2.如今我們來操做驗證一下,以下圖:

clipboard.png

(2).無符號右移操做符。

   無符號右移操做符由三個大於符號表示(>>>).這個操做符也是會將全部的32位都總體向右移動指定的位數.對於正數來講,其實無符號右移操做符和有符號右移操做符的結果一致.

5 >>> 1仍然是2,按照一樣的過程步驟分析.

對於正數沒有什麼變化,但對於負數來講,變化可就大了,首先無符號右移操做符是以0填充空位,而不是像有符號右移操做符那樣以符號位的值填充.因此纔會正數與有符號右移操做符的結果相同.可是負數就不同了,無符號右移操做符會把負數的二進制碼當成正數的二進制碼,並且負數是由其絕對值的二進制補碼錶示,所以致使無符號右移以後結果會很大.換句話說,就是對負數進行無符號右移操做時只會返回正數.

如求-5 >>> 3.咱們先本身求一遍,首先-5的二進制補碼爲1111 1111 1111 1111 1111 1111 1111 1010,而由於無符號右移會把這個補碼當成正數的二進制碼,因此轉換成十進制數就是(口算不太現實,太大了,仍是讓計算機來算吧)以下圖所示:

clipboard.png

因此就會被當成4294967290,而後這個正數的二進制碼右移3位變成了0001 1111 1111 1111 1111 1111 1111 1111,轉換成十進制數就是以下圖所示:

clipboard.png

因此最終結果就是536870911.如今,咱們來驗證一下,以下圖所示:

clipboard.png

前端面試題分析

知道了位操做符以後,如今我們來分析一道題,有這樣一道前端面試題,寫一個函數用於判斷一個非負整數是不是2的非負整數次冪.而有人曾經這樣寫,以下圖所示:

clipboard.png

那麼爲何這樣寫呢,咱們來分析一下這其中原理,首先什麼是函數,使用function關鍵字聲明的均可以被叫作函數,而這裏定義的函數名也比較語義化,叫作isPowerOfTwo,圓括號中的n叫作函數的參數,顧名思義,這裏的參數就是傳入一個非負整數.而這個函數的做用就是要判斷傳入的參數(即非負整數)是不是2的非負整數次冪.

return也是一個關鍵字,表示返回一個值,用在函數當中,而要記住的是,若是在函數當中寫入了return關鍵字,在這個關鍵字表示的語句結束後面再寫其它語句是沒有效果的,以下圖所示:

clipboard.png

如上圖所示,alert()方法表示彈出一個原生的彈出框,但實際上在調用這個定義的判斷函數以後,是不會執行彈出框的,這就是return關鍵字在這裏起到的做用.

如今再來分析一下里面的結構,歎號(!)也就是邏輯非的意思,這個操做符會把一個操做數轉換成布爾值,而後取反.

再來看圓括號裏面的和字符號&,在學了位操做符以後,咱們就應該知道這個符號就是按位與的意思,而按位與是操做二進制數的位的,對應規則也應該知道,就是當兩個操做數(在這裏指nn-1)的對應位都是1時,最終返回的對應位結果纔是1,不然就是0.按位與的做用就是將位對齊.因此,在返回這個結果以前,咱們還須要知道如何轉換成二進制數.

咱們應該知道對象的toString()方法,能夠爲其指定一個參數爲基數2,就能夠將一個操做數轉換成二進制數返回,固然這裏也是返回一個字符串.而爲了方便,我將這個方法封裝在一個函數中,以下圖所示:

clipboard.png

如今咱們再來看看一個非負整數若是是2的冪,會有什麼特色,咱們能夠調用以上的定義函數將一個非負整數轉換成二進制數,而一個非負整數若是是2的冪,咱們應該知道2的冪有2 ^ 0 = 1,2 ^ 1 = 2,2 ^ 2 = 4......依次類推,咱們從而得知1,2,4,8,16....等就是2的冪,而咱們將這些值轉換成二進制數,就能夠知道有什麼樣的關係了,好比1轉換成二進制就是1,2轉換成二進制是10,4轉換成二進制是100......依此類推,不信我們能夠用上面定義好的函數來驗證,以下圖:

clipboard.png

如今咱們就應該知道規律了,若是一個非負整數是2的非負整數次冪的話,那麼這個數必定是上一個2的非負整數次冪的二進制數左移了一位.而經過以前知道的左移操做符,咱們知道,左移就是將位往左移動一位,而後在移動後的空位中以0填充.

如今,咱們再來看看n-1,假設是2的非負整數次冪的非負整數,減1,而後再將其轉換成二進制數,好比12的非負整數次冪,1 - 1 = 0.轉換成二進制就是0(這裏是簡寫),再好比2 - 1 = 1的二進制就是1,4 - 1 = 3的二進制就是11,7就是111.不信咱們能夠經過以上定義的函數來驗證,以下圖所示:

clipboard.png

經過使用按位與操做符取得非負整數與非負整數減1的結果,不言而喻,始終都會返回0,爲何呢?由於對應位的關係,咱們取其中一個爲例子,以下:

0 = 0000 0000 0000 0000 0000 0000 0000 0000
1 = 0000 0000 0000 0000 0000 0000 0000 0001
——————————————————————————————————————————————
AND = 0000 0000 0000 0000 0000 0000 0000 0000

因此最終結果就是二進制數0000 0000 0000 0000 0000 0000 0000 0000,轉換成十進制數就是0.

這樣,咱們就應該知道了,若是這個非負整數是2的非負整數次冪的話,那麼它與它減1兩個操做數取按位與結果就應該是0.

而咱們知道邏輯非操做符對數值0會返回true的布爾值,因此當若是傳入的參數是非負整數,而且仍是2的非負整數次冪的話,那麼這個函數最終就會返回true.咱們能夠直接調用這個函數,以下圖所示:

clipboard.png

理解和掌握JavaScript位操做符,有助於咱們研究底層原理。

鄙人建立了一個QQ羣,供你們學習交流,但願和你們合做愉快,互相幫助,交流學習,如下爲羣二維碼:

clipboard.png

相關文章
相關標籤/搜索