注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

阿飘的博客

十里平湖霜满天 寸寸青丝愁华年

 
 
 

日志

 
 

JS中的按位运算符  

2015-07-07 17:53:53|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
  1. var color = 0xFF0000;
  2. var r = color >> 16;
大多数语言都提供了按位运算符,按位运算符在c,c++等语言中运用广泛,而在JS,AS等脚本语言中则没有太多的应用例子,有时候,适当的使用按位运算符会取得很好的效果。
下面根据自己的认知简单的谈一下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;

^运算服有个神奇的特性
如以下代码
<script>
var n1 = 3;
var n2 = 4;
n1 ^= n2;
n2 ^= n1;
n1 ^= n2;
</script>

这样你会发现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位那么就是红色值了

var color = 0xFF0000;
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
<script>
var color = 0xFF0000;
var r = color >> 16;
var g = color >> 8 & 0xFF;
 var b = color & 0xFF;
alert(r);
alert(g);
alert(b);
</script>
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;
<script>
var r = 255;
var g = 255;
var b = 255;
var color = r << 16 | g << 8 | b;
alert(color.toString(16))
</script>
提示:您可以先修改部分代码再运行
正确的输出了ffffff;
  评论这张
 
阅读(203)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017