JavaScript按位运算符的应用简析


Posted in Javascript onFebruary 04, 2014

大多数语言都提供了按位运算符,按位运算符在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>
Javascript 相关文章推荐
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
javascript中onclick(this)用法介绍
Apr 19 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
JavaScript模拟push
Mar 06 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
Angular4 ElementRef的应用
Feb 26 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
js中int和string数据类型互相转化实例
Jan 16 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
ES6的循环与可迭代对象示例详解
Jan 31 Javascript
Javascript 按位取反运算符 (~)
Feb 04 #Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 #Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 #Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 #Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 #Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 #Javascript
jquery中get和post的简单实例
Feb 04 #Javascript
You might like
如何使用Strace调试工具
2013/06/03 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
PHP实现添加购物车功能
2017/03/06 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
网页中CDATA标记的说明
2010/09/12 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
python回调函数中使用多线程的方法
2017/12/25 Python
python模块之paramiko实例代码
2018/01/31 Python
Python中创建二维数组
2018/10/17 Python
python实现汽车管理系统
2018/11/30 Python
django 消息框架 message使用详解
2019/07/22 Python
Python将string转换到float的实例方法
2019/07/29 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
基于Python fminunc 的替代方法
2020/02/29 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
Java和Javasciprt的区别
2012/09/02 面试题
银行开业庆典方案
2014/02/06 职场文书
私人委托书格式
2014/09/10 职场文书
房屋质量投诉书
2015/07/02 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python
Python实现照片卡通化
2021/12/06 Python