blocks|key|346801|text|考虑到Javascript正在取得的进步(特别是nodejs，它允许使用JS进行服务器端编程)，JS中的代码越来越复杂。下面是我使用位运算符的几个实例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|346802|346803|IP地址操作：|unordered-list-item|346804|346805|//根据掩码和主机地址广播=+(ip+&+mask)+%7C(MASK%5E+0xFFFFFFFF)+//将一个数字转换为ip地址sprintf(ip，“%25i.%25i”，((ip_int+>>+24)+&+0x000000FF)，((ip_int+>>+16)+&+0x000000FF)，((ip_int+>>+8)+&+0x000000FF)，(+ip_int+&0x000000FF)；|346806|注意:这是C代码，但JS几乎相同|346807|346808|CRC算法大量使用它们|346809|346810|看看这上面的wikipedia+entry|offset|length|346811|346812|屏幕分辨率操作|346813|346814|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/Computation_of_CRC^0|0|0|0|0|0|0|0|0|0|6|F|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|15|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|16|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|17|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|18|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|19|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|L|3|M|5|E|7|1B|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1D|8|@]|9|@$Q|1E|R|1F|1|1G]]|A|$]]|$1|S|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|T|3|U|5|E|7|1I|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

Given the advances Javascript is making (especially with nodejs that allows server side programming with js), there is more and more complex code in JS. Here are a couple of instances where I have used bitwise operators: 

<ul>
<li>IP address operations: 

<pre><code>//computes the broadcast address based on the mask and a host address
broadcast = (ip &amp; mask) | (mask ^ 0xFFFFFFFF)


//converts a number to an ip adress 
sprintf(ip, "%i.%i.%i.%i", ((ip_int &gt;&gt; 24) &amp; 0x000000FF),
 ((ip_int &gt;&gt; 16) &amp; 0x000000FF),
 ((ip_int &gt;&gt; 8) &amp; 0x000000FF),
 ( ip_int &amp; 0x000000FF));
</code></pre></li>
</ul>

Note: this is C code, but JS is almost identical 

<ul>
<li>CRC algorithms uses them a lot</li>
</ul>

Check out the <a href="http://en.wikipedia.org/wiki/Computation_of_CRC" rel="noreferrer">wikipedia entry</a> on this

<ul>
<li>Screen resolution operations</li>
</ul>

blocks|key|345451|text|您可以使用它们来翻转布尔值：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|345452|var+foo+=+1;
var+bar+=+0;
alert(foo+%5E=+1);
alert(bar+%5E=+1);|code-block|syntax|javascript|345453|这有点傻，而且在大多数情况下，按位运算符在Javascript中没有太多的应用程序。|345454|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can use them for flipping a boolean value:

<pre><code>var foo = 1;
var bar = 0;
alert(foo ^= 1);
alert(bar ^= 1);
</code></pre>

This is a bit silly though and for the most part bitwise operators do not have many applications in Javascript.

blocks|key|3336621|text|。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3336622|例如，在JS事件中广泛使用。|3336623|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<a href="http://en.wikipedia.org/wiki/Mask_(computing)" rel="nofollow noreferrer">Bitmasks</a>.

Used extensively, for example, in JS events.

blocks|key|347783|text|示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|347784|解析十六进制值以获取RGB颜色值。|347785|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++|code-block|syntax|javascript|347786|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Example: 

Parses hexadecimal value to get RGB color values.

<pre><code>var hex = 'ffaadd';
var rgb = parseInt(hex, 16); // rgb is 16755421


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

blocks|key|345484|text|我曾经用它做过一次permissions+widget。unix中的文件权限是位掩码，因此要解析它，您需要使用位操作。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|345485|entityMap|0|LINK|mutability|MUTABLE|url|http://candyscript.com/projects/minikit/samples/permissions.html^0|9|I|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I've used it once for a <a href="http://candyscript.com/projects/minikit/samples/permissions.html" rel="nofollow noreferrer">permissions widget</a>. File permissions in unix are a bitmask, so to parse it, you need to use bit operations.

blocks|key|350438|text|在JavaScript中，可以使用双位否定(~~n)替换Math.floor(n)+(如果n是正数)或parseInt(n,+10)+(即使n是负数)。n%7Cn和n&n始终产生与~~n相同的结果。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|350439|var+n+=+Math.PI;
n;+//+3.141592653589793
Math.floor(n);+//+3
parseInt(n,+10);+//+3
~~n;+//+3
n%7Cn;+//+3
n&n;+//+3

//+~~n+works+as+a+replacement+for+parseInt()+with+negative+numbers…
~~(-n);+//+-3
(-n)%7C(-n);+//+-3
(-n)&(-n);+//+-3
parseInt(-n,+10);+//+-3
//+…although+it+doesn’t+replace+Math.floor()+for+negative+numbers
Math.floor(-n);+//+-4|code-block|syntax|javascript|350440|单次按位求反(~)计算-(parseInt(n,+10)+%2B+1)，因此两次按位求反将返回-(-(parseInt(n,+10)+%2B+1)+%2B+1)。|350441|应该注意的是，在这三个备选方案中，+。|350442|更新：更准确的基准测试在这里：|BOLD|350443|(发布在Strangest+language+feature上)|350444|entityMap|0|LINK|mutability|MUTABLE|url|http://ernestdelgado.com/archive/benchmark-on-the-floor/|1|https://stackoverflow.com/questions/1995113/strangest-language-feature/2019171#2019171^0|M|3|S|D|19|1|1F|F|1Y|1|24|3|28|3|2G|3|0|0|7|1|B|M|19|T|0|H|1|0|0|0|3|0|4|Q|1|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]|$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1K|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1L|8|@$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]|$9|1Q|A|1R|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1S|8|@]|D|@$9|1T|A|1U|1|1V]]|E|$]]|$1|O|3|P|5|6|7|1W|8|@$9|1X|A|1Y|B|Q]]|D|@]|E|$]]|$1|R|3|S|5|6|7|1Z|8|@]|D|@$9|20|A|21|1|22]]|E|$]]|$1|T|3|-4|5|6|7|23|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]|11|$5|W|X|Y|E|$Z|12]]]]

In JavaScript, you can use a double bitwise negation (<code>~~n</code>) as a replacement for <code>Math.floor(n)</code> (if <code>n</code> is a positive number) or <code>parseInt(n, 10)</code> (even if <code>n</code> is negative). <code>n|n</code> and <code>n&amp;n</code> always yield the same results as <code>~~n</code>.

<pre><code>var n = Math.PI;
n; // 3.141592653589793
Math.floor(n); // 3
parseInt(n, 10); // 3
~~n; // 3
n|n; // 3
n&amp;n; // 3

// ~~n works as a replacement for parseInt() with negative numbers…
~~(-n); // -3
(-n)|(-n); // -3
(-n)&amp;(-n); // -3
parseInt(-n, 10); // -3
// …although it doesn’t replace Math.floor() for negative numbers
Math.floor(-n); // -4
</code></pre>

A single bitwise negation (<code>~</code>) calculates <code>-(parseInt(n, 10) + 1)</code>, so two bitwise negations will return <code>-(-(parseInt(n, 10) + 1) + 1)</code>.

It should be noted that of these three alternatives, <a href="http://ernestdelgado.com/archive/benchmark-on-the-floor/" rel="nofollow noreferrer"><code>n|n</code> appears to be the fastest</a>.

Update: More accurate benchmarks here: <a href="http://jsperf.com/rounding-numbers-down" rel="nofollow noreferrer">http://jsperf.com/rounding-numbers-down</a>

(As posted on <a href="https://stackoverflow.com/questions/1995113/strangest-language-feature/2019171#2019171">Strangest language feature</a>)

blocks|key|3336703|text|关于如何使用按位not和双倍按位not的其他示例很少：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3336704|Floor操作|offset|length|style|BOLD|3336705|~~2.5++++//+2
~~2.1++++//+2
~~(-2.5)+//+-2|code-block|syntax|javascript|3336706|检查indexOf是否返回-1+|3336707|var+foo+=+'abc';
!~foo.indexOf('bar');+//+true|3336708|entityMap^0|0|0|7|0|0|0|G|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|X|8|@$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

Few other examples of how to use bitwise not and double bitwise not:

Floor operation

<pre><code>~~2.5 // 2
~~2.1 // 2
~~(-2.5) // -2
</code></pre>

Check whether indexOf returned -1 or not

<pre><code>var foo = 'abc';
!~foo.indexOf('bar'); // true
</code></pre>

blocks|key|3123819|text|我在生产脚本中大量使用位运算符进行数值转换，因为有时它们比Math或parseInt等效运算符快得多。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3123820|我要付出的代价是代码可读性。因此，我通常在开发中使用Math，在生产中使用位。|BOLD|3123821|You+can+find+some+performance+tricks+on+jsperf.com。|3123822|正如你所看到的，浏览器多年来不会优化Math.ceil和parseInt，所以我预测按位将是in+furure+as+well更快更短的方式。|3123823|Some+further+reading+on+SO...|3123824|3123825|奖励:适用于%7C+0的cheat+sheet：一种简单快速地将任何内容转换为整数的方法：|3123826|(+3%7C0+)+===+3;+++++++++++++//+it+does+not+change+integers
(+3.3%7C0+)+===+3;+++++++++++//+it+casts+off+the+fractional+part+in+fractionalal+numbers
(+3.8%7C0+)+===+3;+++++++++++//+it+does+not+round,+but+exactly+casts+off+the+fractional+part
(+-3.3%7C0+)+===+-3;+++++++++//+including+negative+fractional+numbers
(+-3.8%7C0+)+===+-3;+++++++++//+which+have+Math.floor(-3.3)+==+Math.floor(-3.8)+==+-4
(+"3"%7C0+)+===+3;+++++++++++//+strings+with+numbers+are+typecast+to+integers
(+"3.8"%7C0+)+===+3;+++++++++//+during+this+the+fractional+part+is+cast+off+too
(+"-3.8"%7C0+)+===+-3;+++++++//+including+negative+fractional+numbers
(+NaN%7C0+)+===+0;+++++++++++//+NaN+is+typecast+to+0
(+Infinity%7C0+)+===+0;++++++//+the+typecast+to+0+occurs+with+the+Infinity
(+-Infinity%7C0+)+===+0;+++++//+and+with+-Infinity
(+null%7C0+)+===+0;++++++++++//+and+with+null,
(+(void+0)%7C0+)+===+0;++++++//+and+with+undefined
(+[]%7C0+)+===+0;++++++++++++//+and+with+an+empty+array
(+[3]%7C0+)+===+3;+++++++++++//+but+an+array+with+one+number+is+typecast+to+number
(+[-3.8]%7C0+)+===+-3;+++++++//+including+the+cast+off+of+the+fractional+part
(+["+-3.8+"]%7C0+)+===+-3;+++//+including+the+typecast+of+strings+to+numbers
(+[-3.8,+22]%7C0+)+===+0+++++//+but+an+Array+with+several+numbers+is+typecast+to+0
(+{}%7C0+)+===+0;++++++++++++++++//+an+empty+object+is+typecast+to+0
(+{'2':'3'}%7C0+)+===+0;+++++++++//+or+a+not+empty+object
(+(function(){})%7C0+)+===+0;++++//+an+empty+function+is+typecast+to+0+too
(+(function(){+return+3;})%7C0+)+===+0;|code-block|syntax|javascript|3123827|对我来说还有一些神奇的东西：|3123828|3+%7C+'0px'+===+3;|3123829|entityMap|0|LINK|mutability|MUTABLE|url|http://jsperf.com/math-floor-vs-math-round-vs-parseint/18|1|https://stackoverflow.com/questions/2526682/why-is-javascripts-math-floor-the-slowest-way-to-calculate-floor-in-javascript|2|https://stackoverflow.com/questions/4024429/what-does-a-single-vertical-bar-mean-in-javascript^0|T|4|Y|8|0|8|5|Q|4|0|0|1E|0|0|I|9|S|8|1A|H|1|0|0|T|2|0|0|6|3|A|B|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1H|8|@$9|1I|A|1J|B|H]|$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|I|3|J|5|6|7|1M|8|@]|D|@$9|1N|A|1O|1|1P]]|E|$]]|$1|K|3|L|5|6|7|1Q|8|@$9|1R|A|1S|B|C]|$9|1T|A|1U|B|C]]|D|@$9|1V|A|1W|1|1X]]|E|$]]|$1|M|3|N|5|6|7|1Y|8|@]|D|@$9|1Z|A|20|1|21]]|E|$]]|$1|O|3|-4|5|6|7|22|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|23|8|@$9|24|A|25|B|C]|$9|26|A|27|B|H]]|D|@]|E|$]]|$1|R|3|S|5|T|7|28|8|@]|D|@]|E|$U|V]]|$1|W|3|X|5|6|7|29|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|T|7|2A|8|@]|D|@]|E|$U|V]]|$1|10|3|-4|5|6|7|2B|8|@]|D|@]|E|$]]]|11|$12|$5|13|14|15|E|$16|17]]|18|$5|13|14|15|E|$16|19]]|1A|$5|13|14|15|E|$16|1B]]]]

I heavily use bitwise operators for numerical convertions in production scripts, because sometimes they're much faster than their <code>Math</code> or <code>parseInt</code> equivalents.

The price I have to pay is code readability. So I usualy use <code>Math</code> in development and bitwise in production.

<a href="http://jsperf.com/math-floor-vs-math-round-vs-parseint/18" rel="noreferrer">You can find some performance tricks on jsperf.com</a>.

As you can see, browsers don't optimize <code>Math.ceil</code> and <code>parseInt</code> for years, so I predict bitwise will be faster and shorter way to do things <a href="https://stackoverflow.com/questions/2526682/why-is-javascripts-math-floor-the-slowest-way-to-calculate-floor-in-javascript">in furure as well</a>. 

<a href="https://stackoverflow.com/questions/4024429/what-does-a-single-vertical-bar-mean-in-javascript">Some further reading on SO...</a>

<hr>

Bonus: cheat sheet for <code>| 0</code> : an easy and fast way to convert anything to integer:

<pre><code>( 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;
</code></pre>

and some magic for me: 

<pre><code>3 | '0px' === 3;
</code></pre>

blocks|key|345537|text|我只是发现了这个问题，试图确认在Javascript中，逐位AND操作符是否也是&。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|345538|既然你想要一个例子：|345539|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');
++++++++}
++++});
}|code-block|syntax|javascript|345540|它使用给定隐藏字段的位掩码值的jQuery填充按钮的状态：|345541|345542|none+=+0|unordered-list-item|345543|user+=+1|345544|administrator+=+2|345545|user+%2B+3|345546|+=+administrator|345547|entityMap^0|U|3|14|1|0|0|0|0|0|0|4|7|1|0|0|4|7|1|0|0|D|G|1|0|0|4|7|1|0|3|D|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|19|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]|$1|P|3|Q|5|R|7|1B|8|@$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|S|3|T|5|R|7|1G|8|@$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|U|3|V|5|R|7|1L|8|@$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|W|3|X|5|R|7|1Q|8|@$9|1R|A|1S|B|C]|$9|1T|A|1U|B|C]]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|1V|8|@$9|1W|A|1X|B|C]]|D|@]|E|$]]|$1|10|3|-4|5|6|7|1Y|8|@]|D|@]|E|$]]]|11|$]]

I just found this question trying to confirm if the bitwise <code>AND</code> operator also was <code>&amp;</code> in Javascript.

Since you asked for an example:

<pre><code>if ($('input[id="user[privileges]"]').length &gt; 0) {
 $('#privileges button').each(function () {
 if (parseInt($('input[id="user[privileges]"]').val()) &amp; parseInt($(this).attr('value'))) {
 $(this).button('toggle');
 }
 });
}
</code></pre>

It populates the state of buttons with jQuery given a bitmask value of a hidden field:

<ul>
<li><code>none</code> = <code>0</code></li>
<li><code>user</code> = <code>1</code></li>
<li><code>administrator</code> = <code>2</code></li>
<li><code>user</code> + <code>administrator</code> = <code>3</code></li>
</ul>

blocks|key|3123893|text|当您使用十六进制值和位时，它们似乎非常有用。因为4位可以表示0到F。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3123894|1111+=F+1111+1111+=+FF。|3123895|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

They seem to be very useful when you work with hex values and bits. Since 4 bits can represent 0 to F.

1111 = F
1111 1111 = FF.

blocks|key|346978|text|%5E按位异或作为切换器|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|346979|value+%5E=+1将在每次调用value时更改为0,+1,+0,+1,+...，(它基本上类似于：boolVal+!=+boolVal)：|346980|​|346981|function+toggle(evt)+{
++const+EL+=+evt.currentTarget;
++EL.isOn+%5E=+1;+//+Bitwise+toggle
++EL.textContent+=+EL.isOn+?+"ON"+:+"OFF";+//+Unleash+your+ideas
}

document.querySelectorAll("button").forEach(+el+=>
++el.addEventListener("click",+toggle)
);|code-block|syntax|javascript|346982|<button>OFF</button>
<button>OFF</button>
<button>OFF</button>|346983|346984|entityMap^0|0|1|0|0|A|G|5|P|F|1E|I|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|15|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|16|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|17|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|18|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|S|$]]

<h2><code>^</code> bitwise XOR as toggler</h2>
<code>value ^= 1</code> will change on every call the <code>value</code> to <code>0, 1, 0, 1, ...</code> , (it's basically similar to: <code>boolVal != boolVal</code>):
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function toggle(evt) {
 const EL = evt.currentTarget;
 EL.isOn ^= 1; // Bitwise toggle
 EL.textContent = EL.isOn ? "ON" : "OFF"; // Unleash your ideas
}

document.querySelectorAll("button").forEach( el =&gt;
 el.addEventListener("click", toggle)
);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button&gt;OFF&lt;/button&gt;
&lt;button&gt;OFF&lt;/button&gt;
&lt;button&gt;OFF&lt;/button&gt;</code></pre>
</div>
</div>

blocks|key|345580|text|要判断一个数字是否为奇数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|345581|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|code-block|syntax|javascript|345582|比模数更快-在性能真正重要的地方使用！|345583|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

To tell if a number is odd:

<pre><code>function isOdd(number) {
 return !!(number &amp; 1);
}

isOdd(1); // true, 1 is odd
isOdd(2); // false, 2 is not odd
isOdd(357); // true, 357 is odd
</code></pre>

Faster than modulus - use where performance really counts!

blocks|key|345585|text|作为在Uint16Array中存储多维数组的一种方式，我使用它们将三个数字展平为1。这是我正在开发的一个体素游戏的片段：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|345586|​|345587|function+Chunk()+{
++this._blocks+=+new+Uint16Array(32768);
++this._networkUpdates+=+[];
}

Chunk.prototype.getBlock+=+function(x,+y,+z)+{
++return+this._blocks[y+%2B+(x+<<+5)+%2B+(z+<<+10)];
};

Chunk.prototype.setBlock+=+function(x,+y,+z,+value)+{
++this._blocks[y+%2B+(x+<<+5)+%2B+(z+<<+10)]+=+value;
++this._networkUpdates.push(value+%2B+(y+<<+15)+%2B+(x+<<+20)+%2B+(z+<<+25));
};

Chunk.prototype.getUpdates+=+function()+{
++return+this._networkUpdates;
};

Chunk.prototype.processUpdate+=+function(update)+{
++//+this._blocks[Math.floor(update+/+65536)]+=+update+%25+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]);|code-block|syntax|javascript|345588|345589|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint16Array^0|3|B|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Y|8|@]|9|@]|C|$I|J]]|$1|K|3|E|5|6|7|Z|8|@]|9|@]|C|$]]|$1|L|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|M|$N|$5|O|P|Q|C|$R|S]]]]

I'm using them to flatten three numbers into 1 as a way of storing multidimensional arrays in a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint16Array" rel="nofollow">Uint16Array</a>. Here is a snippet of a voxel game I'm developing:

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function Chunk() {
 this._blocks = new Uint16Array(32768);
 this._networkUpdates = [];
}

Chunk.prototype.getBlock = function(x, y, z) {
 return this._blocks[y + (x &lt;&lt; 5) + (z &lt;&lt; 10)];
};

Chunk.prototype.setBlock = function(x, y, z, value) {
 this._blocks[y + (x &lt;&lt; 5) + (z &lt;&lt; 10)] = value;
 this._networkUpdates.push(value + (y &lt;&lt; 15) + (x &lt;&lt; 20) + (z &lt;&lt; 25));
};

Chunk.prototype.getUpdates = function() {
 return this._networkUpdates;
};

Chunk.prototype.processUpdate = function(update) {
 // this._blocks[Math.floor(update / 65536)] = update % 65536;
 this._blocks[update &gt;&gt; 16] = update &amp; 65535;
};

var chunk = new Chunk();
chunk.setBlock(10, 5, 4);
alert(chunk.getBlock(10, 5, 4));
alert(chunk.getUpdates()[0]);</code></pre>
</div>
</div>

blocks|key|347008|text|使用Node.js的示例|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|347009|假设您有一个包含这些内容的文件(名为multiply.js)，您可以运行|347010|`node+multiply+<number>+<number>`|code-block|syntax|javascript|347011|并获得与在相同的两个数字上使用乘法运算符一致的输出。Mulitply函数中正在进行的位移位是一个例子，说明了如何获取表示一个数的位掩码，并使用它来翻转另一个数中的位，以实现快速操作。|CODE|347012|var+a,+b,+input+=+process.argv.slice(2);

var+printUsage+=+function()+{
++console.log('USAGE:');
++console.log('++node+multiply+<number>+<number>');
}

if(input[0]+===+'--help')+{%2B
++printUsage();
++process.exit(0);
}

if(input.length+!==+2)+{
++printUsage();
++process.exit(9);
}

if(isNaN(%2Binput[0])+%7C%7C+isNaN(%2Binput[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+%25+2+===+1)+{
++++++z+=+z+%2B+y;
++++}
++++y+=+y+<<+1;
++++x+=+x+>>+1;
++}

++return+z;
}

var+result+=+Multiply(a,b);

console.log(result);|347013|entityMap^0|A|2|0|0|10|0|0|0|2J|Q|8|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|O]]|D|@]|E|$]]|$1|P|3|Q|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|R|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|S|$]]

Example using Node.js

Presuming you had a file (called multiply.js) with these contents, you could run 

<pre><code>`node multiply &lt;number&gt; &lt;number&gt;`
</code></pre>

and get an output consistent with using the multiplication operator on the same two numbers. The bit shifting going on in the <code>Mulitply</code> function is an example of how to take the bit mask representing one number and use it to flip bits in another number for fast operations.

<pre><code>var a, b, input = process.argv.slice(2);

var printUsage = function() {
 console.log('USAGE:');
 console.log(' node multiply &lt;number&gt; &lt;number&gt;');
}

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 &gt; 0 ) {
 if(x % 2 === 1) {
 z = z + y;
 }
 y = y &lt;&lt; 1;
 x = x &gt;&gt; 1;
 }

 return z;
}

var result = Multiply(a,b);

console.log(result);
</code></pre>

blocks|key|3123968|text|var+arr+=+['abc',+'xyz']|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3123969|写得很烦|unstyled|3123970|if+(arr.indexOf('abc')+>+-1)+{
++//+'abc'+is+in+arr
}

if+(arr.indexOf('def')+===+-1)+{
++//+'def'+is+not+in+arr
}|3123971|来检查数组中是否有内容？|3123972|您可以像这样使用按位运算符~：|offset|length|style|CODE|3123973|if+(~arr.indexOf('abc'))+{
++//+'abc'+is+in+arr
}

if+(!+~arr.indexOf('def')) {
++//+'def'+is+not+in+arr
}|3123974|entityMap^0|0|0|0|0|D|1|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@$M|Z|N|10|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$B|C]]|$1|S|3|-4|5|F|7|12|8|@]|9|@]|A|$]]]|T|$]]

<pre><code>var arr = ['abc', 'xyz']
</code></pre>

Annoyed to write 

<pre><code>if (arr.indexOf('abc') &gt; -1) {
 // 'abc' is in arr
}

if (arr.indexOf('def') === -1) {
 // 'def' is not in arr
}
</code></pre>

to check if something is inside an array?

You can use the bitwise operator <code>~</code> like so:

<pre><code>if (~arr.indexOf('abc')) {
 // 'abc' is in arr
}

if (! ~arr.indexOf('def')) {
 // 'def' is not in arr
}
</code></pre>

blocks|key|345598|text|此答案包含对Mark's+answer的解释。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|345599|通过阅读这些解释并运行代码片段，可以获得一个想法。|345600|​|345601|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)+*/|code-block|syntax|javascript|345602|345603|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/654098^0|6|D|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|11|8|@]|9|@]|C|$K|L]]|$1|M|3|G|5|6|7|12|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]]]

This answer contains explanations of <a href="https://stackoverflow.com/a/654098">Mark's answer</a>.

By reading these explanations and running the code snippet an idea can be gained.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var hex = 'ffaadd';
var rgb = parseInt(hex, 16); // rgb value is 16755421 in decimal = 111111111010101011011101 in binary = total 24 bits


var red = (rgb &gt;&gt; 16) &amp; 0xFF; // returns 255
var green = (rgb &gt;&gt; 8) &amp; 0xFF; // returns 170
var blue = rgb &amp; 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 (&amp;) 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 -&gt; bits of rgb variable
// 000000000000000011111111 -&gt; 255 after (rgb &gt;&gt; 16) shifting operation
// 000000000000000011111111 -&gt; 255 complement (changes the first 16 bits and does nothing for the last 8 bits)
// 000000000000000011111111 -&gt; result bits after performing bitwise &amp; operation
console.log("Red - (rgb &gt;&gt; 16) &amp; 0xFF \t: ", (rgb &gt;&gt; 16) &amp; 0xFF) // used for to evaluate the first 8 bits

// 111111111010101011011101 -&gt; bits of rgb variable
// 000000001111111110101010 -&gt; 65450 -&gt; 'ffaa'
// 000000000000000011111111 -&gt; 255 complement (changes the first 16 bits and does nothing for the last 8 bits)
// 000000000000000010101010 -&gt; result bits after performing bitwise &amp; operation
// calculation -&gt; 000000001111111110101010 &amp; 000000000000000011111111 = 000000000000000010101010 = 170 in decimal = 'aa' in hex-decimal
console.log("Green - (rgb &gt;&gt; 8) &amp; 0xFF \t: ", (rgb &gt;&gt; 8) &amp; 0xFF) // used for to evaluate the middle 8 bits 

// 111111111010101011011101 -&gt; 'ffaadd'
// 000000000000000011111111 -&gt; 255 complement (changes the first 16 bits and does nothing for the last 8 bits)
// 000000000000000011011101 -&gt; result bits after performing bitwise &amp; operation 
// calculation -&gt; 111111111010101011011101 &amp; 000000000000000011111111 = 221 in decimal = 'dd' in hex-decimal
console.log("Blue - rgb &amp; 0xFF \t\t: ", rgb &amp; 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) */</code></pre>
</div>
</div>

I've read <a href="https://stackoverflow.com/questions/276706/what-are-bitwise-operators">'what are bitwise operators?'</a>, so I know what <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" rel="noreferrer">bitwise operators</a> are but I'm still not clear on how one might use them. Can anyone offer any real-world examples of where a bitwise operator would be useful in JavaScript?

Thanks.

<h2>Edit:</h2>

Just digging into the <a href="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" rel="noreferrer">jQuery source</a> I've found a couple of places where bitwise operators are used, for example: (only the &amp; operator)

<pre><code>// Line 2756:
event.which = (event.button &amp; 1 ? 1 : ( event.button &amp; 2 ? 3 : ( event.button &amp; 4 ? 2 : 0 ) ));

// Line 2101
var ret = a.compareDocumentPosition(b) &amp; 4 ? -1 : a === b ? 0 : 1;
</code></pre>

Where would I use a bitwise operator in JavaScript?

服务器

jQuery

我读过，所以我知道 是什么，但我仍然不清楚如何使用它们。有没有人能提供一些真实的例子，说明位运算符在JavaScript中的用处？谢谢。编辑：深入研究一下，我发现有几个地方使用了按位运算符，例如：(只有&运算符)// Line 2756:event.which = (event.button & 1 ? 1 : ( e...

问在JavaScript中，我应该在哪里使用按位运算符？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在JavaScript中，我应该在哪里使用按位运算符？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在JavaScript中，我应该在哪里使用按位运算符？
EN