javascript —— 位操作符应用

位运算:

位运算符包括:　与（&）、非（~）、或（|）、异或（^）

&：当两边操作数的位同时为1时，结果为1，否则为0。如1100&1010=1000 　　

| ：当两边操作数的位有一边为1时，结果为1，否则为0。如1100|1010=1110 　　

~：0变1,1变0 　　

^：两边的位不同时，结果为1，否则为0.如1100^1010=0110

 

位移动运算符:

<<表示左移, 左移一位表示原来的值乘2.

例如：3 <<2(3为int型)
1）把3转换为二进制数字0000 0000 0000 0000 0000 0000 0000 0011，
2）把该数字高位(左侧)的两个零移出，其他的数字都朝左平移2位，
3）在低位(右侧)的两个空位补零。则得到的最终结果是0000 0000 0000 0000 0000 0000 0000 1100，
转换为十进制是12。

同理,>>表示右移. 右移一位表示除2.

 

位操作符（bitwise operators）

我们大多数人都知道在JS中存在一些位操作符。每个数值都拥有二进制的表现形式，而这些位操作符就可以用在二进制数值的计算上。检查整型数值的二进制值，我们可以传基本参数“2”给toString()方法：

var number = 5;
var result = number.toString(2);
// In case we want to change the number directly, not
// a variable with a number value, we need to use two
// dots - it's equivalent of 14.0.toString where we can
// show that decimal part of the number is equal to 0. 
//如果我们想要直接转换数值（并非是数值变量），我们需要两个‘.’-这相当于14.0.toString，数值的小数部分等于0
var result2 = 13..toString(2); 

document.getElementById('result').innerHTML = result + ', ' + result2;
Result: 101, 1101

还有一些不同的操作符。假设，我们有一个变量a 等于5，b等于13，下面是示例：（注：十进制在进行位操作隐式转换为二进制，以下示例是以变量的二进制来进行说明的）

http://www.gbtags.com/gb/debug/96aa31cd-7aeb-49f2-9bbc-7a31310b89cf.htm

代码如下：

Result: 
<p>a | b = <span id="or"></span></p>
<p>a & b = <span id="and"></span></p>
<p>a ^ b = <span id="xor"></span></p>
<p>~ a = <span id="not"></span></p>
<p>a >> b = <span id="rs"></span></p>
<p>a << b = <span id="ls"></span></p>
<p>a >>> b = <span id="zfrs"></span></p>

// helper function for displaing results
var output = function(operator, result) {
    document.getElementById(operator).innerHTML = result;
};

// variables
var a = 5;
var b = 13;

// a | b - OR 
// if in any of the given numbers corresponding bit 
// is '1', then the result is '1'

output('or', a|b); // 13

// a & b - AND
// if in both of the given numbers corresponding bit 
// is '1', then the result is '1'

output('and', a&b); // 5 

// a ^ b - XOR
// if in one of the given numbers (not both) 
// corresponding bit is '1', then the result is '1'
output('xor', a^b); // 8

// ~a - NOT
// inverts all the bits
output('not', ~a); // -6

// a >> b - RIGHT SHIFT
// shift binary representation of 'a' for 'b' 
// bits to the right, discarding bits shifted off
output('rs', a>>b); // 0

// a << b - LEFT SHIFT
// shift binary representation of 'a' for 'b' 
// bits to the right, shifting in zeros from the right
output('ls', a<<b); // 40960

// a >>> b - ZERO FILLED RIGHT SHIFT
// shift binary representation of 'a' for 'b' 
// bits to the right, discarding bits shifted off, 
// and shifting in zeros from the left.
output('zfrs', a>>>b); // 0

 

有时候我们可以用位运算符“|”来代替Math.floor(),Math.floor()可以获得一个数的整数部分,而不是四舍五入.

var data = 2.2352524535;
var result = data | 0;

document.getElementById('result').innerHTML = result;
Result: 2

 在真实的场景中，我们可以如何运用位操作符呢？ 举个例子，我们可以转换RGB颜色值为十六进制的形式：

// helper function for displaing results
var output = function(operator, result) {
    document.getElementById(operator).innerHTML = result;
}

// variables
var color = {r: 186, g: 218, b: 85};

// RGB to HEX
var rgb2hex = function(r, g, b) {
    return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).substr(1);
}

output('color', rgb2hex(color.r, color.g, color.b));

 我们可以找出两个数中的最大值或最小值

// helper function for displaing results
var output = function(operator, result) {
    document.getElementById(operator).innerHTML = result;
}

// variables
var a = 9285;
var b = 3569;

// a ^ ((a ^ b) & -(a < b)) - which one, a or b, is bigger?
output('max', a ^ ((a ^ b) & -(a < b)));

// b ^ ((a ^ b) & -(a < b)) - which one, a or b, is smaller?
output('min', b ^ ((a ^ b) & -(a < b)));

 由于现在js的math库优化得足够好了，用这些hack在执行效率上没有任何意义。

 

再来看看两个变量交换。普通的解决方案是创建一个临时变量来达到目的，但这真的没有效率！采用位运算更简单：

// helper function for displaing results
var output = function(operator, result) {
    document.getElementById(operator).innerHTML = result;
}

// variables
var a = 10;
var b = 99;

// a^=b, b^=a, a^=b - swap variables using XOR operation, 
// details: http://en.wikipedia.org/wiki/XOR_swap_algorithm
a^=b, b^=a, a^=b;
output('a', a);
output('b', b);

 即使在javascript1.7中引入了'Pythonish'变量交换方式，但位运算依旧是最快的.

学习位运算更多技巧打造js app的好地方：Sean Eron Anderson's site [Stanford PhD].

 

附js技巧：

使用'!!'代替'? true : false'更为简洁.