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

摘要： 最近看到一些程式碼中用到了位運算子，表示好奇。在前端開發中有哪些使用呢。來總結一下~ 注：使用為運算子的程式碼可讀性變差，建議斟酌使用。有問題歡迎指正或者補充 應用 判斷奇偶數 num & 1 === 1 // num 為奇數 num &...

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

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

應用

判斷奇偶數

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 
複製程式碼