Javascript中的 “&” 和 “|” 詳解
一、前言:
在文章開始之前,先出幾個題目給大家看看:
var num1 = 1 & 0; console.log(num1); // 0 var num2 = 'string' & 1; console.log(num2); // 0 var num3 = true & 1; console.log(num3); // 1 var num4 = undefined | false; console.log(num4); // 0 var num5 = undefined | true; console.log(num5); // 1 var num6 = 23 & 5; console.log(num6); // 5 var num7 = 23 | 5; console.log(num7); // 23
上面的題目大家都做對了嗎?我們之前有總結過 《淺談javascript中的 “ && ” 和 “ || ” 》,"&&” 和 “||” 是邏輯運算表達式中的操作符。那么一個 “&” 或者一個 “|” 又代表什么含義呢?有什么特性呢?接下來,我們就來一一揭秘。
首先,我們得清楚 “&” 和 “|” 是位運算操作符。
位運算符用于在最基本的層次上,即按內(nèi)存中表示數(shù)值的位來操作數(shù)值。ECMAScript中的所有數(shù)值都以IEEE-754 64位格式存儲,但位操作符并不直接操作64位的值。而是先將64位的值轉(zhuǎn)換成32位的整數(shù),然后執(zhí)行操作,最后再將結果轉(zhuǎn)換為64位。對于開發(fā)人員來說,由于64位存儲格式是透明的,因此整個過程就像是只存在32位的整數(shù)一樣。
對于有符號的整數(shù),32位中的前31位用于表示整數(shù)的值。第32位表示數(shù)值的符號:0表示正數(shù),1表示負數(shù)。這個表示符號的位叫做符號位,符號位的值決定了其他位數(shù)值的格式。其中,正數(shù)以純二進制格式存儲,31位中的每一位都表示2的冪。第一位(叫做位0)表示20,第二位表示21,以此類推。沒有用到的位以0表示,即忽略不計。例如,數(shù)值18的二進制表示是0000 0000 0000 0000 0000 0000 0001 0010,或者更簡潔的10010。這是5個有效位,這5位本身就決定了實際的值。
負數(shù)同樣以二進制碼存儲,但使用的格式是二進制補碼。計算一個數(shù)值的二進制補碼,需要經(jīng)過下列3個步驟:
(1)求這個數(shù)值絕對值的二進制碼(例如,要求-18的二進制補碼,先求18的二進制碼);
(2)求二進制反碼,即將0替換為1,將1替換為0;
(3)得到的二進制反碼加1。
這樣,求得了-18的二進制表示,即1111 1111 1111 1111 1111 1111 1110 1110。
......在ECMAScript中,當對數(shù)值應用位操作符時,后臺會發(fā)生如下轉(zhuǎn)換過程:64位的數(shù)值被轉(zhuǎn)換成32位數(shù)值,然后執(zhí)行位操作,最后再將32位的結果轉(zhuǎn)換回64位數(shù)值。這樣,表面上看起來就好像是在操作32位數(shù)值,就跟在其他語言中以類似方式執(zhí)行二進制操作一樣。但這個轉(zhuǎn)換過程也導致了一個嚴重的副效應,即在對特殊的NaN和Infinity值應用位操作時,這兩個值都會被當成0來處理。
如果對非數(shù)值應用位操作符,會先使用Number()函數(shù)將該值轉(zhuǎn)換為一個數(shù)值(自動完成),然后再應用位操作。得到的結果將是一個數(shù)值。 ......(截取自《Javascript高級程序設計》)
二、“&”(按位與AND):
按位與操作符由一個和號字符(&)表示,它有兩個操作符數(shù)。從本質(zhì)上來講,按位與操作就是將兩個數(shù)值的每一位對齊,對相同位置上的兩個數(shù)執(zhí)行AND操作。
按位與AND操作規(guī)則:只有兩個數(shù)值的對應位都是1時才返回1,任何一位是0,結果都是0。
前面已經(jīng)把理論性的東西說的太多了,但是我覺得理論又很有必要。接下來,直接分析例子吧!
我們先看上面題目中的 num1,num2,num3以及num6。我們嘗試結合上面的理論來分析為什么會輸出最終的結果。
// num1是1和0進行“按位與”操作后的返回值。1的二進制碼簡寫為1,0的二進制碼簡寫為0,根據(jù)上面的規(guī)則,第二個操作符數(shù)為0,結果是0 var num1 = 1 & 0; console.log(num1); // 0 // 第一個操作符數(shù)是字符串,按照前言里面的理論,對于非數(shù)值的操作符數(shù),先使用Number()函數(shù)處理,結果返回NaN,NaN又會被當成0來處理。所以最終結果也是0 var num2 = 'string' & 1; console.log(num2); // 0 // true是布爾類型值,同樣使用Number()函數(shù)處理,處理后得到數(shù)值1,于是表達式就相當于“1 & 1” 進行位運算,當兩個數(shù)值都為1的時候,結果返回1 var num3 = true & 1; console.log(num3); // 1 // 23的二進制碼是:...10111,5的二進制碼是:...00101。然后每一位進行對齊處理,結合上面的規(guī)則,可以得出10111&00101的結果是:00101。00101就是5 var num6 = 23 & 5; console.log(num6); // 5 // 再加個例子:24的二進制碼為...11000,7的二進制碼為...00111,相同位置的兩個數(shù)執(zhí)行AND操作,結果發(fā)現(xiàn)結果是...00000。所以最終結果是0,你算對了嗎? var add1 = 24 & 7; console.log(add1); // 0
三、“|”(按位或OR):
按位或操作符由一個豎線符號(|)表示,同樣有兩個操作符數(shù)。從本質(zhì)上來講,按位或操作也是將兩個數(shù)值的每一位對齊,對相同位置上的兩個數(shù)執(zhí)行OR操作。
按位或OR操作規(guī)則:只要兩個數(shù)值的對應位有一個是1就返回1,而只有在兩個位都是0的情況下才返回0。
我們接最上面的例子來看吧!
// 第一個操作符數(shù)為undefined,第二個操作符數(shù)是false,均不是數(shù)值,所以都要先使用Number()函數(shù)處理,處理結果都是返回NaN,NaN又會被當成0處理,于是最終結果是0 var num4 = undefined | false; console.log(num4); // 0 // 第一個操作符數(shù)相當于0,第二個操作符數(shù)相當于1,結合按位或的規(guī)則,最終結果是1 var num5 = undefined | true; console.log(num5); // 1 // 23的二進制碼是:...10111,5的二進制碼是:...00101。然后每一位進行對齊處理,結合上面的規(guī)則,可以得出10111|00101的結果是:10111。10111就是23 var num7 = 23 | 5; console.log(num7); // 23 // 再加個例子:24的二進制碼為...11000,7的二進制碼為...00111,相同位置的兩個數(shù)執(zhí)行AND操作,結果發(fā)現(xiàn)結果是...11111。所以最終結果是31,你算對了嗎? var add2 = 24 | 7; console.log(add2); // 31
四、其他:
相信也會有一些朋友不知道怎么把數(shù)值轉(zhuǎn)換成標準的二進制碼,那么有沒有快速的方法呢?答案是肯定的。
我的網(wǎng)上隨機找到了一個在線轉(zhuǎn)換工具地址:數(shù)值進制轉(zhuǎn)換(點我查看)。(當然,你也可以使用你找到的別的工具,不管怎樣,能實現(xiàn)效果就是我們的最終目的)
最后,再附上我通過手寫轉(zhuǎn)換二進制過程中總結的規(guī)律圖,依然可以快速將數(shù)值轉(zhuǎn)換成二進制碼,逼格滿滿噠!

以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關文章
element 中 el-menu 組件的無限極循環(huán)思路代碼詳解
這篇文章主要介紹了element 中 el-menu 組件的無限極循環(huán),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
Javascript中類式繼承和原型式繼承的實現(xiàn)方法和區(qū)別之處
其它的面向?qū)ο蟪绦蛟O計語言都是通過關鍵字來解決繼承的問題。但是javascript中并沒有定義這種實現(xiàn)的機制。接下來通過本文給大家介紹Javascript中類式繼承和原型式繼承的實現(xiàn)方法和區(qū)別,需要的朋友可以參考下2017-04-04
Google Map API更新實現(xiàn)用戶自定義標注坐標
由于工作需要,又要開始看Google Map API 代碼,今天再把我之前的GoogleMap類,又更新了下,加了個簡單的用戶自定義標注坐標的功能。看看吧(代碼沒怎么優(yōu)化,別見笑)2009-07-07
javascript實現(xiàn)鼠標移到Image上方時顯示文字效果的方法
這篇文章主要介紹了javascript實現(xiàn)鼠標移到Image上方時顯示文字效果的方法,涉及javascript鼠標事件及圖文屬性動態(tài)設置的相關技巧,可用于為圖片增加文字提示效果,需要的朋友可以參考下2015-08-08
關于uniapp中onReachBottomDistance屬性的使用
這篇文章主要介紹了關于uniapp中onReachBottomDistance屬性的使用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09
JS生態(tài)系統(tǒng)加速eslint解析器使用實例探索
這篇文章主要為大家介紹了JS生態(tài)系統(tǒng)加速之eslint解析器使用實例探索,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01

