App下載

位運(yùn)算符在 JS 中的妙用

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

按位與(AND)&

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

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

按位或(OR)|

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

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

按位異或(XOR)^

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

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

按位非(NOT)~

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

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

左移(Left shift)<<

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

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

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

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

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

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

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

對(duì)于非負(fù)數(shù),有符號(hào)右移和無(wú)符號(hào)右移結(jié)果總是相等。

位運(yùn)算符在 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. // 不可對(duì)負(fù)數(shù)取整
  6. console.log(6.83 >>> 0) // 6

交換值

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

RGB 值和16 進(jìn)制顏色值轉(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. function RGBToHex(rgb: string): string{
  9.   const rgbArr = rgb.split(/[^\d]+/)
  10.   const color = rgbArr[1] | rgbArr[2] << 8 | rgbArr[3]
  11.   return `#${color.toString(16)}`
  12. }

推薦好課:

小白學(xué)前端:JavaScript零基礎(chǔ)入門(mén)到進(jìn)階(2020版)

JavaScript實(shí)戰(zhàn):動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)

Javascript移動(dòng)端App實(shí)戰(zhàn)開(kāi)發(fā)


0 人點(diǎn)贊