JS中的位运算.md

前言

本文梳理 JS 中位运算相关的知识点。

按位与（AND）&

将数字转换成二进制，然后进行与操作，再转换回十进制

// 1 的二进制表示为 00000000 00000000 00000000 00000001
// 3 的二进制表示为 00000000 00000000 00000000 00000011
// --------------------------------------------------
// 1 的二进制表示为 00000000 00000000 00000000 00000001
console.log(1 & 3); // 1

按位或（OR）｜

将数字转换为二进制，然后进行或操作，再转换回十进制

// 1 的二进制表示为 00000000 00000000 00000000 00000001
// 3 的二进制表示为 00000000 00000000 00000000 00000011
// --------------------------------------------------
// 3 的二进制表示为 00000000 00000000 00000000 00000011
console.log(1 | 3); // 3

按位异或（XOR）^

将数字转换为二进制，然后进行异或操作，再转换回十进制

// 1 的二进制表示为 00000000 00000000 00000000 00000001
// 3 的二进制表示为 00000000 00000000 00000000 00000011
// --------------------------------------------------
// 2 的二进制表示为 00000000 00000000 00000000 00000010
console.log(1 ^ 3); // 2

按位非（NOT）~

将数字转换为二进制，然后进行非操作，再转换回十进制，也就求二进制的反码

// 1 反码二进制表示为 11111111 11111111 11111111 11111110
// 由于第一位（符号位）是1，所以这个数是负数。JavaScript 内部采用补码形式表示负数，即需要将这个数减去 1，再去一次反，然后加上负号才能得到这个负数对应的十进制数值
// 1 的反码减一表示为 11111111 11111111 11111111 11111101
// 取反             00000000 00000000 00000000 00000010
// 表示为 -2
console.log(~1); // -2

左移（Left shift）<<

将数字转换成二进制，然后丢弃高位，低位补 0

// 1 的二进制表示为 00000000 00000000 00000000 00000001
// 2 的二进制表示为 00000000 00000000 00000000 00000010
console.log(1 << 1); // 2

有符号右移 >>

将数字转成二进制，然后丢弃低位，拷贝最左侧的位以填充左侧

// 1 的二进制表示为 00000000 00000000 00000000 00000001
// 0 的二进制表示为 00000000 00000000 00000000 00000000
console.log(1 >> 1); // 0

无符号右移 >>>

将数字转成二进制，然后丢弃低位，左侧补 0，因此总是非负数。

对于非负数，有符号右移和无符号右移结果总是相等。

位运算符在 JS 重的妙用

判断奇偶

// 偶数 & 1 = 0
// 奇数 & 1 = 1
console.log(2 & 1); // 0
console.log(3 & 1); // 1

取整

console.log(~~6.83); // 6
console.log(6.83 >> 0); // 6
console.log(6.83 << 0); // 6
console.log(6.83 | 0); // 6
// 不可对负数取整
console.log(6.83 >>> 0); // 6

交换值

var a = 6;
var b = 8;

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

console.log(a); // 8
console.log(b); // 6

rib 值和 16 进制颜色值转换

function hexToRGB(hex: string): string {
  const hexx = hex.replace("#", "0x");
  const r = hexx >> 16;
  const g = (hexx >> 8) & 0xff;
  const b = hexx & 0xff;
  return `rgb(${r}, ${g}, ${b})`;
}

function RGBToHex(rgb: string): string {
  const rgbArr = rgb.split(/[^\d]+/);
  const color = rgbArr[1] | (rgbArr[2] << 8) | rgbArr[3];
  return `#${color.toString(16)}`;
}