Javascript中的位运算符

2016-03-18 本文已影响486人 jicemoon

本文章主要讲解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>

Javascript中的位运算符

AND运算符'&' -- 按位与

OR运算符'|' -- 按位或

取反运算符'~'

异或运算符'^' -- 按位异或

右移运算符'>>'

左移运算符 '<<'

猜你喜欢

热点阅读