【轉(zhuǎn)+補充】深入研究js中的位運算及用法

轉(zhuǎn)載自【博客園-不瘋魔不成活】

《深入研究js中的位運算及用法》

什么是位運算？

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

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

關(guān)于二進制
  • ECMAScript中的所有數(shù)值都以IEEE-754 64位格式存儲，但位操作符并不直接操作64位的值，而是以32位帶符號的整數(shù)進行運算的，并且返回值也是一個32位帶符號的整數(shù)
  • 這種位數(shù)轉(zhuǎn)換使得在對特殊的NaN和Infinity值應用位操作時，這兩個值都會被當成0來處理
  • 如果對非數(shù)值應用位操作符，會先使用Number()將該值轉(zhuǎn)換成數(shù)值再應用位操作，得到的結(jié)果是一個數(shù)值
//'|'表示按位或，一個整數(shù)與0按位或運算可以得到它本身，一個小數(shù)與0按位或運算可以得到取整效果
console.log( 1.3 | 0);//1
console.log( 1.8 | 0);//1
console.log( Infinity | 0);//0
console.log( -Infinity | 0);//0
console.log( NaN | 0);//0
console.log('12px' | 0);//0
console.log('12' | 0);//12

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

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

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

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

console.log((18).toString(2));//"10010"
console.log(0b00000000000000000000000000010010);//18

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

負數(shù)同樣以二進制存儲，但使用的格式是二進制補碼。計算一個數(shù)值的二進制補碼，需要經(jīng)過下列3個步驟：

  1. 求這個數(shù)值絕對值的二進制碼
  2. 求二進制反碼，即將0替換成1，將1替換成0
  3. 得到的二進制反碼加1

例如，要確定-18的二進制表示，首先必須得到18的二進制表示，如下所示：
0000 0000 0000 0000 0000 0000 0001 0010

接下來，計算二進制反碼，如下所示：
1111 1111 1111 1111 1111 1111 1110 1101

最后，在二進制反碼上加 1，如下所示：
1111 1111 1111 1111 1111 1111 1110 1101 +
0000000000000000000000000000 0001 =
1111 1111 1111 1111 1111 1111 1110 1110

因此，-18 的二進制表示即 1111 1111 1111 1111 1111 1111 1110 1110

ECMAScript會盡力向我們隱藏所有這些信息，在以二進制字符串形式輸出一個負數(shù)時，我們看到的只是這個負數(shù)絕對值的二進制碼前面加上了一個負號

var num = -18;
console.log(num.toString(2));//'-10010'

位運算符可以進行7種運算，包括按位非(NOT)、按位與(AND)、按位或(OR)、按位異或(XOR)、左移、有符號右移和無符號右移

js中的那些位運算

  • 按位或 |

對每對比特位執(zhí)行或（OR）操作。只有 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. 取整

對于一般的整數(shù)，返回值不會有任何變化。對于大于2的32次方的整數(shù)，大于32位的數(shù)位都會被舍去。如下例子中，1521156574878|0=738152094，因為1521156574878已經(jīng)超出了最大范圍2147483647，所以數(shù)值會發(fā)生巨大變化

function toInt(num) {
    return num | 0
}
console.log(toInt(1.8))        // 1
console.log(toInt(1.23232))    // 1
console.log(toInt(1532151156.015)) // 1532151156
console.log(toInt(1521156574878)) // 738152094
  1. 邊界判斷

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

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

  • 按位與 &

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

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

  1. 判斷奇偶

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

// 判斷奇偶
return number & 1 === 1
  1. 系統(tǒng)權(quán)限

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

按位與：是時候登場了！

基本思路：
我們把權(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

  • 按位異或 ^

對于每一個比特位，當兩個操作數(shù)相應的比特位有且只有一個1時，結(jié)果為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值的異或運算實現(xiàn)了一個簡要的字符串加密效果。

ps: 上面代碼僅為演示，實際解密時應該把key及解密密鑰傳進去。

  • 按位非 ～

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

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

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

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

2.求得二進制反碼，即要把 0 替換為 1，把 1 替換為 0（相當于～操作）

3.在二進制反碼上加 1

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

應用場景：

  1. 取整 （位運算花樣取整）
~~(-5.88) // -5
  1. 判斷數(shù)組中某項是否存在
// 常用判斷
if (arr.indexOf(item) > -1) {
    // code
}
// 按位非    ~-1 = - (-1 + 1)
if (~arr.indexOf(item)) {
    // code
}

按位移動操作符

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

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

  • 左移 <<

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

例如 3 << 2 的運算圖示如下：
3 = 0000 0000 0000 0000 0000 0000 0000 0011
12 = 0000 0000 0000 0000 0000 0000 0000 1100

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

x * 2^n

應用場景：

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

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

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

  1. 將RGB的3個數(shù)值分別轉(zhuǎn)為十六進制數(shù)，然后拼接，即 rgb(255, 255, 255) => '#' + 'FF' + 'FF' + 'FF'。
  2. 巧妙利用左移，我們把十六進制數(shù)值部分當成一個整數(shù)，即FFFFFF,我們可以理解為FF0000 + FF00 + FF, 如同我們上面解釋，如果左移是基于十六進制計算的，則可以理解為FF << 4, FF << 2, FF, 而實際上我們轉(zhuǎ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);
    // 自動補全第一位
    if (hex.length < 6) {
        hex = '0' + hex;
    }
    return `#${hex}`;
}

  • 有符號右移 >>

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

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

x / 2^n

應用場景：

十六進制轉(zhuǎn)RGB

原理見上方RGB轉(zhuǎ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},$)`;
}

  • 無符號右移 >>>

該操作符會將第一個操作數(shù)向右移動指定的位數(shù)。向右被移出的位被丟棄，左側(cè)用0填充。因為符號位變成了 0，所以結(jié)果總是非負的。（譯注：即便右移 0 個比特，結(jié)果也是非負的。）

  • 應用場景總結(jié)

【1】乘法運算
利用左移(<<)來實現(xiàn)乘法運算

console.log(2 << 1);//4
console.log(3 << 1);//6
console.log(4 << 1);//8

【2】除法運算
利用有符號右移(>>)來模擬2的整除運算

console.log(2 >> 1);//1
console.log(5 >> 1);//2
console.log(8 >> 1);//4
console.log(9 >> 1);//4

【3】值互換
利用異或操作(^)可以實現(xiàn)值互換的效果

var a=10,b=9;
a ^= b, b ^= a, a ^= b;
console.log(a,b);//9,10

【4】小數(shù)取整
利用取兩次按位非、與0按位或、與0按位異或、左移0位、右移0位都可以實現(xiàn)小數(shù)取整效果

console.log(~~3.1);//3
console.log(3.1|0);//3
console.log(3.1^0);//3
console.log(3.1<<0);//3
console.log(3.1>>0);//3

【5】開關(guān)
`位運算符可以用作設置對象屬性的開關(guān)。假定某個對象有四個開關(guān)，每個開關(guān)都是一個變量。那么，可以設置一個四位的二進制數(shù)，它的每個位對應一個開關(guān)

var FLAG_A = 1; // 0001
var FLAG_B = 2; // 0010
var FLAG_C = 4; // 0100
var FLAG_D = 8; // 1000

上面代碼設置A、B、C、D四個開關(guān)，每個開關(guān)分別占有一個二進制位
現(xiàn)在假設需要打開ABD三個開關(guān)，我們可以構(gòu)造一個掩碼變量

var mask = FLAG_A | FLAG_B | FLAG_D;
// 0001 | 0010 | 1000 => 1011

上面代碼對ABD三個變量進行“或運算”，得到掩碼值為二進制的1011

//“或運算”可以確保打開指定的開關(guān)
flags = flags | mask;
//“與運算”可以將當前設置中凡是與開關(guān)設置不一樣的項，全部關(guān)閉
flags = flags & mask;
//“異或運算”可以切換（toggle）當前設置，即第一次執(zhí)行可以得到當前設置的相反值，再執(zhí)行一次又得到原來的值
flags = flags ^ mask;
//“否運算”可以翻轉(zhuǎn)當前設置，即原設置為0，運算后變?yōu)?；原設置為1，運算后變?yōu)?
flags = ~flags;

【6】判斷奇偶

奇數(shù) & 1 = 1
偶數(shù) & 1 = 0

題外話

想起之前小組內(nèi)的一道算法題，題目是這樣的：
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) = 2*f(n-1) = 4 * f(n-2) = 8 * f(n-3) ..... = 2的(n-1)次方乘f(1),轉(zhuǎn)為位運算即為 1 << (n - 1)

練習題：如何實現(xiàn)日歷簽到功能

  1. 怎么設計能使數(shù)據(jù)最少
  2. 每日簽到應該怎么更新
  3. 怎么判斷某天是否簽到

ps: 作者碼字不易，如果覺得本文對你有幫助，去給原文作者個贊吧，哈哈哈～～【傳送門】

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容