我在哪里使用JavaScript中的按位运算符?

问题描述 投票:67回答:16

我读过'what are bitwise operators?',所以我知道bitwise operators是什么,但我还不清楚如何使用它们。任何人都可以提供任何实际的例子,说明位运算符在JavaScript中有用吗?

谢谢。

编辑:

刚刚进入jQuery source,我发现了几个使用按位运算符的地方,例如:(只有&运算符)

// Line 2756:
event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));

// Line 2101
var ret = a.compareDocumentPosition(b) & 4 ? -1 : a === b ? 0 : 1;
javascript bitwise-operators
16个回答
66
投票

例:

解析十六进制值以获取RGB颜色值。

var hex = 'ffaadd';
var rgb = parseInt(hex, 16); // rgb is 16755421


var red   = (rgb >> 16) & 0xFF; // returns 255
var green = (rgb >> 8) & 0xFF;  // 170
var blue  = rgb & 0xFF;     // 221  

4
投票

if (~arr.indexOf('abc')) { // 'abc' is in arr } if (! ~arr.indexOf('def')) { // 'def' is not in arr }

广泛使用,例如,在JS事件中。


3
投票

我曾经用过一次Bitmasks。 unix中的文件权限是一个位掩码,因此要解析它,您需要使用位操作。


2
投票

我正在使用它们将三个数字展平为1,作为在permissions widget中存储多维数组的一种方式。这是我正在开发的体素游戏的片段:


2
投票

这个答案包含对function Chunk() { this._blocks = new Uint16Array(32768); this._networkUpdates = []; } Chunk.prototype.getBlock = function(x, y, z) { return this._blocks[y + (x << 5) + (z << 10)]; }; Chunk.prototype.setBlock = function(x, y, z, value) { this._blocks[y + (x << 5) + (z << 10)] = value; this._networkUpdates.push(value + (y << 15) + (x << 20) + (z << 25)); }; Chunk.prototype.getUpdates = function() { return this._networkUpdates; }; Chunk.prototype.processUpdate = function(update) { // this._blocks[Math.floor(update / 65536)] = update % 65536; this._blocks[update >> 16] = update & 65535; }; var chunk = new Chunk(); chunk.setBlock(10, 5, 4); alert(chunk.getBlock(10, 5, 4)); alert(chunk.getUpdates()[0]);的解释。

通过阅读这些解释并运行代码片段,可以获得一个想法。


0
投票

当您使用十六进制值和位时,它们似乎非常有用。由于4位可以表示0到F.

1111 = F 1111 1111 = FF。


0
投票

使用Node.js的示例

假设您有一个包含这些内容的文件(称为multiply.js),您可以运行

var hex = 'ffaadd';
var rgb = parseInt(hex, 16); // rgb value is 16755421 in decimal = 111111111010101011011101 in binary = total 24 bits


var red   = (rgb >> 16) & 0xFF; // returns 255
var green = (rgb >> 8) & 0xFF;  // returns 170
var blue  = rgb & 0xFF;         // returns 221  

// HOW IS IT

// There are two bitwise operation as named SHIFTING and AND operations.
// SHIFTING is an operation the bits are shifted toward given direction by adding 0 (zero) bit for vacated bit fields.
// AND is an operation which is the same with multiplying in Math. For instance, if 9th bit of the given first bit-set is 0
// and 9th bit of the given second bit-set is 1, the new value will be 0 because of 0 x 1 = 0 in math.

// 0xFF (000000000000000011111111 in binary) - used for to evaluate only last 8 bits of a given another bit-set by performing bitwise AND (&) operation. 
// The count of bits is 24 and the first 16 bits of 0xFF value consist of zero (0) value. Rest of bit-set consists of one (1) value.
console.log("0xFF \t\t\t\t: ", 0xFF) 


// 111111111010101011011101 -> bits of rgb variable
// 000000000000000011111111 -> 255 after (rgb >> 16) shifting operation
// 000000000000000011111111 -> 255 complement (changes the first 16 bits and does nothing for the last 8 bits)
// 000000000000000011111111 -> result bits after performing bitwise & operation
console.log("Red - (rgb >> 16) & 0xFF \t: ", (rgb >> 16) & 0xFF) // used for to evaluate the first 8 bits

// 111111111010101011011101 -> bits of rgb variable
// 000000001111111110101010 -> 65450 -> 'ffaa'
// 000000000000000011111111 -> 255 complement (changes the first 16 bits and does nothing for the last 8 bits)
// 000000000000000010101010 -> result bits after performing bitwise & operation
// calculation -> 000000001111111110101010 & 000000000000000011111111 = 000000000000000010101010 = 170 in decimal = 'aa' in hex-decimal
console.log("Green - (rgb >> 8) & 0xFF \t: ", (rgb >> 8) & 0xFF) // used for to evaluate the middle 8 bits 

// 111111111010101011011101 -> 'ffaadd'
// 000000000000000011111111 -> 255 complement (changes the first 16 bits and does nothing for the last 8 bits)
// 000000000000000011011101 -> result bits after performing bitwise & operation 
// calculation -> 111111111010101011011101 & 000000000000000011111111 = 221 in decimal = 'dd' in hex-decimal
console.log("Blue - rgb & 0xFF \t\t: ", rgb & 0xFF) // // used for to evaluate the last 8 bits.

console.log("It means that `FFAADD` hex-decimal value specifies the same color with rgb(255, 170, 221)")

/* console.log(red)
console.log(green)
console.log(blue) */

并获得与在相同的两个数字上使用乘法运算符一致的输出。在`node multiply <number> <number>` 函数中进行的位移是如何将位掩码表示一个数字并使用它来翻转另一个数字中的位以进行快速操作的示例。

Mulitply

-1
投票

我刚刚发现这个问题试图确认按位var a, b, input = process.argv.slice(2); var printUsage = function() { console.log('USAGE:'); console.log(' node multiply <number> <number>'); } if(input[0] === '--help') {+ printUsage(); process.exit(0); } if(input.length !== 2) { printUsage(); process.exit(9); } if(isNaN(+input[0]) || isNaN(+input[1])) { printUsage(); process.exit(9); } // Okay, safe to proceed a = parseInt(input[0]), b = parseInt(input[1]); var Multiply = function(a,b) { var x = a, y = b, z = 0; while( x > 0 ) { if(x % 2 === 1) { z = z + y; } y = y << 1; x = x >> 1; } return z; } var result = Multiply(a,b); console.log(result); 运算符是否也是Javascript中的AND

既然你问了一个例子:

&

它使用jQuery填充按钮的状态,给出隐藏字段的位掩码值:

  • if ($('input[id="user[privileges]"]').length > 0) { $('#privileges button').each(function () { if (parseInt($('input[id="user[privileges]"]').val()) & parseInt($(this).attr('value'))) { $(this).button('toggle'); } }); } = none
  • 0 = user
  • 1 = administrator
  • 2 user + = administrator

42
投票

我在生产脚本中大量使用按位运算符进行数值转换,因为有时它们比MathparseInt等价物快得多。

我必须付出的代价是代码可读性。所以我通常在开发中使用qazxsw poi,在生产中使用bitwise。

Math

正如你所看到的,浏览器多年来一直没有优化You can find some performance tricks on jsperf.comMath.ceil,所以我预测bitwise会更快更短的方式来做事parseInt

in furure as well


额外奖励:Some further reading on SO...的备忘单:将任何内容转换为整数的简单快捷方式:

| 0

对我来说还有一些魔力:

( 3|0 ) === 3;             // it does not change integers
( 3.3|0 ) === 3;           // it casts off the fractional part in fractionalal numbers
( 3.8|0 ) === 3;           // it does not round, but exactly casts off the fractional part
( -3.3|0 ) === -3;         // including negative fractional numbers
( -3.8|0 ) === -3;         // which have Math.floor(-3.3) == Math.floor(-3.8) == -4
( "3"|0 ) === 3;           // strings with numbers are typecast to integers
( "3.8"|0 ) === 3;         // during this the fractional part is cast off too
( "-3.8"|0 ) === -3;       // including negative fractional numbers
( NaN|0 ) === 0;           // NaN is typecast to 0
( Infinity|0 ) === 0;      // the typecast to 0 occurs with the Infinity
( -Infinity|0 ) === 0;     // and with -Infinity
( null|0 ) === 0;          // and with null,
( (void 0)|0 ) === 0;      // and with undefined
( []|0 ) === 0;            // and with an empty array
( [3]|0 ) === 3;           // but an array with one number is typecast to number
( [-3.8]|0 ) === -3;       // including the cast off of the fractional part
( [" -3.8 "]|0 ) === -3;   // including the typecast of strings to numbers
( [-3.8, 22]|0 ) === 0     // but an Array with several numbers is typecast to 0
( {}|0 ) === 0;                // an empty object is typecast to 0
( {'2':'3'}|0 ) === 0;         // or a not empty object
( (function(){})|0 ) === 0;    // an empty function is typecast to 0 too
( (function(){ return 3;})|0 ) === 0;

24
投票

在JavaScript中,您可以使用双按位否定(3 | '0px' === 3; )替换~~n(如果Math.floor(n)是正数)或n(即使parseInt(n, 10)为负数)。 nn|n总是产生与n&n相同的结果。

~~n

单个按位否定(var n = Math.PI; n; // 3.141592653589793 Math.floor(n); // 3 parseInt(n, 10); // 3 ~~n; // 3 n|n; // 3 n&n; // 3 // ~~n works as a replacement for parseInt() with negative numbers… ~~(-n); // -3 (-n)|(-n); // -3 (-n)&(-n); // -3 parseInt(-n, 10); // -3 // …although it doesn’t replace Math.floor() for negative numbers Math.floor(-n); // -4 )计算~,因此两个按位否定将返回-(parseInt(n, 10) + 1)

应该指出的是,在这三种替代方案中,-(-(parseInt(n, 10) + 1) + 1)

更新:更准确的基准:n|n appears to be the fastest

(发布于http://jsperf.com/rounding-numbers-down


18
投票

现实生活Strangest language feature

example按位XOR作为^切换器

使用像I/O将改变每次调用value ^= 1value

0, 1, 0, 1 ...
function toggle(evt) {
  evt.target.IO ^= 1;                                    // Bitwise XOR as 1/0 toggler
  evt.target.textContent = evt.target.IO ? "ON" : "OFF"; // Unleash your ideas
}

document.querySelectorAll("button").forEach( el =>
  el.addEventListener("click", toggle)
);

16
投票

鉴于Javascript正在取得的进步(特别是对于允许使用js进行服务器端编程的nodejs),JS中的代码越来越复杂。以下是我使用按位运算符的几个实例:

  • IP地址操作: <button>OFF</button> <button>OFF</button> <button>OFF</button>

注意:这是C代码,但JS几乎完全相同

  • CRC算法使用它们很多

看看这个//computes the broadcast address based on the mask and a host address broadcast = (ip & mask) | (mask ^ 0xFFFFFFFF) //converts a number to an ip adress sprintf(ip, "%i.%i.%i.%i", ((ip_int >> 24) & 0x000000FF), ((ip_int >> 16) & 0x000000FF), ((ip_int >> 8) & 0x000000FF), ( ip_int & 0x000000FF));

  • 屏幕分辨率操作

13
投票

要判断一个数字是否奇怪:

wikipedia entry

比模数更快 - 在性能真正重要的地方使用!


11
投票

关于如何使用按位而不是双按位的其他几个示例:

地板操作

function isOdd(number) {
    return !!(number & 1);
}

isOdd(1); // true, 1 is odd
isOdd(2); // false, 2 is not odd
isOdd(357); // true, 357 is odd

检查indexOf是否返回-1

~~2.5    // 2
~~2.1    // 2
~~(-2.5) // -2

10
投票

您可以使用它们来翻转布尔值:

var foo = 'abc';
!~foo.indexOf('bar'); // true

这有点傻,但在大多数情况下,按位运算符在Javascript中没有很多应用程序。


6
投票
var foo = 1;
var bar = 0;
alert(foo ^= 1);
alert(bar ^= 1);

生气地写

var arr = ['abc', 'xyz']

检查数组中是否有东西?

您可以像这样使用按位运算符if (arr.indexOf('abc') > -1) { // 'abc' is in arr } if (arr.indexOf('def') === -1) { // 'def' is not in arr }

~
© www.soinside.com 2019 - 2024. All rights reserved.