App下載

位運算符在 JS 中的妙用

猿友 2021-01-09 15:41:20 瀏覽數(shù) (2538)
反饋

按位與（AND）&

將數(shù)字轉(zhuǎn)換成二進制，然后進行與操作，再轉(zhuǎn)換回十進制

  1. // 1 的二進制表示為 00000000 00000000 00000000 00000001
  2. // 3 的二進制表示為 00000000 00000000 00000000 00000011
  3. // --------------------------------------------------
  4. // 1 的二進制表示為 00000000 00000000 00000000 00000001
  5. console.log(1 & 3) // 1

按位或（OR）｜

將數(shù)字轉(zhuǎn)換為二進制，然后進行或操作，再轉(zhuǎn)換回十進制

  1. // 1 的二進制表示為 00000000 00000000 00000000 00000001
  2. // 3 的二進制表示為 00000000 00000000 00000000 00000011
  3. // --------------------------------------------------
  4. // 3 的二進制表示為 00000000 00000000 00000000 00000011
  5. console.log(1 | 3) // 3

按位異或（XOR）^

將數(shù)字轉(zhuǎn)換為二進制，然后進行異或操作，再轉(zhuǎn)換回十進制

  1. // 1 的二進制表示為 00000000 00000000 00000000 00000001
  2. // 3 的二進制表示為 00000000 00000000 00000000 00000011
  3. // --------------------------------------------------
  4. // 2 的二進制表示為 00000000 00000000 00000000 00000010
  5. console.log(1 ^ 3) // 2

按位非（NOT）~

將數(shù)字轉(zhuǎn)換為二進制，然后進行非操作，再轉(zhuǎn)換回十進制，也就求二進制的反碼

  1. // 1 反碼二進制表示為 11111111 11111111 11111111 11111110
  2. // 由于第一位（符號位）是1，所以這個數(shù)是負數(shù)。JavaScript 內(nèi)部采用補碼形式表示負數(shù)，即需要將這個數(shù)減去 1，再去一次反，然后加上負號才能得到這個負數(shù)對應(yīng)的十進制數(shù)值
  3. // 1 的反碼減一表示為 11111111 11111111 11111111 11111101
  4. // 取反             00000000 00000000 00000000 00000010
  5. // 表示為 -2
  6. console.log(~1) // -2

左移（Left shift）<<

將數(shù)字轉(zhuǎn)換成二進制，然后丟棄高位，低位補0

  1. // 1 的二進制表示為 00000000 00000000 00000000 00000001
  2. // 2 的二進制表示為 00000000 00000000 00000000 00000010
  3. console.log(1 << 1) // 2

有符號右移 >>

將數(shù)字轉(zhuǎn)成二進制，然后丟棄低位，拷貝最左側(cè)的位以填充左側(cè)

  1. // 1 的二進制表示為 00000000 00000000 00000000 00000001
  2. // 0 的二進制表示為 00000000 00000000 00000000 00000000
  3. console.log(1 >> 1) // 0

無符號右移 >>>

將數(shù)字轉(zhuǎn)成二進制，然后丟棄低位，左側(cè)補0，因此總是非負數(shù)。

對于非負數(shù)，有符號右移和無符號右移結(jié)果總是相等。

位運算符在 JS 中的妙用

判斷奇偶

  1. // 偶數(shù) & 1 = 0
  2. // 奇數(shù) & 1 = 1
  3. console.log(2 & 1) // 0
  4. console.log(3 & 1) // 1

取整

  1. console.log(~~6.83) // 6
  2. console.log(6.83 >> 0) // 6
  3. console.log(6.83 << 0) // 6
  4. console.log(6.83 | 0) // 6
  5. // 不可對負數(shù)取整
  6. console.log(6.83 >>> 0) // 6

交換值

  1. var a = 6
  2. var b = 8
  3.  
  4. a ^= b
  5. b ^= a
  6. a ^= b
  7.  
  8. console.log(a) // 8
  9. console.log(b) // 6

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

  1. function hexToRGB(hex: string): string{
  2.   const hexx = hex.replace('#', '0x')
  3.   const r = hexx >> 16
  4.   const g = hexx >> 8 & 0xff
  5.   const b = hexx & 0xff
  6.   return `rgb(${r}, ${g}, $)`
  7. }
  8.  
  9. function RGBToHex(rgb: string): string{
  10.   const rgbArr = rgb.split(/[^\d]+/)
  11.   const color = rgbArr[1] | rgbArr[2] << 8 | rgbArr[3]
  12.   return `#${color.toString(16)}`
  13. }

推薦好課：

小白學(xué)前端：JavaScript零基礎(chǔ)入門到進階(2020版)

JavaScript實戰(zhàn)：動態(tài)網(wǎng)站開發(fā)

Javascript移動端App實戰(zhàn)開發(fā)


JavaScript

0 人點贊