js中的位运算

按位运算符是把操作数看作一系列单独的位,而不是一个数字值。所以在这之前,不得不提到什么是“位”:
数值或字符在内存内都是被存储为0和1的序列,每个0和1被称之为1个位,比如说10进制数据2在计算机内被存储为 0 0 0 0 0 0 1 0,当我们将内存内的位值改变之后,这个值代表的意义也就变了,比如把2前移动一位, 现在存储单元里面变成了0 0 0 0 0 1 0 0,这个值表示的是十进制的4,这也就是按位操作符的运算原理。

按位运算符有6个
& 按位与
|按位或
^按位异或
~取反
>>右移
<<左移

1 & 运算符
&是二元运算符,它以特定的方式的方式组合操作数中对应的位 如果对应的位都为1,那么结果就是1, 如果任意一个位是0 则结果就是0
1 & 3的结果为1
来看看它的怎么运行的:
1的二进制表示为 0 0 0 0 0 0 1
3的二进制表示为 0 0 0 0 0 1 1
根据 & 的规则 得到的结果为 0 0 0 0 0 0 0 1,十进制表示就是1

只要任何一位是0 &运算的结果就是 0,所以可以用&把某个变量不必要的位设为0, 比如某个变量的二进制表示为 0 1 0 0 1 0 0 1, 我想保留低4位,消除高4位 用 & 0x0F就可以了(住:0x0F为16进制表示法,对应的二进制为 0 0 0 0 1 1 1 1),这个特性有个很重要的应用,在后面会提到。

2 | 运算符
| 跟 & 的区别在于 如果对应的位中任一个操作数为1 那么结果就是1
1 | 3 的结果为3

3 ^ 运算符
^运算符跟 | 类似,但有一点不同的是 如果两个操作位都为1的话,结果产生0
0 1 0 0 0 0 0 1
0 1 0 1 1 0 1 0
产生 0 0 0 1 1 0 1 1

4 ~ 运算符
~是对位求反 1变0, 0变1

5 移位运算符移位运算符把位按指定的值向左或向右移动
<< 向左移动 而 >> 向右移动,超过的位将丢失,而空出的位则补0

如 0 1 0 0 0 0 0 0 0 0 0 0 0 1 1(十进制16387) 向左移动两位将变成
0 0 0 0 0 0 0 0 0 0 0 1 1 0 0 (十进制12)
向右移动两位则是
0 0 0 1 0 0 0 0 0 0 0 0 0 0 0(十进制4096)

下面介绍一些具体的应用
前面提到2向前移动1位变成4 利用这个特性可以做乘法运算
2 << 1 =4
3 << 1 = 6
4 << 1 = 8
同理 >> 则可以做除法运算

任何小数 把它 >> 0可以取整
如3.14159 >> 0 = 3;

^运算服有个神奇的特性
如以下代码

运行代码 复制代码 另存代码  提示:您可以先修改部分代码再运行

这样你会发现n1 = 4, n2=3,n1,n2在不使用任何中间变量的情况下交换了值,所有的整数都适用这种情况

颜色的处理
我们知道一组16进制值可以表示一种rgb颜色
比如0xFF0000,其中 r=ff, g = 00, b = 00,3色组合就变成了红色
我们可以从颜色值提取出来红色,黄色,蓝色,或者把3色组合成一个rgb颜色
这在颜色的缓动中用处非常大

首先 color 0xFF0000 的二进制表示为        1111  1111  0000  0000  0000  0000 
高8位是红色值,低8位是绿色值,中间的就是蓝色值了
很明显的,把color 右移16位那么就是红色值了

  1. var color = 0xFF0000;
  2. var r = color >> 16;

复制代码

绿色值(就是中8位)怎么获取呢
首先把color 右移动8位
变成了0000 0000 1111 1111 0000 0000,现在绿色值为低8位,我们只要把8位以前的位变成0那么就得到了绿色值,前面提到的 &运算符,如果任何一位为0 那么结果就是0
所以我们把值 & 0000 0000 0000 0000 1111 1111就得到了绿色值,那么
var g = color >> 8 & 0xFF 即可得到了绿色值
蓝色值用同样的方法
var b = color & 0xFF

运行代码 复制代码 另存代码  提示:您可以先修改部分代码再运行

0xFF0000的红色值应该是255,绿色与蓝色为0

如果是3种值如何组合成一个rgb颜色呢
r = 0000 0000 0000 0000 1111 1111(255)
g = 0000 0000 0000 0000 1111 1111(255)
b = 0000 0000 0000 0000 0000 0000(0)
首先 把g 左移8位
变成了0000 0000 1111 1111 0000 0000
然后与b进行 | 操作
|操作是如果对应的位中任一个操作数为1 那么结果就是1
那么变成了 0000 0000 1111 1111 0000 0000
同样的方法把r右移16位 再与刚才的值 | 操作 则组成了一个完整的rgb颜色(不包含透明度)

下面做个验证
我们知道当r=255, g = 255, b = 255 的时候,组成的颜色是白色,即0xFFFFFF;

运行代码 复制代码 另存代码  提示:您可以先修改部分代码再运行

正确的输出了ffffff;

时间: 2024-10-29 19:10:59

js中的位运算的相关文章

深入研究js中的位运算及用法

什么是位运算? 位运算是在数字底层(即表示数字的 32 个数位)进行运算的.由于位运算是低级的运算操作,所以速度往往也是最快的(相对其它运算如加减乘除来说),并且借助位运算有时我们还能实现更简单的程序逻辑,缺点是很不直观,许多场合不能够使用. 位运算只对整数起作用,如果一个运算子不是整数,会自动转为整数后再运行.虽然在 JavaScript 内部,数值都是以64位浮点数的形式储存,但是做位运算的时候,是以32位带符号的整数进行运算的,并且返回值也是一个32位带符号的整数. 关于二进制 ==以下来

js中神奇的运算

先看一段比较神奇的运算和他的结果: {}+[] //0 []+{} //"[object Object]" {}+[] == []+{} //false ({}+[]) == []+{} //true 运算结果不一样,很神奇啊... 我们来看一下js中对Object和Array直接执行运算时会发生什么.由于数组不是一个基本类型,所以在运算过程中,js会尝试将array或object转化成一个基本类型. 在这个转化中,首先会对Array执行一个valueOf函数,如果返回时是基本类型,那

C#位运算示例和enum中的位运算

今天在项目中遇到按位或组合权限串的问题: 首先每一个权限数都是2的N次方数 如:k1=2 ; //添加 k2=4 ; //删除 k3=8; //修改 ... 如此定义功能权限数,当需要组合权限时,就需要对各个所拥有的权限数按位或了. 如: purview = k2|k3; // 赋给添加和删除权限 当需要判断在权限串中是否拥有某一权限时,就需要进行按位与. 如: if((purview & k1) >0)//判断此权限串是否拥有添加权限,结果>0 则进入if语句代码块中 { ....

关于c语言中的位运算。。。

位运算是一种针对二进制数的一种运算 位运算 共有六种 都有其对应得操作符号 &      (and)      位于 |        (or)         位或 ~      (not)        取反 ^       (xor)        异或 >>    (shr)    右移一位 <<    (shl)     左移一位 运算说明: === 1. and运算 === and运算通常用于二进制取位操作,例如一个数 and 1的结果就是取二进制的最末位.这可

枚举中的位运算

为什么枚举中位运算都可以使用并运算? 1.  什么是枚举中的位运算? 例如 int a = 1 << 0; //1左移0位    1*2^0 = 1; int b = 1 << 1; //1左移1位   1*2^1 = 2; int c = 1 << 2; //1左移2位   1*2^2 = 4; int d = 1 << 3; //1左移3位   1*2^3 = 8; 并运算 a | b 01 10 -------------- 11 ==1+2 int

js中的浮点数运算精度问题

js中的浮点数精度一般可以达到16位有效数字,因此有人使用parseFloat(x.toFixed(12))来提高js中浮点运算的精度. 经验证,这种方法当整数位数较少时基本正确,但对于较大或较小的运算结果是无效的,如1222.31*2344,直接运算结果是2865094.6399999997,parseFloat((1222.31*2344).toFixed(12))后仍然是2865094.6399999997,并未提升精度. 此时,应该先将结果归一化后再进行toFixed(12)这样的处理,

JS中的MOD运算

最近研究汉诺塔非递归的时候,看到书上写了个MOD,久违啊,感觉好久没看到过了,都忘了怎么用了. 某人:我知道,这不就是取余嘛,直接%就行了. 嗯......,如果是python语言,你说的很对,但是我要的是JS中的.搜了下,貌似JS中没有MOD方法.便于学习的使用,自己写了个. 废话不多说,直接上代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>MO

java中的位运算

刚才在imooc看php基础发现一个特别容易让我们理解的描述[关于异或运算的] 之前学习java的时候 位运算有4种,当时是这样记录的: &  按位与 (and) 两个对应二进制都为1则为1,其余全为0 |   按位或(or) 两个二进制数有一个为1则为1,只有两个0才为0 ~  按位非(NOT) 二进制中取反 ^  按位异或(XOR) 两个二进制中相同为则为0,不同则为1             其实最难以理解的就是这个异或运算. 直接搬过来(原网址点我): 我们可以从投票的角度来理解逻辑运算

C/C++中的位运算

位运算     位运算的运算分量只能是整型或字符型数据,位运算把运算对象看作是由二进位组成的位串信息,按位完成指定的运算,得到位串信息的结果. 位运算符有:     &(按位与).|(按位或).^(按位异或).~ (按位取反). 其中,按位取反运算符是单目运算符,其余均为双目运算符.     位运算符的优先级从高到低,依次为~.&.^.|, 其中~的结合方向自右至左,且优先级高于算术运算符,其余运算符的结合方向都是自左至右,且优先级低于关系运算符.    (1)按位与运算符(&)