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

hollyDysania發表於2018-10-15
JavaScript

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

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

~，&，|，^等位運算子在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…

相關文章