本文章主要讲解JS中位运算符的基本说明和常见用法
位运算符用于32位的数字上, 任何的数字操作都将转为32位, 运算结果再转化为JS数字
js包括以下位运算符
- '&': AND运算符
- '|': OR运算符
- '~': 取反
- '^': 异或
- '<<': 左移
- '>>': 右移
下面一一介绍
AND运算符'&' -- 按位与
按位与运算符"&"是双目运算符。 其功能是将参与运算的两数转成32位二进制后, 各对应的二进位相与。只有对应的两个二进位均为1时，结果位才为1 ，否则为0。
例如:
console.log(6&2); //输出2
console.log(10&5); //输出0
说明(下述文字中的二进制, 前面(28位)均为0, 所以省略了)
- 6的二进制位0110, 2的二进制位0010, 结果就是0010, 转成十进制也就是2
- 10的二进制位为1010, 5的二进制位0101, 所以结果为0000, 也就是0
这个运算符, 我一般用它来获取RGB颜色值中的蓝色, 例如:
var rgbStr = "#6abc3a";
//将字符串转成十进制整数
var rgb = parseInt(rgbStr.replace(/^\s*#|\s*$/g, ""), 16);
//获取颜色值中的蓝色
var b = rgb&0xff;
//输出蓝色值得16进制字符串
console.log(b.toString(16));//输出: 3a
OR运算符'|' -- 按位或
按位或运算符“|”是双目运算符。 其功能是将参与运算的两数转成32位二进制后, 各对应的二进位相或。只要对应的二个二进位有一个为1时，结果位就为1。
例如:
console.log(6 | 2); //输出6
console.log(10 | 5); //输出15
说明(下述文字中的二进制, 前面(28位)均为0, 所以省略了)
- 6的二进制位0110, 2的二进制位0010, 结果就是0110, 转成十进制也就是6
- 10的二进制位为1010, 5的二进制位0101, 所以结果为1111, 也就是15
这个运算符可以用来对数值进行取证, 用起来应该比Math.floor和Math.ceil方便, 实例如下
console.log(10.5 | 0);
console.log(10.3 | 0);
console.log(10.8 | 0);
以上的输出结果都是10
注意: 无论正数还是负数, 此方法只是删除数字的小数部分, 所以
- 对正数, 其运行的结果和Math.floor是一样的;
- 对负数, 其运行结果和Math.ceil是一样的
下面是个例子
console.log(8.35 | 0); //输出: 8
console.log(Math.floor(8.35)); //输出: 8
console.log(Math.ceil(8.35)); //输出: 9
console.log(-8.35 | 0); //输出: -8
console.log(Math.floor(-8.35)); //输出: -9
console.log(Math.ceil(-8.35)); //输出: -8
取反运算符'~'
取反运算符为单目运算符，具有右结合性。 其功能是对参与运算的数的各二进位按位取反
下面也举一个例子
console.log(~2); //输出-3
console.log(~5); //输出-6
这里解说有点麻烦, 需要将所有的32位都列出来, 所以就不加说明了
注: 到目前为止, 我没有在编程里面用到此运算符
异或运算符'^' -- 按位异或
按位异或运算符“^”是双目运算符。 其功能是参与运算的两数各对应的二进位相异或，当两对应的二进位相异(即对应位数值不相同, 也就是其中一个为1,另一个为0)时，结果为1。
例如
console.log(6 ^ 2); //输出4
console.log(10 ^ 5); //输出15
说明(下述文字中的二进制, 前面(28位)均为0, 所以省略了)
- 6的二进制位0110, 2的二进制位0010, 结果就是0100, 转成十进制也就是4
- 10的二进制位为1010, 5的二进制位0101, 所以结果为1111, 也就是15
此运算符可以用来交换两个整型变量的值(不定义中间变量)
如
var a = 125, b = 10;
a = a ^ b;
b = a ^ b;
a = a ^ b;
console.log("a = "+ a + ", b = " + b);
//输出: a = 10, b = 125
另外也可以判断两个整数是否相等, 如下
a ^ b == 0; //如果a,b相等, 为true, 否则为false
右移运算符'>>'
右移运算符“>>”是双目运算符, 其功能是把“>>”左边的运算数的各二进位全部右移若干位(不足位补0)，“>>”右边的数指定移动的位数。
右移n位的结果相当于整除2的n次方后的值
例如
console.log(6>>2); //输出: 1
console.log(10>>2); //输出: 2
说明(下述文字中的二进制, 前面(28位)均为0, 所以省略了)
- 6的二进制位0110, 向右移两位, 结果就是0001, 转成十进制也就是1
- 10的二进制位为1010, 向右移两位, 所以结果为0010, 也就是2
说明一下
m >> n, 相当于m / (2^n)[ 这里的^不是异或运算符, 而是2的n次方 ], 转成js表达式就是Math.floor(m / Math.pow(2, n));
console.log(100>>4); //输出: 6
console.log(Math.floor(100 / Math.pow(2,4))); //输出: 6
console.log(120>>3); //输出: 15
console.log(Math.floor(120 / Math.pow(2,3))); //输出: 15
目前我主要用于RGB颜色值中R(红色)的分离, 并配合按位与'&'运算符, 可以分离出G(绿色)
完整分离RGB颜色的代码如下
var rgbStr = "#6abc3a";
//将字符串转成十进制整数
var rgb = parseInt(rgbStr.replace(/^\s*#|\s*$/g, ""), 16);
//获取颜色值中的蓝色
var b = rgb&0xff;
var g = rgb>>8&0xff;
var r = rgb>>16;
//输出RGB/R/G/G色值的16进制字符串
console.log("rgb = " + rgb.toString(16));//输出: 6abc3a
console.log("r = " + r.toString(16));//输出: 6a
console.log("g = " + g.toString(16));//输出: bc
console.log("b = " + b.toString(16));//输出: 3a
//下面可以分别对R/G/B值进行计算, 如下(将颜色值变亮)
r = Math.min(r*1.3, 255);
g = Math.min(g*1.3, 255);
b = Math.min(b*1.3, 255);
//最后在将各个分量组合(要用到左移运算符)在一起, 就可以应用了
也可以用来对数值取整, 方法/结果和'|'是一样的
左移运算符 '<<'
左移运算符“<<”是双目运算符。左移n位就是乘以2的n次方。 其功能把“<<”左边的运算数的各二进位全部左移若干位，由“<<”右边的数指定移动的位数，高位丢弃，低位补0
例如
console.log(6<<2); //相当于6*(2*2), 输出: 24
console.log(10<<3); //相当于10*(2*2*2), 输出: 80
我常用于颜色分量的合成, 接着上述右移运算符的颜色例子
var newRGB = (r<<16)+(r<<8)+(g)
//或者可以用按位或 '|'
//var newRGB = (r<<16)|(r<<8)|(g)
下面是一个颜色值的完整例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container{ width: 250px;text-align: center; margin: 0 auto;}
#rect{ width: 120px; height: 65px; background-color: #68a28b; margin: 10px auto;}
button{margin-right: 20px;}
</style>
</head>
<body>
<div class="container">
<div id="rect"></div>
<button id="light">加亮</button>
<button id="reset">重置</button>
<button id="dark">变暗</button>
</div>
<script>
var rect = document.getElementById("rect");
var light = document.getElementById("light");
var reset = document.getElementById("reset");
var dark = document.getElementById("dark");
var initColor = "#68a28b";
var newColor = initColor;
light.addEventListener("click", function (){
ld(1.1, Math.min, 255);
});
dark.addEventListener("click", function (){
ld(0.9, Math.max, 0);
});
reset.addEventListener("click", function (){
newColor = initColor;
rect.style.backgroundColor = newColor;
});
function ld(factor, func, mom){
var obj = fl(newColor);
console.log(obj);
obj.r = func(obj.r*factor, mom)|0;
obj.g = func(obj.g*factor,mom)|0;
obj.b = func(obj.b*factor, mom)|0;
console.log(obj);
newColor = "#" + hc(obj).toString(16);
rect.style.backgroundColor = newColor;
}
//分离R/G/B
function fl(rgb){
if(rgb.constructor == String)
rgb = parseInt(rgb.replace(/^\s*#|\s*$/g, ""), 16);
var obj = {};
obj.r = rgb>>16;
obj.g = rgb>>8&0xff;
obj.b = rgb&0xff;
return obj;
}
//合并RGB
function hc(obj){
return (obj.r<<16)|(obj.g<<8)|(obj.b);
}
</script>
</body>
</html>
