JavaScript の 7 種類のビット演算子について、実際の戦闘でどのように使用されるかを見てみましょう。

この記事では、JavaScript の 7 種類のビット演算子とその使用方法について説明します。

#ビット演算子

演算子は、数値の基本的な操作、つまりデータの操作に使用されます。メモリ内で表現されるビット (ビット)。

ECMAScript ECMAScript のすべての値は IEEE 754 64 ビット形式で保存されますが、ビット演算は 64 ビット表現に直接適用されません。値はまず 32 ビット整数に変換され、ビット演算が実行されてから、結果が 64 ビットに変換されます。

64 ビット整数の格納形式は目に見えないため、開発者にとっては 32 ビット整数しか存在しないように見えます。これで理解できたので、あとは 32 ビット整数についてのみ考慮する必要があります。

符号付き整数は、32 ビットの最初の 31 ビットを使用して整数値を表します。ビット 32 は値の符号を表します (0 は正を示し、1 は負を示します)。このビットは符号ビットと呼ばれ、その値によって残りの値の形式が決まります。正の値は真のバイナリ形式で保存されます。つまり、31 ビットのそれぞれが 2 の累乗を表します。最初のビット (ビット 0 と呼ばれます) は 20 を表し、2 番目のビットは 21 を表します。

ビットが空の場合、0 が埋められます。これは無視することと同じです。たとえば、値 18 のバイナリ形式は 0000000000000000000000000010010、より簡潔には 10010 です。後者は、実際の値を決定するために使用される 5 つの有効ビットです (次の図を参照)。

#ビット単位の NOT~

ビット単位の NOT 演算子はチルダを使用します。記号 ( ~) は、その関数が値の 1 の補数を返すことを示します。ビットごとの NOT は、ECMAScript の数少ない二項数学演算子の 1 つです。次の例を見てください:

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

ここでは、ビット単位の NOT 演算子が値 25 に適用され、結果は -26 になります。ビット単位の not の最終的な効果は、次の演算を実行した結果と同様に、値を反転して 1 を減算することであることがわかります。

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

実際、この 2 つによって返される結果は同じですが、 、ビット 動作速度がはるかに速くなります。これは、ビット演算が基礎となる数値表現に対して実行されるためです。

ビット単位の AND&

ビット単位の AND 演算子はアンパサンド (&) で表され、2 つのオペランドがあります。 。基本的に、ビット単位の AND は 2 つの数値の各ビットを整列させ、真理値表の規則に基づいて各ビットに対して対応する AND 演算を実行します。

ビットごとの AND 演算は、両方のビットが 1 の場合は 1 を返し、どちらかのビットが 0 の場合は 0 を返します。以下に示すように、値 25 と 3 に対して AND 演算を実行する例を見てみましょう。次のバイナリ計算プロセスを見てください:

上の図に示すように、25 と 3 のバイナリ表現では、0 番目のビットの 2 つの数値のみが 1 です。結果値の他のすべてのビットは 0 で埋められるため、結果は 1 になります。

ビットごとの OR

|##ビットごとの OR 演算子はパイプ記号 (|) で表されます。 2 つのオペランド。ビットごとの OR は次の真理表に従います。

##ビットごとの OR 演算は、少なくとも 1 つのビットが 1 の場合は 1 を返し、両方のビットが 0 の場合は 0 を返します。引き続きビット単位の AND の例を使用し、25 と 3 に対してビット単位の OR を実行すると、コードは次のようになります。

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

25 と 3 に対するビット単位の OR 演算の結果が 27 であることがわかります。

計算に含まれる 2 つの数値では、4 ビットがすべて 1 であるため、結果に直接対応します。バイナリコード 11011 は 27 に等しい。

#ビット単位の XOR

^

ビット単位の XOR はキャレット (^) で表され、オペランドも 2 つあります。以下は、ビット単位の XOR の真理表です。

ビット単位の XOR とビット単位の OR の違いは、一方のビットが 1 の場合にのみ 1 を返すことです (両方のビットが 1 の場合)。 1 または 0、0 が返されます)。値 25 と 3 に対してビット単位の XOR 演算を実行します。

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

ご覧のとおり、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. 使用<code ><span style="font-weight: bold; font-size: 16px;">&</span><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 &#39;#&#39;+ color.toString(16)
}
// -------------------------------------------------
hexToRGB(&#39;#ffffff&#39;)               // &#39;rgb(255,255,255)&#39;
RGBToHex(&#39;rgb(255,255,255)&#39;)      // &#39;#ffffff&#39;

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学习教程】

以上がJavaScript の 7 種類のビット演算子について、実際の戦闘でどのように使用されるかを見てみましょう。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。