您的位置：首页 > Web前端 > JavaScript

Javascript中的位运算符

2016-03-18 16:59 141 查看
本文章主要讲解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); //输出6
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航