[TOC] # 什么是位運算？ 位運算是在數字底層（即表示數字的 32 個數位）進行運算的。由于位運算是低級的運算操作，所以速度往往也是最快的（相對其它運算如加減乘除來說），并且借助位運算有時我們還能實現更簡單的程序邏輯,缺點是很不直觀，許多場合不能夠使用。 > 位運算只對整數起作用，如果一個運算子不是整數，會自動轉為整數后再運行。雖然在 JavaScript 內部，數值都是以64位浮點數的形式儲存，但是做位運算的時候，是以32位帶符號的整數進行運算的，并且返回值也是一個32位帶符號的整數。 ## 關于二進制 以下來源于w3shool: ECMAScript 整數有兩種類型，即有符號整數（允許用正數和負數）和無符號整數（只允許用正數）。在 ECMAScript 中，所有整數字面量默認都是有符號整數，這意味著什么呢？ 有符號整數使用 31 位表示整數的數值，用第 32 位表示整數的符號，0 表示正數，1 表示負數。數值范圍從 -2147483648 到 2147483647。 可以以兩種不同的方式存儲二進制形式的有符號整數，一種用于存儲正數，一種用于存儲負數。正數是以真二進制形式存儲的，前 31 位中的每一位都表示 2 的冪，從第 1 位（位 0）開始，表示 20，第 2 位（位 1）表示 21。沒用到的位用 0 填充，即忽略不計。例如，下圖展示的是數 18 的表示法。  以上來源于w3shool: 那在js中二進制和十進制如何轉換呢？如下 ~~~ // 十進制 => 二進制 let num = 10; console.log(num.toString(2)); // 二進制 => 十進制 let num1 = 1001; console.log(parseInt(num1, 2)); ~~~ # 按位或 | > 對每對比特位執行與（AND）操作。只有 a 和 b 任意一位為1時，a | b 就是 1。如下表9 | 3 = 11 | 9 | \= | 1 | 0 | 0 | 1 | | --- | --- | --- | --- | --- | --- | | 3 | \= | 0 | 0 | 1 | 1 | | 11 | \= | 1 | 0 | 1 | 1 | 應用場景： ## 取整 > 對于一般的整數，返回值不會有任何變化。對于大于2的32次方的整數，大于32位的數位都會被舍去。 ~~~ function toInt(num) { return num | 0 } console.log(toInt(1.8)) // 1 console.log(toInt(1.23232)) // 1 ~~~ ## 邊界判斷 假如我們有一個拖動事件，規定被拖動模塊需要在容器內部運動，這時就有邊界判斷，這其中又包括上，下，左，右四種單一邊界，同時還有類似上右，上左等疊加邊界，如果我們需要記錄這種狀態，通過位運算要比使用if判斷要簡單一些，上右下左四種邊界分別用1，2，4，8表示，代碼如下： ~~~ let flag = 0; if (pos.left < left) flag = flag | 8; if (pos.right > right) flag = flag | 2; if (pos.bottom > bottom) flag = flag | 4; if (pos.top < top) flag = flag | 1; switch(flag) { // 上 case 1: // 右 case 2: // 右上 case 3: // 下 case 4: // 右下 case 6: // 左 case 8: // 左上 case 9: // 左下 case 12: // code } ~~~ > 同理，假如我們有一系列控制開關，通過 a | b | c的形式要比 '{a: true, b: true, c: true}' 簡單的多。 # 按位與 & > 對每對比特位執行與（AND）操作。只有 a 和 b 都為1時，a & b 就是 1。如下表9 & 3 = 1 | 9 | \= | 1 | 0 | 0 | 1 | | --- | --- | --- | --- | --- | --- | | 3 | \= | 0 | 0 | 1 | 1 | | 1 | \= | 0 | 0 | 0 | 1 | 由上表我們可以清晰的看出按位與的計算規則，由此可以引出一系列應用場景 ## 判斷奇偶 我們知道奇數的二進制最后一位必然為1，所以任意一個奇數 & 1 一定等于1。 ~~~ // 判斷奇偶 return number & 1 === 1 ~~~ ## 系統權限 業務場景： 我們假設某個管理系統有a, b, c, d四級權限，其中不同帳號分別有不同的權限（可能有1個或多個），例如admin 賬戶有a + b +c +d 四級權限，guest用戶有b + c權限，那這時候應該怎么設計更簡單一些呢？ 按位與：是時候登場了！ 基本思路： 我們把權限分別用0001, 0010, 0100, 1000表示（即最通俗的1，2，4，8），如果admin用戶有a, b, c, d四種權限，則admin的權限為 1 | 2 | 4 | 8 = 15，而guest用戶權限為 4 | 8 = 12, 則判斷用戶是否有某種權限可以如下判斷 ~~~ admin & 4 === 4 admin & 8 === 8 admin & 2 === 2 admin & 1 === 1 ~~~ # 按位異或 ^ > 對于每一個比特位，當兩個操作數相應的比特位有且只有一個1時，結果為1，否則為0。 其運算法則相當于不帶進位的二進制加法 | 9 | \= | 1 | 0 | 0 | 1 | | --- | --- | --- | --- | --- | --- | | 3 | \= | 0 | 0 | 1 | 1 | | 10 | \= | 1 | 0 | 1 | 0 | 應用場景： ## 切換變量0和1 假如我們通過某個條件來切換一個值為0或者1 ~~~ function update(toggle) { num = toggle ? 1 : 0; } update(true); // 通過異或我們可以這么寫 num = num ^ 1; ~~~ ## 交換兩個變量的值(不用第三個變量) ~~~ let a = 5, b = 6; a = a ^ b; b = a ^ b; a = a ^ b; // 還可以通過運算 a = a + b; b = a - b; a = a - b; // es 6 [a, b] = [b, a] ~~~ > 原理剖析：a = a ^ b; b = a ^ b 相當與 b = a ^ b ^ b = a ^ (b ^ b) = a ^ 0 = a; ## 簡單字符串加密 ~~~ const key = 313; function encryption(str) { let s = ''; str.split('').map(item => { s += handle(item); }) return s; } function decryption(str) { let s = ''; str.split('').map(item => { s += handle(item); }) return s; } function handle(str) { if (/\d/.test(str)) { return str ^ key; } else { let code = str.charCodeAt(); let newCode = code ^ key; return String.fromCharCode(newCode); } } let init = 'hello world 位運算'; let result = encryption(init); // ????????????乴軩窮 let decodeResult = decryption(result); // hello world 位運算 ~~~ 可以看到，我們利用字符串Unicode值的異或運算實現了一個簡要的字符串加密效果。 ps: 上面代碼僅為演示，實際解密時應該把key及解密密鑰傳進去。 # 按位非 ～ > 對每一個比特位執行非（NOT）操作。NOT a 結果為 a 的反轉（即反碼）。 ps: 對任一數值 x 進行按位非操作的結果為 -(x + 1)。例如，~5 結果為 -6： 負數存儲采用的形式是二進制補碼。計算數字二進制補碼的步驟有三步： 1.確定該數字的非負版本的二進制表示（例如，要計算 -18的二進制補碼，首先要確定 18 的二進制表示） 2.求得二進制反碼，即要把 0 替換為 1，把 1 替換為 0（相當于～操作） 3.在二進制反碼上加 1 我們可以看到一個數a取負相當于 ~a + 1, 即 -a = ~a + 1, 因此～a = -(a + 1) 應用場景： ## 取整 （位運算花樣取整） ~~~ ~~(-5.88) // -5 ~~~ ## 判斷數組中某項是否存在 ~~~ // 常用判斷 if (arr.indexOf(item) > -1) { // code } // 按位非 ~-1 = - (-1 + 1) if (~arr.indexOf(item)) { // code } ~~~ # 按位移動操作符 按位移動操作符有兩個操作數：第一個是要被移動的數字，而第二個是要移動的長度。移動的方向根據操作符的不同而不同。 按位移動會先將操作數轉換為大端字節序順序(big-endian order)的32位整數,并返回與左操作數相同類型的結果。右操作數應小于 32位，否則只有最低 5 個字節會被使用。 ## 左移 << > 該操作符會將第一個操作數向左移動指定的位數。向左被移出的位被丟棄，右側用 0 補充。 例如 3 << 2 的運算圖示如下： 3 = 0000 0000 0000 0000 0000 0000 0000 0011 12 = 0000 0000 0000 0000 0000 0000 0000 1100 ps: 對任一數值 x 進行左移n, 相當于十進制里的乘以10的倍數，在這兒是指 ~~~math x * 2^n ~~~ 應用場景： ## rgb和16進制顏色轉換 首先我們需要知道RGB與十六進制之間的關系，例如我們最常見的白色RGB表示為rgb(255, 255, 255), 十六進制表示為#FFFFFFF, 我們可以把十六進制顏色除 ‘#’外按兩位分割成一部分，即FF,FF,FF, 看一下十六進制的FF轉為十進制是多少呢？沒錯，就是255! 了解了十六進制和RGB關系之后，我們就會發現RGB轉十六進制方法就很簡單了 1. 將RGB的3個數值分別轉為十六進制數，然后拼接，即 rgb(255, 255, 255) => '#' + 'FF' + 'FF' + 'FF'。 2. 巧妙利用左移，我們把十六進制數值部分當成一個整數，即FFFFFF,我們可以理解為FF0000 + FF00 + FF, 如同我們上面解釋，如果左移是基于十六進制計算的，則可以理解為FF << 4, FF << 2, FF, 而實際上我們轉為二進制則變為 FF << 16，如下： ~~~math x * 16^4 = x * 2 ^ 16 ~~~ 了解了原理以后，代碼如下： ~~~ function RGBToHex(rgb){ // 取出rgb中的數值 let arr = rgb.match(/\d+/g); if (!arr || arr.length !== 3) { console.error('rgb數值不合法'); return } let hex = (arr[0]<<16 | arr[1]<<8 | arr[2]).toString(16); // 自動補全第一位 if (hex.length < 6) { hex = '0' + hex; } return `#${hex}`; } ~~~ # 有符號右移 >> > 該操作符會將第一個操作數向右移動指定的位數。向右被移出的位被丟棄，拷貝最左側的位以填充左側。由于新的最左側的位總是和以前相同，符號位沒有被改變。所以被稱作“符號傳播”。 ps: 對任一數值 x 進行右移n, 相當于十進制里的除以10的倍數，在這里是指除以數之后取整 ~~~math x / 2^n ~~~ 應用場景： ## 十六進制轉RGB 原理見上方RGB轉十六進制 ~~~ function hexToRGB(hex){ if (!/^#([0-9a-fA-F]{3}){1,2}$/.test(hex)) { console.error('顏色不合法'); return }; // #f00 轉為 #ff0000 if (hex.length == 4) { hex = hex.replace(/([0-9a-fA-F])/g, '$1$1'); }; let num = hex.replace('#', '0x'); let r = num >> 16; // 0xff = 255 let g = num >> 8 & 0xff; let b = num & 0xff; return `rgb(${r},${g},${b})`; } ~~~ ## 無符號右移 >>> > 該操作符會將第一個操作數向右移動指定的位數。向右被移出的位被丟棄，左側用0填充。因為符號位變成了 0，所以結果總是非負的。（譯注：即便右移 0 個比特，結果也是非負的。）