JavaScript 位运算符在整数值的二进制级别上执行操作。它们用于操控每个整数值的比特位。位运算符类似于逻辑运算符，但它们作用于单个比特位。
JavaScript 位运算符作用于 32 位的操作数。在 JavaScript 中，数字存储为 64 位浮点数。JavaScript 在执行位运算前会将数字转换成 32 位带符号整数。位运算之后，结果会被转换回 64 位数字。
JavaScript 中有七种位运算符。以下列出了位运算符及其描述：
| 操作符 |
名称 |
描述 |
& |
位与 |
如果两个比特位都为 1，则返回 1，否则返回 0。 |
| ` |
` |
位或 |
^ |
位异或 |
如果两个比特位不同，则返回 1，否则返回 0。 |
~ |
位非 |
如果比特位为 0，则返回 1，否则返回 0。 |
<< |
左移 |
向左移动比特位，从右侧填充零，并丢弃最左侧的比特位。 |
>> |
右移 |
向右移动比特位，从左侧填充最左侧的比特位，并丢弃最右侧的比特位。 |
>>> |
零填充右移 |
向右移动比特位，从左侧填充零，并丢弃最右侧的比特位。 |
JavaScript 位与 (&) 运算符
位与 (&) 运算符对整数操作数的每一对比特位执行与操作。操作后，它返回一个新的带有更新比特位的整数值。
当位与运算符应用于一对比特位时，如果两个比特位都为 1 则返回 1，否则返回 0。
以下是位与操作的真值表：
| A |
B |
A & B |
| 0 |
0 |
0 |
| 0 |
1 |
0 |
| 1 |
0 |
0 |
| 1 |
1 |
1 |
让我们通过一个 4 位操作数的例子来理解位与操作。
| A |
B |
A & B |
| 1111 |
0001 |
0001 |
| 1111 |
0010 |
0010 |
| 1111 |
0100 |
0100 |
| 1111 |
1000 |
1000 |
示例
我们对 5 和 7 执行位与 (&) 操作。这些数字以 32 位整数表示。
| 十进制数 |
二进制表示 (32 位) |
| 5 |
00000000000000000000000000000101 |
| 7 |
00000000000000000000000000000111 |
| 5 & 7 |
00000000000000000000000000000101 (= 5) |
<html>
<body>
<div id="output"></div>
<script>
const a = 5;
const b = 7;
document.getElementById("output").innerHTML = "a & b = " + (a & b);
</script>
</body>
</html>
它将产生以下结果：
a & b = 5
JavaScript 位或 (|) 运算符
位或 (|) 运算符对整数操作数的每一对比特位执行或操作。操作后，它返回一个新的带有更新比特位的整数值。
当位或运算符应用于一对比特位时，如果任一比特位为 1 则返回 1，否则返回 0。
以下是位或操作的真值表：
| A |
B |
A |
B |
| 0 |
0 |
0 |
|
| 0 |
1 |
1 |
|
| 1 |
0 |
1 |
|
| 1 |
1 |
1 |
|
让我们通过一个 4 位操作数的例子来理解位或操作。
| A |
B |
A |
B |
| 1111 |
0001 |
1111 |
|
| 1111 |
0010 |
1111 |
|
| 1111 |
0100 |
1111 |
|
| 1111 |
1000 |
1111 |
|
示例
我们对 5 和 7 执行位或 (|) 操作。这些数字以 32 位整数表示。
| 十进制数 |
二进制表示 (32 位) |
| 5 |
00000000000000000000000000000101 |
| 7 |
00000000000000000000000000000111 |
| 5 |
7 |
<html>
<body>
<div id="output"></div>
<script>
const a = 5;
const b = 7;
document.getElementById("output").innerHTML = "a | b = " + (a | b);
</script>
</body>
</html>
它将产生以下结果：
a | b = 7
JavaScript 位异或 (^) 运算符
位异或 (^) 运算符对整数操作数的每一对比特位执行异或操作。操作后，它返回一个新的带有更新比特位的整数值。
当位异或运算符应用于一对比特位时，如果两个比特位不同则返回 1，否则返回 0。
以下是位异或操作的真值表：
| A |
B |
A ^ B |
| 0 |
0 |
0 |
| 0 |
1 |
1 |
| 1 |
0 |
1 |
| 1 |
1 |
0 |
示例
我们对 5 和 7 执行位异或 (^) 操作。
| 十进制数 |
二进制表示 (32 位) |
| 5 |
00000000000000000000000000000101 |
| 7 |
00000000000000000000000000000111 |
| 5 ^ 7 |
00000000000000000000000000000010 (= 2) |
执行 101 和 111 的位异或操作后，得到的二进制数如下所示：
1 ^ 1 = 0
1 ^ 0 = 1
1 ^ 1 = 0
因此，结果的二进制数为 010，等同于十进制数 2。
<html>
<body>
<div id="output"></div>
<script>
const a = 5;
const b = 7;
document.getElementById("output").innerHTML = "a ^ b = " + (a ^ b);
</script>
</body>
</html>
它将产生以下输出：
a ^ b = 2
JavaScript 位非 (~) 运算符
位非 (~) 运算符对二进制数中的每一个比特位执行非操作。它是单目运算符，反转二进制数中的每个比特位，并返回该二进制数的二进制补码。
以下是位非操作的真值表：
示例
我们对 5 和 7 执行位非 (~) 操作。
| 十进制数 |
二进制表示 (32 位) |
| 5 |
00000000000000000000000000000101 |
| 7 |
00000000000000000000000000000111 |
| ~5 |
11111111111111111111111111111010 (= -6) |
| ~7 |
11111111111111111111111111111000 (= -8) |
尝试执行以下代码：
<html>
<body>
<div id="output"></div>
<script>
const a = 5;
const b = 7;
document.getElementById("output").innerHTML =
"~a = " + (~a) + "<br>" +
"~b = " + (~b)
</script>
</body>
</html>
它将产生以下输出：
~a = -6
~b = -8
JavaScript 左移 (<<) 运算符
JavaScript 左移 (<<) 运算符将其第一个操作数的所有比特位向左移动由第二个操作数指定的位置数。新的比特位从右侧填充零，并丢弃最左侧的比特位。
将一个值向左移动一位相当于将其乘以 2，移动两位相当于乘以 4，以此类推。
示例
当你将 5 (101) 向左移动一位时，值变为 10 (1010)。当你将值向左移动两位时，结果值为 20 (10100)。
| 十进制数 |
二进制表示 (32 位) |
| 5 |
00000000000000000000000000000101 |
| 5 << 1 |
00000000000000000000000000001010 (= 10) |
| 5 << 2 |
00000000000000000000000000010100 (= 20) |
以下 JavaScript 程序演示了位左移操作：
<html>
<body>
<div id="output"></div>
<script>
const a = 5;
document.getElementById("output").innerHTML =
"a << 1 = " + (a << 1) + "<br>" +
"a << 2 = " + (a << 2);
</script>
</body>
</html>
它将产生以下输出：
a << 1 = 10
a << 2 = 20
JavaScript 右移 (>>) 运算符
位右移 (>>) 运算符将其第一个操作数的所有比特位向右移动由第二个操作数指定的位置数。它从左侧插入最左侧比特位的拷贝，并丢弃最右侧的比特位。这样它保持了数字的符号。
简而言之，它移除了数字的最后 N 位。在这里，N 是第二个操作数。向右移动二进制数相当于除以 2。
示例
在下面的例子中，当我们首次对 101 执行右移操作时，a 的值变为等于 010。在第二次执行右移操作后，结果值为 001，等于十进制数 1。
| 十进制数 |
二进制表示 (32 位) |
| 5 |
00000000000000000000000000000101 |
| 5 >> 1 |
00000000000000000000000000000010 (= 2) |
| ~5 |
11111111111111111111111111111010 (= -6) |
| ~5 >> 1 |
11111111111111111111111111111101 (= -3) |
尝试执行以下程序：
<html>
<body>
<div id="output"></div>
<script>
const a = 5;
document.getElementById("output").innerHTML =
"a >> 1 = " + (a >> 1) + "<br>" +
"~a >> 1 = " + (~a >> 1);
</script>
</body>
</html>
它将产生以下输出：
a >> 1 = 2
~a >> 1 = -3
JavaScript 零填充右移 (>>>) 运算符
零填充右移 (>>>) 运算符非常类似于右移运算符。它总是从左侧填充零而不用担心比特位的符号。
示例
这里，10 的二进制表示为 1010。当我们执行零填充右移操作时，它将所有比特位向右移动两次，并在开头插入两个零。因此，结果值将是 0010，等于十进制数 2。
| 十进制数 |
二进制表示 (32 位) |
| 5 |
00000000000000000000000000000101 |
| 5 >>> 1 |
00000000000000000000000000000010 (= 2) |
以下 JavaScript 程序演示了 >>> 运算符的使用。
<html>
<body>
<div id="output"></div>
<script>
const a = 5;
document.getElementById("output").innerHTML = "a >>> 1 = " + (a >>> 1);
</script>
</body>
</html>
它将产生以下结果：
a >>> 1 = 2
你可以尝试使用不同的输入与每个运算符组合，并观察输出以获得更多练习。