深刻研究js中的位運算及用法

什麼是位運算？

位運算是在數字底層（即表示數字的 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));

js中都有哪些位運算？

• 按位或 |

對每對比特位執行與（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

應用場景：

1. 取整

對於通常的整數，返回值不會有任何變化。對於大於2的32次方的整數，大於32位的數位都會被捨去。

function toInt(num) {
    return num | 0
}
console.log(toInt(1.8))        // 1
console.log(toInt(1.23232))    // 1

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 必定等於1。

// 判斷奇偶
return number & 1 === 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

應用場景：

1. 切換變量0和1

假如咱們經過某個條件來切換一個值爲0或者1

function update(toggle) {
    num = toggle ? 1 : 0;
}

update(true);


// 經過異或咱們能夠這麼寫
num = num ^ 1;

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;

1. 簡單字符串加密

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)

應用場景：

1. 取整 （位運算花樣取整）

~~(-5.88) // -5

1. 判斷數組中某項是否存在

// 經常使用判斷
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的倍數，在這兒是指

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，以下：

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的倍數，在這裏是指除以數以後取整

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 個比特，結果也是非負的。）

題外話

想起以前小組內的一道算法題，題目是這樣的：
1.一隻青蛙一次能夠跳上1級臺階，也能夠跳上2級……它也能夠跳上n級。求該青蛙跳上一個n級的臺階總共有多少種跳法？
解題思路是：

/*由於n級臺階，第一步有n種跳法：跳1級、跳2級、到跳n級
跳1級，剩下n-1級，則剩下跳法是f(n-1)
跳2級，剩下n-2級，則剩下跳法是f(n-2)
因此f(n)=f(n-1)+f(n-2)+...+f(1)
那麼f(n-1)=f(n-2)+f(n-3)+...+f(1)

因此算法爲：

function jumpFloorII(number){
    return 1<<(number-1);
}

WTF? 什麼意思？
其實很簡單，看下面過程

f(n)=f(n-1)+f(n-2)+...+f(1)

f(n-1)=f(n-2)+f(n-3)+...+f(1)

f(n) = 2f(n-1) = 4 f(n-2) = 8 * f(n-3) ..... = 2的(n-1)次方乘f(1),轉爲位運算即爲 1 << (n - 1)

練習題：如何實現日曆簽到功能

1. 怎麼設計能使數據最少
2. 每日簽到應該怎麼更新
3. 怎麼判斷某天是否簽到

ps: 碼字不易，若是以爲本文對你有幫助，給個贊吧～～