~，&，|，^等位運算符在JavaScript中的一些應用

最近看到一些代碼中用到了位運算符，表示好奇。在前端開發中有哪些使用呢。來總結一下~

注：使用爲運算符的代碼可讀性變差，建議斟酌使用。有問題歡迎指正或者補充

應用

判斷奇偶數

num & 1 === 1 // num 爲奇數

num & 1 === 0 // num 爲偶數

由於二進制的奇數最低位是1，偶數最低位是0，& 1運算後能夠判斷奇偶(&見下方)

效率

與 % 2來判斷奇偶速度差很少

取整

相似於parseInt

~~3.14159 // 3

3.14159 >> 0 //3

3.14159 >>> 0 //3

3.14159 | 0 // 3

'>>>'不用於對負數取整,其餘均可以

效率

var count = 5000000
var num = 1.51
console.time('parseInt');
for (var i = count; i > 0; i--) {
    parseInt(num);
}
console.timeEnd('parseInt'); //51.822998046875ms

console.time('~~');
for (var i = count; i>0; i--) {
    ~~num;
}
console.timeEnd('~~'); //14.94580078125ms
複製代碼

位操做符 效率高不少，只是可讀性差一些

比較值是否相等

至關於==

^也會將字符串類型的數字轉化爲數字再進行運算

1 ^ 1 // 0

相等返回0 不相等返回非0

效率

與 == 比較 ^ 的效率高,但可讀性差一些

變量值爲數字時，完成值的交換

a ^= b 就是 a = a ^ b

var a = 1 , b = 2
a ^= b
b ^= a
a ^= b
console.log(a) // 2
console.log(b) // 1
複製代碼

過程

a.toString(2) // 1 => 1
b.toString(2) // 2 => 10
a = a ^ b
//根據^運算後a此時爲二進制 11 也就是二進制的 3
a.toString(2) // 3 => 11
b.toString(2) // 2 => 10
b = b ^ a
//根據^運算後b此時爲二進制 1 也就是十進制的 1，a成功賦值給b
a.toString(2) // 3 => 11
b.toString(2) // 1 => 1
a = a ^ b
//根據^運算後b此時爲二進制 10 也就是十進制的 2，b成功賦值給a
複製代碼

效率

var count = 5000000
var num = 1.51
console.time('臨時變量');
for (var i = count; i > 0; i--) {
    var t,a = 1,b = 2;
    t = a;
    a = b;
    b = t;
}
console.timeEnd('臨時變量'); //14.343994140625ms

console.time('^');
for (var i = count; i>0; i--) {
    var d = 1, g = 2
	d ^= g
	g ^= d
	d ^= g
}
console.timeEnd('^'); //13.31396484375ms
複製代碼

與臨時變量的方法相比效率差很少 但^只能用於數字類型

rgb值和16進制顏色值的轉換

16進制轉rgb

function hexToRGB(hex){
    var hex = hex.replace("#","0x"),
        r = hex >> 16,
        g = hex >> 8 & 0xff,
        b = hex & 0xff;
    return "rgb("+r+","+g+","+b+")";
}
複製代碼

rgb轉16進制

function RGBToHex(rgb){
    var rgbArr = rgb.split(/[^\d]+/),
        color = rgbArr[1]<<16 | rgbArr[2]<<8 | rgbArr[3];
    return "#"+color.toString(16);
}
複製代碼

rgb值和16進制顏色值轉換這裏我不太能理解，猜測應該是rgb值和16進制之間有對應關係

詳解

位運算NTO ‘ ~ ’

W3C中的說法

**定義：**ECMAScript 中爲數很少的與二進制算術有關的運算符之一

處理過程：

• 把運算數轉換成 32 位數字
• 把二進制數轉換成它的二進制反碼
• 把二進制數轉換成浮點數

實質上是對數字求負，而後減 1 (-x-1)

因爲二進制都是0 1組成 因此轉化成二進制之後 小數部分就不存在了

console.log('~null: ', ~null);       // => -1
console.log('~undefined: ', ~undefined);  // => -1
console.log('~0: ', ~0);          // => -1
console.log('~{}: ', ~{});         // => -1
console.log('~[]: ', ~[]);         // => -1
console.log('~(1/0): ', ~(1/0));      // => -1
console.log('~false: ', ~false);      // => -1
console.log('~true: ', ~true);       // => -2
console.log('~3: ', ~3);     // => -4
console.log('~3.3: ', ~3.3);       // => -4
console.log('~(-2.999): ', ~(-2.999));   // => 1
複製代碼

那麼~~就是對數字求負減一後再求負減1 (-（-x-1）)-1 也就能夠用於取整

console.log('~~null: ', ~~null);       // => 0
console.log('~~undefined: ', ~~undefined);  // => 0
console.log('~~0: ', ~~0);          // => 0
console.log('~~{}: ', ~~{});         // => 0
console.log('~~[]: ', ~~[]);         // => 0
console.log('~~(1/0): ', ~~(1/0));      // => 0
console.log('~~false: ', ~~false);      // => 0
console.log('~~true: ', ~~true);       // => 1
console.log('~~3: ', ~~3);     // => 3
console.log('~~3.3: ', ~~3.3);       // => 3
console.log('~~(-2.999): ', ~~(-2.999));   // => -2
複製代碼

位運算AND ’ & ‘

W3C中的說法

**定義：**對數字的二進制形式進行運算。它把每一個數字中的數位對齊，而後用下面的規則對同一位置上的兩個數位進行 AND 運算

**規則：**兩個都爲1纔是1

第一個數字中的位數	第二個數字中的位數	結果
1	1	1
1	0	0
0	1	0
0	0	0

例如：

var num = 1651 & 1
console.log(num) // 1
複製代碼

運算過程，兩個數字轉爲二進制（32位）而後按照上面的規則進行&運算

1651 = 0000 0000 0000 0000 0000 0110 0111 0011 
  1   = 0000 0000 0000 0000 0001 0000 0000 0001 
---------------------------------------------
 AND  = 0000 0000 0000 0000 0000 0000 0000 0001
複製代碼

位運算 OR ’ | ‘

W3C中的說法

直接對數字的二進制形式進行運算。在計算每位時，OR 運算符采用下列規則：一個爲1則是1

第一個數字中的數位	第二個數字中的數位	結果
1	0	1
0	1	1
1	1	1
0	0	0

例如

var iResult = 25 ^ 0
alert(iResult);	//輸出 "25"
複製代碼

運算過程

25 = 0000 0000 0000 0000 0000 0000 0001 1001
 0 = 0000 0000 0000 0000 0000 0000 0000 0000
--------------------------------------------
OR = 0000 0000 0000 0000 0000 0000 0001 1001
複製代碼

1001轉10進製爲25

位運算 XOR ‘ ^ ’

W3C中的說法

定義:直接對二進制形式進行運算。XOR 不一樣於 OR，當只有一個數位存放的是 1 時，它才返回 1

規則：

第一個數字中的數位	第二個數字中的數位	結果
1	1	0
0	1	1
1	0	1
0	0	0

例如：

var iResult = 25 ^ 3;
alert(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
二進制代碼 11010 等於 十進制26 
複製代碼

左移運算<<、有符號右移運算>>、無符號右移運算>>>

這裏我就直接貼連接了，W3C任意門

參考：

www.deanhan.cn/js-bitwise-… segmentfault.com/a/119000000…