摘要：雖然在內(nèi)部，數(shù)值都是以位浮點(diǎn)數(shù)的形式儲(chǔ)存，但是做位運(yùn)算的時(shí)候，是以位帶符號(hào)的整數(shù)進(jìn)行運(yùn)算的，并且返回值也是一個(gè)位帶符號(hào)的整數(shù)。如下表應(yīng)用場(chǎng)景取整對(duì)于一般的整數(shù)，返回值不會(huì)有任何變化。例如，結(jié)果為負(fù)數(shù)存儲(chǔ)采用的形式是二進(jìn)制補(bǔ)碼。

位運(yùn)算是在數(shù)字底層（即表示數(shù)字的 32 個(gè)數(shù)位）進(jìn)行運(yùn)算的。由于位運(yùn)算是低級(jí)的運(yùn)算操作，所以速度往往也是最快的（相對(duì)其它運(yùn)算如加減乘除來(lái)說(shuō)），并且借助位運(yùn)算有時(shí)我們還能實(shí)現(xiàn)更簡(jiǎn)單的程序邏輯,缺點(diǎn)是很不直觀，許多場(chǎng)合不能夠使用。

位運(yùn)算只對(duì)整數(shù)起作用，如果一個(gè)運(yùn)算子不是整數(shù)，會(huì)自動(dòng)轉(zhuǎn)為整數(shù)后再運(yùn)行。雖然在 JavaScript 內(nèi)部，數(shù)值都是以64位浮點(diǎn)數(shù)的形式儲(chǔ)存，但是做位運(yùn)算的時(shí)候，是以32位帶符號(hào)的整數(shù)進(jìn)行運(yùn)算的，并且返回值也是一個(gè)32位帶符號(hào)的整數(shù)。

關(guān)于二進(jìn)制

以下來(lái)源于w3shool:
ECMAScript 整數(shù)有兩種類型，即有符號(hào)整數(shù)（允許用正數(shù)和負(fù)數(shù)）和無(wú)符號(hào)整數(shù)（只允許用正數(shù)）。在 ECMAScript 中，所有整數(shù)字面量默認(rèn)都是有符號(hào)整數(shù)，這意味著什么呢？

有符號(hào)整數(shù)使用 31 位表示整數(shù)的數(shù)值，用第 32 位表示整數(shù)的符號(hào)，0 表示正數(shù)，1 表示負(fù)數(shù)。數(shù)值范圍從 -2147483648 到 2147483647。

可以以兩種不同的方式存儲(chǔ)二進(jìn)制形式的有符號(hào)整數(shù)，一種用于存儲(chǔ)正數(shù)，一種用于存儲(chǔ)負(fù)數(shù)。正數(shù)是以真二進(jìn)制形式存儲(chǔ)的，前 31 位中的每一位都表示 2 的冪，從第 1 位（位 0）開(kāi)始，表示 20，第 2 位（位 1）表示 21。沒(méi)用到的位用 0 填充，即忽略不計(jì)。例如，下圖展示的是數(shù) 18 的表示法。

以上來(lái)源于w3shool:

那在js中二進(jìn)制和十進(jìn)制如何轉(zhuǎn)換呢？如下

// 十進(jìn)制 => 二進(jìn)制
let num = 10;
console.log(num.toString(2));
// 二進(jìn)制 => 十進(jìn)制
let num1 = 1001;
console.log(parseInt(num1, 2)); 

按位或 |

對(duì)每對(duì)比特位執(zhí)行與（AND）操作。只有 a 和 b 任意一位為1時(shí)，a | b 就是 1。如下表9 | 3 = 11

應(yīng)用場(chǎng)景：

取整

對(duì)于一般的整數(shù)，返回值不會(huì)有任何變化。對(duì)于大于2的32次方的整數(shù)，大于32位的數(shù)位都會(huì)被舍去。

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

邊界判斷

假如我們有一個(gè)拖動(dòng)事件，規(guī)定被拖動(dòng)模塊需要在容器內(nèi)部運(yùn)動(dòng)，這時(shí)就有邊界判斷，這其中又包括上，下，左，右四種單一邊界，同時(shí)還有類似上右，上左等疊加邊界，如果我們需要記錄這種狀態(tài)，通過(guò)位運(yùn)算要比使用if判斷要簡(jiǎn)單一些，上右下左四種邊界分別用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
}

同理，假如我們有一系列控制開(kāi)關(guān)，通過(guò) a | b | c的形式要比 "{a: true, b: true, c: true}" 簡(jiǎn)單的多。

按位與 &

對(duì)每對(duì)比特位執(zhí)行與（AND）操作。只有 a 和 b 都為1時(shí)，a & b 就是 1。如下表9 & 3 = 1

由上表我們可以清晰的看出按位與的計(jì)算規(guī)則，由此可以引出一系列應(yīng)用場(chǎng)景

判斷奇偶

我們知道奇數(shù)的二進(jìn)制最后一位必然為1，所以任意一個(gè)奇數(shù) & 1 一定等于1。

// 判斷奇偶
return number & 1 === 1

系統(tǒng)權(quán)限

業(yè)務(wù)場(chǎng)景：
我們假設(shè)某個(gè)管理系統(tǒng)有a, b, c, d四級(jí)權(quán)限，其中不同帳號(hào)分別有不同的權(quán)限（可能有1個(gè)或多個(gè)），例如admin 賬戶有a + b +c +d 四級(jí)權(quán)限，guest用戶有b + c權(quán)限，那這時(shí)候應(yīng)該怎么設(shè)計(jì)更簡(jiǎn)單一些呢？

按位與：是時(shí)候登場(chǎng)了！

基本思路：
我們把權(quán)限分別用0001, 0010, 0100, 1000表示（即最通俗的1，2，4，8），如果admin用戶有a, b, c, d四種權(quán)限，則admin的權(quán)限為 1 | 2 | 4 | 8 = 15，而guest用戶權(quán)限為 4 | 8 = 12, 則判斷用戶是否有某種權(quán)限可以如下判斷

admin & 4 === 4
admin & 8 === 8
admin & 2 === 2
admin & 1 === 1

按位異或 ^

對(duì)于每一個(gè)比特位，當(dāng)兩個(gè)操作數(shù)相應(yīng)的比特位有且只有一個(gè)1時(shí)，結(jié)果為1，否則為0。

其運(yùn)算法則相當(dāng)于不帶進(jìn)位的二進(jìn)制加法

應(yīng)用場(chǎng)景：

切換變量0和1

假如我們通過(guò)某個(gè)條件來(lái)切換一個(gè)值為0或者1

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

update(true);


// 通過(guò)異或我們可以這么寫(xiě)
num = num ^ 1;

交換兩個(gè)變量的值(不用第三個(gè)變量)

let a = 5,
    b = 6;

a = a ^ b;
b = a ^ b;
a = a ^ b;

// 還可以通過(guò)運(yùn)算
a = a + b;
b = a - b;
a = a - b;

// es 6
[a, b] = [b, a]

原理剖析：a = a ^ b; b = a ^ b 相當(dāng)與 b = a ^ b ^ b = a ^ (b ^ b) = a ^ 0 = a;

簡(jiǎn)單字符串加密

  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 位運(yùn)算";
  let result = encryption(init);             // ????????????乴軩窮
  let decodeResult = decryption(result);     // hello world 位運(yùn)算

可以看到，我們利用字符串Unicode值的異或運(yùn)算實(shí)現(xiàn)了一個(gè)簡(jiǎn)要的字符串加密效果。

ps: 上面代碼僅為演示，實(shí)際解密時(shí)應(yīng)該把key及解密密鑰傳進(jìn)去。

按位非 ～

對(duì)每一個(gè)比特位執(zhí)行非（NOT）操作。NOT a 結(jié)果為 a 的反轉(zhuǎn)（即反碼）。

ps: 對(duì)任一數(shù)值 x 進(jìn)行按位非操作的結(jié)果為 -(x + 1)。例如，~5 結(jié)果為 -6：

負(fù)數(shù)存儲(chǔ)采用的形式是二進(jìn)制補(bǔ)碼。計(jì)算數(shù)字二進(jìn)制補(bǔ)碼的步驟有三步：

1.確定該數(shù)字的非負(fù)版本的二進(jìn)制表示（例如，要計(jì)算 -18的二進(jìn)制補(bǔ)碼，首先要確定 18 的二進(jìn)制表示）

2.求得二進(jìn)制反碼，即要把 0 替換為 1，把 1 替換為 0（相當(dāng)于～操作）

3.在二進(jìn)制反碼上加 1

我們可以看到一個(gè)數(shù)a取負(fù)相當(dāng)于 ~a + 1, 即 -a = ~a + 1, 因此～a = -(a + 1)

應(yīng)用場(chǎng)景：

取整 （位運(yùn)算花樣取整）

~~(-5.88) // -5

判斷數(shù)組中某項(xiàng)是否存在

// 常用判斷
if (arr.indexOf(item) > -1) {
    // code
}
// 按位非    ~-1 = - (-1 + 1)
if (~arr.indexOf(item)) {
    // code
}

按位移動(dòng)操作符有兩個(gè)操作數(shù)：第一個(gè)是要被移動(dòng)的數(shù)字，而第二個(gè)是要移動(dòng)的長(zhǎng)度。移動(dòng)的方向根據(jù)操作符的不同而不同。

按位移動(dòng)會(huì)先將操作數(shù)轉(zhuǎn)換為大端字節(jié)序順序(big-endian order)的32位整數(shù),并返回與左操作數(shù)相同類型的結(jié)果。右操作數(shù)應(yīng)小于 32位，否則只有最低 5 個(gè)字節(jié)會(huì)被使用。

左移 <<

該操作符會(huì)將第一個(gè)操作數(shù)向左移動(dòng)指定的位數(shù)。向左被移出的位被丟棄，右側(cè)用 0 補(bǔ)充。

例如 3 << 2 的運(yùn)算圖示如下：
3 = 0000 0000 0000 0000 0000 0000 0000 0011
12 = 0000 0000 0000 0000 0000 0000 0000 1100

ps: 對(duì)任一數(shù)值 x 進(jìn)行左移n, 相當(dāng)于十進(jìn)制里的乘以10的倍數(shù)，在這兒是指

x * 2^n

應(yīng)用場(chǎng)景：

rgb和16進(jìn)制顏色轉(zhuǎn)換

首先我們需要知道RGB與十六進(jìn)制之間的關(guān)系，例如我們最常見(jiàn)的白色RGB表示為rgb(255, 255, 255), 十六進(jìn)制表示為#FFFFFFF, 我們可以把十六進(jìn)制顏色除
‘#’外按兩位分割成一部分，即FF,FF,FF, 看一下十六進(jìn)制的FF轉(zhuǎn)為十進(jìn)制是多少呢？沒(méi)錯(cuò)，就是255!

了解了十六進(jìn)制和RGB關(guān)系之后，我們就會(huì)發(fā)現(xiàn)RGB轉(zhuǎn)十六進(jìn)制方法就很簡(jiǎn)單了

將RGB的3個(gè)數(shù)值分別轉(zhuǎn)為十六進(jìn)制數(shù)，然后拼接，即 rgb(255, 255, 255) => "#" + "FF" + "FF" + "FF"。

巧妙利用左移，我們把十六進(jìn)制數(shù)值部分當(dāng)成一個(gè)整數(shù)，即FFFFFF,我們可以理解為FF0000 + FF00 + FF, 如同我們上面解釋，如果左移是基于十六進(jìn)制計(jì)算的，則可以理解為FF << 4, FF << 2, FF, 而實(shí)際上我們轉(zhuǎn)為二進(jìn)制則變?yōu)?FF << 16，如下：

x * 16^4  = x * 2 ^ 16

了解了原理以后，代碼如下：

function RGBToHex(rgb){
    // 取出rgb中的數(shù)值
    let arr = rgb.match(/d+/g);
    if (!arr || arr.length !== 3) {
        console.error("rgb數(shù)值不合法");
        return
    }
    let hex = (arr[0]<<16 | arr[1]<<8 | arr[2]).toString(16);
    // 自動(dòng)補(bǔ)全第一位
    if (hex.length < 6) {
        hex = "0" + hex;
    }
    return `#${hex}`;
}

有符號(hào)右移 >>

該操作符會(huì)將第一個(gè)操作數(shù)向右移動(dòng)指定的位數(shù)。向右被移出的位被丟棄，拷貝最左側(cè)的位以填充左側(cè)。由于新的最左側(cè)的位總是和以前相同，符號(hào)位沒(méi)有被改變。所以被稱作“符號(hào)傳播”。

ps: 對(duì)任一數(shù)值 x 進(jìn)行右移n, 相當(dāng)于十進(jìn)制里的除以10的倍數(shù)，在這里是指除以數(shù)之后取整

x / 2^n

應(yīng)用場(chǎng)景：

十六進(jìn)制轉(zhuǎn)RGB

原理見(jiàn)上方RGB轉(zhuǎn)十六進(jìn)制

function hexToRGB(hex){
    if (!/^#([0-9a-fA-F]{3}){1,2}$/.test(hex)) {
        console.error("顏色不合法"); 
        return
    };
    // #f00 轉(zhuǎn)為 #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},$)`;
}

無(wú)符號(hào)右移 >>>

該操作符會(huì)將第一個(gè)操作數(shù)向右移動(dòng)指定的位數(shù)。向右被移出的位被丟棄，左側(cè)用0填充。因?yàn)榉?hào)位變成了 0，所以結(jié)果總是非負(fù)的。（譯注：即便右移 0 個(gè)比特，結(jié)果也是非負(fù)的。）

想起之前小組內(nèi)的一道算法題，題目是這樣的：
1.一只青蛙一次可以跳上1級(jí)臺(tái)階，也可以跳上2級(jí)……它也可以跳上n級(jí)。求該青蛙跳上一個(gè)n級(jí)的臺(tái)階總共有多少種跳法？
解題思路是：

/*因?yàn)閚級(jí)臺(tái)階，第一步有n種跳法：跳1級(jí)、跳2級(jí)、到跳n級(jí)
跳1級(jí)，剩下n-1級(jí)，則剩下跳法是f(n-1)
跳2級(jí)，剩下n-2級(jí)，則剩下跳法是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? 什么意思？
其實(shí)很簡(jiǎn)單，看下面過(guò)程

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),轉(zhuǎn)為位運(yùn)算即為 1 << (n - 1)

怎么設(shè)計(jì)能使數(shù)據(jù)最少

每日簽到應(yīng)該怎么更新

怎么判斷某天是否簽到

ps: 碼字不易，如果覺(jué)得本文對(duì)你有幫助，給個(gè)贊吧～～