前面的話

位運(yùn)算符是非常底層的運(yùn)算，由于其很不直觀，所以并不常用。但是，其速度極快，且合理使用能達(dá)到很好的效果。本文將介紹javascript中常常被忽視的運(yùn)算符——位運(yùn)算符

二進(jìn)制表示　　

ECMAScript中的所有數(shù)值都以IEEE-754 64位格式存儲(chǔ)，但位操作符并不直接操作64位的值，而是以32位帶符號(hào)的整數(shù)進(jìn)行運(yùn)算的，并且返回值也是一個(gè)32位帶符號(hào)的整數(shù)

這種位數(shù)轉(zhuǎn)換使得在對(duì)特殊的NaN和Infinity值應(yīng)用位操作時(shí)，這兩個(gè)值都會(huì)被當(dāng)成0來處理

如果對(duì)非數(shù)值應(yīng)用位操作符，會(huì)先使用Number()將該值轉(zhuǎn)換成數(shù)值再應(yīng)用位操作，得到的結(jié)果是一個(gè)數(shù)值

//'|'表示按位或，一個(gè)整數(shù)與0按位或運(yùn)算可以得到它本身，一個(gè)小數(shù)與0按位或運(yùn)算可以得到取整效果
console.log( 1.3 | 0);//1
console.log( 1.8 | 0);//1
console.log( Infinity | 0);//0
console.log( -Infinity | 0);//0
console.log( NaN | 0);//0
console.log('12px' | 0);//0
console.log('12' | 0);//12

有符號(hào)整數(shù)使用32位中的前31位表示整數(shù)數(shù)值，用第32位表示整數(shù)符號(hào)，0表示正數(shù)，1表示負(fù)數(shù)。表示符號(hào)的位叫做符號(hào)位，符號(hào)位的值決定了其他位數(shù)值的格式。其中，正數(shù)以純二進(jìn)制格式存儲(chǔ)，31位中的每一位都表示2的冪。第一位(叫做位0)表示2的0次，第二位表示2的1次，以此類推。沒有用到的位以0填充，即忽略不計(jì)

例如，數(shù)值18的二進(jìn)制表示是00000000000000000000000000010010，或者更簡(jiǎn)潔的10010。這是5個(gè)有效位，這5位本身就決定了實(shí)際的值

console.log((18).toString(2));//"10010"

console.log(0b00000000000000000000000000010010);//18

負(fù)數(shù)同樣以二進(jìn)制存儲(chǔ)，但使用的格式是二進(jìn)制補(bǔ)碼。計(jì)算一個(gè)數(shù)值的二進(jìn)制補(bǔ)碼，需要經(jīng)過下列3個(gè)步驟：

【1】求這個(gè)數(shù)值絕對(duì)值的二進(jìn)制碼

【2】求二進(jìn)制反碼，即將0替換成1，將1替換成0

【3】得到的二進(jìn)制反碼加1

例如，要確定-18的二進(jìn)制表示，首先必須得到18的二進(jìn)制表示，如下所示：

0000 0000 0000 0000 0000 0000 0001 0010

接下來，計(jì)算二進(jìn)制反碼，如下所示：

1111 1111 1111 1111 1111 1111 1110 1101

最后，在二進(jìn)制反碼上加 1，如下所示：

1111 1111 1111 1111 1111 1111 1110 1101
                   1
---------------------------------------
1111 1111 1111 1111 1111 1111 1110 1110

因此，-18 的二進(jìn)制表示即 1111 1111 1111 1111 1111 1111 1110 1110

ECMAScript會(huì)盡力向我們隱藏所有這些信息，在以二進(jìn)制字符串形式輸出一個(gè)負(fù)數(shù)時(shí)，我們看到的只是這個(gè)負(fù)數(shù)絕對(duì)值的二進(jìn)制碼前面加上了一個(gè)負(fù)號(hào)

var num = -18;
console.log(num.toString(2));//'-10010'

位運(yùn)算符可以進(jìn)行7種運(yùn)算，包括按位非(NOT)、按位與(AND)、按位或(OR)、按位異或(XOR)、左移、有符號(hào)右移和無符號(hào)右移

按位非(NOT)　　

按位非操作符由一個(gè)波浪線(~)表示，執(zhí)行按位非的結(jié)果就是返回?cái)?shù)值的反碼。其本質(zhì)是操作數(shù)的負(fù)值減1

var num1 = 25;
var num2 = ~num1;
console.log(num2);//-26

對(duì)一個(gè)整數(shù)兩次按位非，可以得到它本身；對(duì)一個(gè)小數(shù)兩次按位非，可以得到取整效果

console.log(~~3);//3
console.log(~~3.1);//3
console.log(~~3.9);//3

按位與(AND)　　

按位與操作符由一個(gè)和號(hào)符號(hào)(&)表示，它有兩個(gè)操作符數(shù)。從本質(zhì)上講，按位與操作就是將兩個(gè)數(shù)值的每一位對(duì)齊，然后根據(jù)下表中的規(guī)則，對(duì)相同位置上的兩個(gè)數(shù)執(zhí)行AND操作

第一個(gè)數(shù)值的位    第二個(gè)數(shù)值的位     結(jié)果
1            1        1
1            0        0
0            1        0
0            0        0

按位與操作只有在兩個(gè)數(shù)值的對(duì)應(yīng)位都是1時(shí)才返回1，任何一位是0，結(jié)果都是0

var iResult = 25 & 3;
console.log(iResult);//"1"

//分析如下
 25 = 0000 0000 0000 0000 0000 0000 0001 1001
 3 = 0000 0000 0000 0000 0000 0000 0000 0011
---------------------------------------------
AND = 0000 0000 0000 0000 0000 0000 0000 0001

按位或(OR)　　

按位或操作符由一個(gè)豎線符號(hào)(|)表示，同樣也有兩個(gè)操作數(shù)，按位或操作遵循下面這個(gè)真值表

第一個(gè)數(shù)值的位    第二個(gè)數(shù)值的位     結(jié)果
1            1        1
1            0        1
0            1        1
0            0        0

按位或操作在有一個(gè)位是1的情況下就返回1，而只有在兩個(gè)位都是0的情況下才返回0

var iResult = 25 | 3;
console.log(iResult);//"27"

//分析如下
25 = 0000 0000 0000 0000 0000 0000 0001 1001
 3 = 0000 0000 0000 0000 0000 0000 0000 0011
--------------------------------------------
OR = 0000 0000 0000 0000 0000 0000 0001 1011

一個(gè)整數(shù)與0按位或運(yùn)算可以得到它本身，一個(gè)小數(shù)與0按位或運(yùn)算可以得到取整效果

console.log(3.1 | 0);//3
console.log(3.9 | 0);//3

按位異或(XOR)　　

按位異或操作符由一個(gè)插入符號(hào)(^)表示，也有兩個(gè)操作數(shù)。以下是按位異或的真值表

第一個(gè)數(shù)值的位    第二個(gè)數(shù)值的位     結(jié)果
1            1        0
1            0        1
0            1        1
0            0        0

按位異或的兩個(gè)數(shù)值相同時(shí)返回0，不同時(shí)返回1

var iResult = 25 ^ 3;
console.log(iResult);//"26"

//分析如下
 25 = 0000 0000 0000 0000 0000 0000 0001 1001
 3 = 0000 0000 0000 0000 0000 0000 0000 0011
---------------------------------------------
XOR = 0000 0000 0000 0000 0000 0000 0001 1010

“異或運(yùn)算”有一個(gè)特殊運(yùn)用，連續(xù)對(duì)兩個(gè)數(shù)a和b進(jìn)行三次異或運(yùn)算，aˆ=b, bˆ=a, aˆ=b，可以互換它們的值。這意味著，使用“異或運(yùn)算”可以在不引入臨時(shí)變量的前提下，互換兩個(gè)變量的值

var a=10,b=9;
a ^= b, b ^= a, a ^= b;
console.log(a,b);//9,10

//分析如下
 a = 0000 0000 0000 0000 0000 0000 0000 1010
 b = 0000 0000 0000 0000 0000 0000 0000 1001
---------------------------------------------
 a1 = 0000 0000 0000 0000 0000 0000 0000 0011

 a1 = 0000 0000 0000 0000 0000 0000 0000 0011 
 b = 0000 0000 0000 0000 0000 0000 0000 1001
---------------------------------------------
 b1 = 0000 0000 0000 0000 0000 0000 0000 1010
 
 b1 = 0000 0000 0000 0000 0000 0000 0000 1010 
 a1 = 0000 0000 0000 0000 0000 0000 0000 0011 
---------------------------------------------
 a2 = 0000 0000 0000 0000 0000 0000 0000 1001
//a=a2=10;b=b1=9

一個(gè)整數(shù)與0按位異或可以保持其自身，一個(gè)小數(shù)與0按位異或可以取整

console.log(3.1 ^ 0);//3
console.log(3.9 ^ 0);//3

左移　　

左移操作符由兩個(gè)小于號(hào)(<<)表示，這個(gè)操作符會(huì)將數(shù)值的所有位向左移動(dòng)指定的位數(shù)

例如，如果將數(shù)值2(二進(jìn)制碼為10)向左移動(dòng)5位，結(jié)果就是64(1000000)

var oldValue = 2;
var newValue = oldValue<<5;
console.log(newValue);//64

左移不會(huì)影響操作數(shù)的符號(hào)位。換句話說，如果將-2向左移動(dòng)5位，結(jié)果將是-64

var oldValue = -2;
var newValue = oldValue<<5;
console.log(newValue);//-64

左移0位可以實(shí)現(xiàn)取整效果

console.log(3.1 << 0);//3
console.log(3.9 << 0);//3

有符號(hào)右移　　

有符號(hào)的右移操作符由兩個(gè)大于號(hào)(>>)表示，這個(gè)操作符會(huì)將數(shù)值向右移動(dòng)，但保留符號(hào)位(即正負(fù)號(hào)標(biāo)記)。有符號(hào)的右移操作與左移操作正好相反，即如果將64向右移動(dòng)5位，結(jié)果將變回2

var oldValue = 64;
var newValue = oldValue>>5;
console.log(newValue);//2

同樣，在移位過程中，原數(shù)值中也會(huì)出現(xiàn)空位。只不過這次的空位出現(xiàn)在原數(shù)值的左側(cè)、符號(hào)位的右側(cè)。而此時(shí)ECMAScript會(huì)用符號(hào)位的值來填充所有空位，以便得到一個(gè)完整的值

右移可以模擬2的整除運(yùn)算

console.log(5>>1);//2
console.log(15>>1);//7

無符號(hào)右移　　

無符號(hào)右移操作符由3個(gè)大于號(hào)(>>>)表示，這個(gè)操作符會(huì)將數(shù)值的所有32位都向右移動(dòng)。對(duì)正數(shù)來說，無符號(hào)右移的結(jié)果與有符號(hào)右移相同。仍以前面有符號(hào)右移為便，如果將64無符號(hào)右移5位，結(jié)果仍然是2

var oldValue = 64;
var newValue = oldValue>>>5;
console.log(newValue);//2

但是，對(duì)負(fù)數(shù)就不一樣了。首先，無符號(hào)右移是以0來填充空位，而不是像有符號(hào)右移那樣以符號(hào)位的值來填充空位。所以，對(duì)正數(shù)的無符號(hào)右移與有稱號(hào)右移結(jié)果相同，但對(duì)負(fù)數(shù)的結(jié)果就不同了。其次，無符號(hào)右移操作符會(huì)把負(fù)數(shù)的二進(jìn)制碼當(dāng)成正數(shù)的二進(jìn)制碼。而且，由于負(fù)數(shù)以其絕對(duì)值的二進(jìn)制補(bǔ)碼形式表示，因此就會(huì)導(dǎo)致無符號(hào)右移后的結(jié)果非常之大

var oldValue = -64;
var newValue = oldValue>>>5;
console.log(newValue)//134217726

要確定-64的二進(jìn)制表示，首先必須得到64的二進(jìn)制表示，如下所示：

0000 0000 0000 0000 0000 0000 0100 0000

接下來，計(jì)算二進(jìn)制反碼，如下所示：

1111 1111 1111 1111 1111 1111 1011 1111

最后，在二進(jìn)制反碼上加 1，如下所示

1111 1111 1111 1111 1111 1111 1011 1111
                   1
---------------------------------------
1111 1111 1111 1111 1111 1111 1100 0000

向右移動(dòng)5位后，如下所示：

0000 0111 1111 1111 1111 1111 1111 1110

console.log(0b00000111111111111111111111111110);//134217726

常見應(yīng)用

【1】乘法運(yùn)算

利用左移(<<)來實(shí)現(xiàn)乘法運(yùn)算

console.log(2 << 1);//4
console.log(3 << 1);//6
console.log(4 << 1);//8

【2】除法運(yùn)算

利用有符號(hào)右移(>>)來模擬2的整除運(yùn)算

console.log(2 >> 1);//1
console.log(5 >> 1);//2
console.log(8 >> 1);//4
console.log(9 >> 1);//4

【3】值互換

利用異或操作(^)可以實(shí)現(xiàn)值互換的效果

var a=10,b=9;
a ^= b, b ^= a, a ^= b;
console.log(a,b);//9,10

【4】小數(shù)取整

利用取兩次按位非、與0按位或、與0按位異或、左移0位、右移0位都可以實(shí)現(xiàn)小數(shù)取整效果

console.log(~~3.1);//3
console.log(3.1|0);//3
console.log(3.1^0);//3
console.log(3.1<<0);//3
console.log(3.1>>0);//3

【5】開關(guān)

位運(yùn)算符可以用作設(shè)置對(duì)象屬性的開關(guān)。假定某個(gè)對(duì)象有四個(gè)開關(guān)，每個(gè)開關(guān)都是一個(gè)變量。那么，可以設(shè)置一個(gè)四位的二進(jìn)制數(shù)，它的每個(gè)位對(duì)應(yīng)一個(gè)開關(guān)

var FLAG_A = 1; // 0001
var FLAG_B = 2; // 0010
var FLAG_C = 4; // 0100
var FLAG_D = 8; // 1000

上面代碼設(shè)置A、B、C、D四個(gè)開關(guān)，每個(gè)開關(guān)分別占有一個(gè)二進(jìn)制位

現(xiàn)在假設(shè)需要打開ABD三個(gè)開關(guān)，我們可以構(gòu)造一個(gè)掩碼變量

var mask = FLAG_A | FLAG_B | FLAG_D;
// 0001 | 0010 | 1000 => 1011

上面代碼對(duì)ABD三個(gè)變量進(jìn)行“或運(yùn)算”，得到掩碼值為二進(jìn)制的1011

//“或運(yùn)算”可以確保打開指定的開關(guān)
flags = flags | mask;

//“與運(yùn)算”可以將當(dāng)前設(shè)置中凡是與開關(guān)設(shè)置不一樣的項(xiàng)，全部關(guān)閉
flags = flags & mask;

//“異或運(yùn)算”可以切換（toggle）當(dāng)前設(shè)置，即第一次執(zhí)行可以得到當(dāng)前設(shè)置的相反值，再執(zhí)行一次又得到原來的值
flags = flags ^ mask;

//“否運(yùn)算”可以翻轉(zhuǎn)當(dāng)前設(shè)置，即原設(shè)置為0，運(yùn)算后變?yōu)?；原設(shè)置為1，運(yùn)算后變?yōu)?
flags = ~flags;

以上這篇javascript運(yùn)算符——位運(yùn)算符全面介紹就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論