자바스크립트의 비트 연산자 7가지에 대해 이야기하고 실제 전투에서 어떻게 사용되는지 알아볼까요?

이 기사에서는 JavaScript의 7가지 비트 연산자를 살펴보고 이 7가지 비트 연산자를 사용하는 방법을 살펴보겠습니다. 도움이 되기를 바랍니다.

비트 연산자

연산자는 값에 대한 하위 수준 연산, 즉 메모리의 데이터를 나타내는 비트(비트)에 연산을 수행하는 데 사용됩니다.

ECMAScript의 모든 값은 IEEE 754 64비트 형식으로 저장되지만 비트 연산은 64비트 표현에 직접 적용되지 않습니다. 32비트 정수를 먼저 수행한 후 비트 연산을 수행한 후 결과를 64비트로 변환합니다. ECMAScript 中的所有数值都以 IEEE 754 64 位格式存储，但位操作并不直接应用到 64 位表示，而是先把值转换为 32 位整数，再进行位操作，之后再把结果转换为 64 位。

对开发者而言，就好像只有 32 位整数一样，因 为 64 位整数存储格式是不可见的。既然知道了这些，就只需要考虑 32 位整数即可。 

有符号整数使用 32 位的前 31 位表示整数值。第 32 位表示数值的符号，如 0 表示正，1 表示负。这 一位称为符号位（sign bit），它的值决定了数值其余部分的格式。正值以真正的二进制格式存储，即 31 位中的每一位都代表 2 的幂。第一位（称为第 0 位）表示 20 ，第二位表示 21 ，依此类推。

如果一个位是空的，则以0填充，相当于忽略不计。比如，数值18的二进制格式为00000000000000000000000000010010， 或更精简的 10010。后者是用到的 5 个有效位，决定了实际的值（如下图所示）。

按位非 ～

按位非操作符用波浪符（~）表示，它的作用是返回数值的一补数。按位非是 ECMAScript 中为数 不多的几个二进制数学操作符之一。看下面的例子：

let num1 = 25; //二进制 00000000000000000000000000011001
let num2 = ~num1; // 二进制 11111111111111111111111111100110
console.log(num2); // -26

这里，按位非操作符作用到了数值 25，得到的结果是26。由此可以看出，按位非的最终效果是对 数值取反并减 1，就像执行如下操作的结果一样：

let num1 = 25;
let num2 = -num1 - 1;
console.log(num2); // "-26"

实际上，尽管两者返回的结果一样，但位操作的速度快得多。这是因为位操作是在数值的底层表示 上完成的。

按位与 &

按位与操作符用和号（&）表示，有两个操作数。本质上，按位与就是将两个数的每一个位对齐， 然后基于真值表中的规则，对每一位执行相应的与操作。

按位与操作在两个位都是 1 时返回 1，在任何一位是 0 时返回 0。 下面看一个例子，我们对数值 25 和 3 求与操作，如下所示：

let result = 25 & 3;
console.log(result); // 1 25 和 3 的按位与操作的结果是 1。

为什么呢？看下面的二进制计算过程：

如上图所示，25 和 3 的二进制表示中，只有第 0 位上的两个数都是 1。于是结果数值的所有其他位都 会以 0 填充，因此结果就是 1。

按位或 ｜

按位或操作符用管道符（|）表示，同样有两个操作数。按位或遵循如下真值表：

按位或操作在至少一位是 1 时返回 1，两位都是 0 时返回 0。 仍然用按位与的示例，如果对 25 和 3 执行按位或，代码如下所示：

let result = 25 | 3;
console.log(result); // 27

可见 25 和 3 的按位或操作的结果是 27：

在参与计算的两个数中，有 4 位都是 1，因此它们直接对应到结果上。二进制码 11011 等于 27。

按位异或 ^64비트 정수 저장 형식이 보이지 않기 때문에 개발자에게는 마치 32비트 정수만 있는 것처럼 보입니다. 이제 우리는 이것을 알았으므로 32비트 정수만 고려하면 됩니다.

부호 있는 정수는 32비트 중 처음 31비트를 사용하여 정수 값을 나타냅니다. 비트 32는 값의 부호를 나타냅니다(예: 0은 양수를 나타내고 1은 음수를 나타냄). 이 비트를 부호 비트라고 하며 해당 값이 나머지 값의 형식을 결정합니다. 양수 값은 실제 이진 형식으로 저장됩니다. 즉, 각 31비트는 2의 거듭제곱을 나타냅니다. 첫 번째 비트(비트 0이라고 함)는 20 을 나타내고 두 번째 비트는 21 을 나타냅니다.

비트가 비어 있으면 0으로 채워지며 이는 무시하는 것과 같습니다. 예를 들어 값 18의 이진 형식은 0000000000000000000000000010010 또는 더 간단하게 10010입니다. 후자는 실제 값을 결정하는 데 사용되는 5개의 유효 비트입니다(아래 그림 참조).

비트 NOT~

비트 NOT 연산자는 물결표(~)로 표시되며, 그 기능은 다음의 1의 보수를 반환하는 것입니다. 값 번호. Bitwise NOT은 ECMAScript의 몇 안 되는 이진 수학 연산자 중 하나입니다. 다음 예를 보세요.

let result = 25 ^ 3;
console.log(result); // 26

🎜여기서 비트 단위 NOT 연산자가 값 25에 적용되고 결과는 26입니다. 비트별 Not의 최종 효과는 다음 연산을 수행한 결과와 마찬가지로 값을 반전하고 1을 빼는 것임을 알 수 있습니다. 🎜

let oldValue = 2; // 等于二进制 10
let newValue = oldValue << 5; // 等于二进制 1000000，即十进制 64

🎜실제로 둘 다 동일한 결과를 반환하지만 비트 연산이 훨씬 더 빠릅니다. . 이는 숫자 값의 기본 표현에 대해 비트 연산이 수행되기 때문입니다. 🎜🎜🎜비트 AND &🎜🎜🎜🎜비트 AND 연산자는 앰퍼샌드(&)로 표시되며 피연산자가 두 개 있습니다. 기본적으로 비트별 AND는 두 숫자의 각 비트를 정렬한 다음 진리표의 규칙에 따라 각 비트에 해당 AND 연산을 수행하는 것입니다. 🎜🎜🎜🎜누르기 비트별 AND 연산은 두 비트가 모두 1이면 1을 반환하고, 두 비트 중 하나라도 0이면 0을 반환합니다. 다음과 같이 값 25와 3을 AND하는 예를 살펴보겠습니다. 🎜

let oldValue = 64; // 等于二进制 1000000
let newValue = oldValue >> 5; // 等于二进制 10，即十进制 2

🎜Why? 아래의 이진 계산 과정을 살펴보세요. 🎜🎜🎜🎜위 그림과 같이 25와 3의 이진수 표현에서는 0번째 비트의 두 숫자만 모두 1입니다. 결과 값의 다른 모든 비트는 0으로 채워지므로 결과는 1입니다. 🎜🎜🎜비트 OR|🎜🎜🎜🎜비트 OR 연산자는 파이프 기호(|)로 표시되며 피연산자 2개도 있습니다. 비트별 OR은 다음 진리표를 따릅니다. 🎜🎜🎜🎜비트 OR 연산은 적어도 하나의 비트가 1이면 1을 반환하고 두 비트가 모두 0이면 0을 반환합니다. 여전히 비트별 AND 예제를 사용하여 25와 3에 대해 비트별 OR을 수행하면 코드는 다음과 같습니다. 🎜

let oldValue = 64; // 等于二进制 1000000 
let newValue = oldValue >>> 5; // 等于二进制 10，即十进制 2

🎜25와 3에 대한 비트별 OR 연산의 결과는 27임을 알 수 있습니다. 🎜🎜🎜🎜관련된 두 숫자 중 계산에는 4개가 있습니다. 비트는 모두 1이므로 결과에 직접적으로 대응됩니다. 바이너리 코드 11011은 27과 같습니다. 🎜🎜🎜비트별 XOR^🎜🎜🎜🎜비트별 XOR은 캐럿(^)으로 표시되며 피연산자도 두 개 있습니다. 다음은 비트 XOR의 진리표입니다. 🎜🎜🎜🎜🎜비트 XOR과 비트 OR의 차이점은 한 비트가 1인 경우에만 1을 반환한다는 것입니다(두 비트 모두 1 또는 0이면 0을 반환함). 값 25와 3에 대해 비트별 XOR 연산을 수행합니다. 🎜

let oldValue = -64; // 等于二进制 11111111111111111111111111000000
let newValue = oldValue >>> 5; // 等于十进制 134217726

🎜보시다시피 25와 3에 대한 비트별 XOR 연산은 아래와 같이 26이 됩니다. 🎜🎜🎜🎜

两个数在 4 位上都是 1，但两个数的第 0 位都是 1，因此那一位在结果中就变成了 0。其余位上的 1 在另一个数上没有对应的 1，因此会直接传递到结果中。二进制码 11010 等于 26。（注意，这比对同样 两个值执行按位或操作得到的结果小 1。）

左移 <<

左移操作符用两个小于号（<<）表示，会按照指定的位数将数值的所有位向左移动。比如，如果数 值 2（二进制 10）向左移 5 位，就会得到 64（二进制 1000000），如下所示：

let oldValue = 2; // 等于二进制 10
let newValue = oldValue << 5; // 等于二进制 1000000，即十进制 64

注意在移位后，数值右端会空出 5 位。左移会以 0 填充这些空位，让结果是完整的 32 位数值（见下图）。

注意，左移会保留它所操作数值的符号。比如，如果-2 左移 5 位，将得到-64，而不是正 64。

有符号右移

有符号右移由两个大于号（>>）表示，会将数值的所有 32 位都向右移，同时保留符号（正或负）。 有符号右移实际上是左移的逆运算。比如，如果将 64 右移 5 位，那就是 2：

let oldValue = 64; // 等于二进制 1000000
let newValue = oldValue >> 5; // 等于二进制 10，即十进制 2

同样，移位后就会出现空位。不过，右移后空位会出现在左侧，且在符号位之后（见图 3-3）。 ECMAScript 会用符号位的值来填充这些空位，以得到完整的数值。

无符号右移

无符号右移用 3 个大于号表示（>>>），会将数值的所有 32 位都向右移。对于正数，无符号右移与 有符号右移结果相同。仍然以前面有符号右移的例子为例，64 向右移动 5 位，会变成 2：

let oldValue = 64; // 等于二进制 1000000 
let newValue = oldValue >>> 5; // 等于二进制 10，即十进制 2

对于负数，有时候差异会非常大。与有符号右移不同，无符号右移会给空位补 0，而不管符号位是 什么。对正数来说，这跟有符号右移效果相同。但对负数来说，结果就差太多了。无符号右移操作符将负数的二进制表示当成正数的二进制表示来处理。因为负数是其绝对值的二补数，所以右移之后结果变 得非常之大，如下面的例子所示：

let oldValue = -64; // 等于二进制 11111111111111111111111111000000
let newValue = oldValue >>> 5; // 等于十进制 134217726

在对-64 无符号右移 5 位后，结果是 134 217 726。这是因为-64 的二进制表示是 1111111111111111111 1111111000000，无符号右移却将它当成正值，也就是 4 294 967 232。把这个值右移 5 位后，结果是 00000111111111111111111111111110，即 134 217 726。

实战中的妙用

1.判断奇偶数

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

2. 使用<span style="font-size: 16px;">^</span><span style="font-size: 16px;"></span>来完成值的交换

let a = 2
let b = 5
a ^= b
b ^= a
a ^= b
console.log(a) // 5
console.log(b) // 2

3. 使用<span style="font-size: 16px;">~</span><span style="font-size: 16px;"></span>进行判断

// 常用判断
if (arr.indexOf(item) > -1) {
    // code
}
// 按位非    ~-1 = -(-1) - 1 取反再 -1
if (~arr.indexOf(item)) {
    // code
}

4. 使用&amp;<span style="font-weight: bold; font-size: 16px;"></span><span style="font-family:Microsoft Yahei, Hiragino Sans GB, Helvetica, Helvetica Neue, 微软雅黑, Tahoma, Arial, sans-serif">、</span>、<strong><span style="font-size: 16px;">|</span></strong><span style="font-size: 16px;"></span>来完成rgb值和16进制颜色值之间的转换

/**
 * 16进制颜色值转RGB
 * @param  {String} hex 16进制颜色字符串
 * @return {String}     RGB颜色字符串
 */
  function hexToRGB(hex) {
    var hexx = hex.replace('#', '0x')
    var r = hexx >> 16
    var g = hexx >> 8 & 0xff
    var b = hexx & 0xff
    return `rgb(${r}, ${g}, ${b})`
}

/**
 * RGB颜色转16进制颜色
 * @param  {String} rgb RGB进制颜色字符串
 * @return {String}     16进制颜色字符串
 */
function RGBToHex(rgb) {
    var rgbArr = rgb.split(/[^\d]+/)
    var color = rgbArr[1]<<16 | rgbArr[2]<<8 | rgbArr[3]
    return '#'+ color.toString(16)
}
// -------------------------------------------------
hexToRGB('#ffffff')               // 'rgb(255,255,255)'
RGBToHex('rgb(255,255,255)')      // '#ffffff'

5. 使用<span style="font-size: 16px;">|</span>、<span style="font-size: 16px;">~</span>、、<<、来取整

console.log(~~ 3.1415)    // 3
console.log(3.1415 >> 0)  // 3
console.log(3.1415 << 0)  // 3
console.log(3.1415 | 0)   // 3
// >>>不可对负数取整
console.log(3.1415 >>> 0)   // 3

【相关推荐：javascript学习教程】

위 내용은 자바스크립트의 비트 연산자 7가지에 대해 이야기하고 실제 전투에서 어떻게 사용되는지 알아볼까요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!