Lassen Sie uns über die 7 Arten von Bitoperatoren in JavaScript sprechen und sehen, wie sie im tatsächlichen Kampf verwendet werden.

Dieser Artikel führt Sie durch die 7 Arten von bitweisen Operatoren in JavaScript und zeigt Ihnen, wie Sie diese 7 Arten von bitweisen Operatoren verwenden. Ich hoffe, er wird Ihnen hilfreich sein!

Bit-Operatoren

Operatoren werden für Low-Level-Operationen an Werten verwendet, d. h. für Operationen an den Bits (Bits), die Daten im Speicher darstellen.

Alle Werte in ECMAScript werden im IEEE 754 64-Bit-Format gespeichert, die Bitoperationen werden jedoch nicht direkt auf die 64-Bit-Darstellung angewendet, sondern in Zuerst werden 32-Bit-Ganzzahlen ausgeführt, dann werden Bitoperationen ausgeführt und dann das Ergebnis in 64 Bits konvertiert. 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。

按位异或 ^Für Entwickler ist es so, als gäbe es nur 32-Bit-Ganzzahlen, da das 64-Bit-Ganzzahlspeicherformat unsichtbar ist. Da wir das nun wissen, müssen wir nur noch 32-Bit-Ganzzahlen berücksichtigen.

Vorzeichenbehaftete Ganzzahl verwendet die ersten 31 Bits von 32 Bits, um den ganzzahligen Wert darzustellen. Bit 32 stellt das Vorzeichen des Werts dar, z. B. 0 für positiv und 1 für negativ. Dieses Bit wird Vorzeichenbit genannt und sein Wert bestimmt das Format des restlichen Werts. Positive Werte werden im echten Binärformat gespeichert, d. h. jedes der 31 Bits stellt eine Potenz von 2 dar. Das erste Bit (genannt Bit 0) stellt 20 dar, das zweite Bit stellt 21 dar und so weiter.

Wenn ein Bit leer ist, wird es mit 0 gefüllt, was einem Ignorieren entspricht. Das Binärformat des Werts 18 ist beispielsweise 0000000000000000000000000010010 oder kompakter 10010. Letztere sind die 5 gültigen Bits, die zur Bestimmung des tatsächlichen Werts verwendet werden (wie in der Abbildung unten dargestellt).

Bitweises NICHT~

Der bitweise NICHT-Operator wird durch die Tilde (~) dargestellt und seine Funktion besteht darin, das Einerkomplement von zurückzugeben die Wertzahl. Bitwise NOT ist einer der wenigen binären mathematischen Operatoren in ECMAScript. Schauen Sie sich das folgende Beispiel an:

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

🎜Hier wird der bitweise NOT-Operator auf den Wert 25 angewendet und das Ergebnis ist 26. Es ist ersichtlich, dass der endgültige Effekt von bitweisem Nicht darin besteht, den Wert zu invertieren und 1 zu subtrahieren, genau wie das Ergebnis der folgenden Operation: 🎜

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

🎜Obwohl beide das gleiche Ergebnis zurückgeben, ist die Bitoperation tatsächlich schneller Viel mehr . Dies liegt daran, dass Bitoperationen an der zugrunde liegenden Darstellung des numerischen Werts ausgeführt werden. 🎜🎜🎜Bitweises UND &🎜🎜🎜🎜Der bitweise UND-Operator wird durch das kaufmännische Und (&) dargestellt und hat zwei Operanden. Im Wesentlichen besteht bitweises UND darin, jedes Bit zweier Zahlen auszurichten und dann die entsprechende UND-Operation für jedes Bit basierend auf den Regeln in der Wahrheitstabelle durchzuführen. 🎜🎜🎜🎜Drücken Sie Die bitweise UND-Operation gibt 1 zurück, wenn beide Bits 1 sind, und 0, wenn eines der Bits 0 ist. Schauen wir uns ein Beispiel an, bei dem wir die Werte 25 und 3 wie folgt mit UND versehen: 🎜

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

🎜Warum? Schauen Sie sich den binären Berechnungsprozess unten an: 🎜🎜🎜🎜Wie in der Abbildung oben gezeigt, sind in der binären Darstellung von 25 und 3 nur die beiden Zahlen im 0. Bit beide 1. Alle anderen Bits des Ergebniswerts werden dann mit Nullen aufgefüllt, sodass das Ergebnis 1 ist. 🎜🎜🎜Bitweises ODER｜🎜🎜🎜🎜Der bitweise ODER-Operator wird durch das Pipe-Symbol (|) dargestellt und verfügt außerdem über zwei Operanden. Bitweises ODER folgt der folgenden Wahrheitstabelle: 🎜🎜🎜🎜Die bitweise ODER-Operation gibt 1 zurück, wenn mindestens ein Bit 1 ist, und 0, wenn beide Bits 0 sind. Wenn Sie immer noch das bitweise UND-Beispiel verwenden und ein bitweises ODER für 25 und 3 durchführen, lautet der Code wie folgt: 🎜

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

🎜Es ist ersichtlich, dass das Ergebnis der bitweisen ODER-Operation für 25 und 3 27 ist: 🎜🎜🎜🎜Unter den beiden beteiligten Zahlen In der Berechnung gibt es 4. Die Bits sind alle 1, sodass sie direkt dem Ergebnis entsprechen. Der Binärcode 11011 ist gleich 27. 🎜🎜🎜Bitweises XOR^🎜🎜🎜🎜Bitweises XOR wird durch das Caretzeichen (^) dargestellt und verfügt außerdem über zwei Operanden. Das Folgende ist die Wahrheitstabelle des bitweisen XOR: 🎜🎜🎜🎜🎜Der Unterschied zwischen bitweisem XOR und bitweisem ODER besteht darin, dass nur dann 1 zurückgegeben wird, wenn ein Bit 1 ist (beide Bits sind 1 oder 0, dann wird 0 zurückgegeben). Führen Sie eine bitweise XOR-Operation für die Werte 25 und 3 durch: 🎜

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

🎜Wie Sie sehen können, führt die bitweise XOR-Operation für 25 und 3 zu 26, wie unten gezeigt: 🎜🎜🎜🎜

两个数在 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学习教程】

Das obige ist der detaillierte Inhalt vonLassen Sie uns über die 7 Arten von Bitoperatoren in JavaScript sprechen und sehen, wie sie im tatsächlichen Kampf verwendet werden.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!