JavaScript - 按位运算符



JavaScript 位运算符

JavaScript 中的按位运算符在二进制级别对整数值执行操作。它们用于操作整数值的每个位。按位运算符类似于逻辑运算符,但它们作用于单个位。

JavaScript 按位运算符适用于 32 位操作数。在 JavaScript 中,数字存储为 64 位浮点数。JavaScript 在执行该操作之前将数字转换为 32 位有符号整数。按位运算后,它将结果转换为 64 位数字。

JavaScript 中有 7 个按位运算符。以下是带有说明的按位运算符列表。

运算符 名字 描述
& Bitwise AND 如果两个位均为 1,则返回 1,否则返回 0。
| Bitwise OR 如果任一位为 1,则返回 1,否则为 0。
^ Bitwise XOR 如果任一位为 1,则返回 1,否则为 0。
! Bitwise NOT 如果 bit 为 0,则返回 1,否则为 0。
<< Left Shift 通过从右侧推入 0 并丢弃最左侧的位来向左移动位。
>> Right Shift 通过将最左位的副本从左推入并丢弃最右边的位来右移位。
>>> Right Shift with Zero 通过从左侧推入 0 并丢弃最右侧的位,将位向右移动。

JavaScript 按位 AND (&) 运算符

按位 AND (&) 运算符对其整数操作数的每一对位执行 AND 运算。操作后,它将返回一个包含更新位的新整数值。

当按位 AND 运算符应用于一对位时,如果两个位都为 1,则返回 1,否则返回 0。

以下是按位 AND 运算的真值表 -

A B A & B
0 0 0
0 1 0
1 0 0
1 1 1

让我们以 4 位操作数为例来理解按位 AND 运算。

A B A & B
1111 0001 0001
1111 0010 0010
1111 0100 0100
1111 1000 1000

让我们对 5 和 7 执行按位 AND (&) 运算。这些数字表示为 32 位整数。

十进制数 二进制等效 (32 位)
5 00000000000000000000000000000101
7 00000000000000000000000000000111
5 & 7 00000000000000000000000000000101 (= 5)

101 和 111 二进制数的每个位的 OR 运算的结果值与下面相同。

  • 1 & 1 = 1
  • 1 & 0 = 0
  • 1 & 1 = 1

因此,生成的二进制数为 111,等于十进制表示中的 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 = 5

JavaScript 按位 OR (|)算子

按位 OR (|) 运算符对其整数操作数的每一对位执行 OR 运算。操作后,它将返回一个包含更新位的整数值。

当按位 OR 运算符应用于一对位时,如果任一位为 1,则返回 1,否则返回 0。

以下是按位 OR 运算的真值表。

A B A | B
0 0 0
0 1 1
1 0 1
1 1 1

让我们以 4 位操作数为例来理解按位 OR 运算。

A B A | B
1111 0001 1111
1111 0010 1111
1111 0100 1111
1111 1000 1111

让我们对 5 和 7 执行按位 OR (|) 运算。这些数字表示为 32 位整数。

十进制数 二进制等效 (32 位)
5 00000000000000000000000000000101
7 00000000000000000000000000000111
5 | 7 00000000000000000000000000000111 (= 7)

101 和 111 二进制数的每个位的 OR 运算的结果值与下图相同。

  • 1 |1 = 1
  • 1 |0 = 1
  • 1 |1 = 1

因此,生成的二进制数为 111,等于十进制表示中的 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 按位 XOR (^) 运算符

按位 XOR (^) 运算符对其整数操作数的每一对位执行独占 OR 运算。操作后,它将返回一个包含更新位的整数值。

当按位 XOR 运算符应用于一对位时,如果两个位不同,则返回 1,否则返回 0。

以下是按位 XOR 运算的真值表 -

A B A ^ B
0 0 0
0 1 1
1 0 1
1 1 0

让我们对 5 和 7 执行按位 XOR (^) 运算。

十进制数 二进制等效 (32 位)
5 00000000000000000000000000000101
7 00000000000000000000000000000111
5 ^ 7 00000000000000000000000000000010 (= 2)

执行 101 和 111 的按位 XOR 运算后,结果二进制数如下。

  • 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 按位 NOT (~) 运算符

按位 NOT (~) 运算符对二进制数的每个位执行 NOT 运算。它是一个一元运算符,用于反转二进制数的每个位,并将 2 的补码返回给二进制数。

以下是按位 XOR 运算的真值表。

输入(A) 输出(~A)
0 1
1 0

让我们执行按位 NOT (~) 运算。

十进制数 二进制等效 (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 按位左移 (<<) 运算符将其第一个操作数中的所有位向左移动第二个操作数中指定的位数。新位用来自右侧和左侧的零填充,大多数位被丢弃。

将值向左移动一个位置等效于将其乘以 2,移动两个位置等效于乘以 4,依此类推。

当您将 Shift Shift 5 (101) 左移 1 时,值将变为 10 (1010)。当您执行 2 位的左移操作时,结果值为 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

按位右移 (>>) 运算符

按位右移 (>>) 运算符将其第一个操作数中的所有位向右移动第二个操作数中指定的位数。它从左侧插入最左侧位的副本,并丢弃最右侧的位。这样它保留了数字的符号。

简而言之,它从数字中删除了最后 N 位。其中,N 是第二个操作数。右移二进制数等效于将十进制数除以 2。

在下面的示例中,当我们第一次对 101 执行右移操作时,a 的值将等于 010。第二次执行 right-shift 操作后,结果值为 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

使用零 (>>>) 运算符的按位右移

带零 (>>>) 的右移运算符与右移运算符非常相似。它总是用零填充左位,而不用担心位的符号。

此处,10 的二进制表示形式为 1010。当我们执行 0 操作的右移位时,它会将所有位沿正确的方向移动 2 次,并在开始时插入两个 0。因此,结果值将为 0010,等于 1。

十进制数 二进制等效 (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

您可以尝试对每个运算符使用不同的输入,并观察输出以进行更多练习。