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 相关文章推荐
js 表格隔行颜色
Dec 02 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
Dec 10 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
axios基本入门用法教程
Mar 25 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 Javascript
JavaScript对象原型链原理详解
Feb 05 Javascript
AutoJs实现刷宝短视频的思路详解
May 22 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 Javascript
React实现轮播效果
Aug 25 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
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
往光标所在位置插入值的js代码
2013/09/22 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
Python实现在线音乐播放器
2017/03/03 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
python中的字符串内部换行方法
2018/07/19 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
Django URL参数Template反向解析
2020/11/24 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
加拿大时装零售商:Influence U
2018/12/22 全球购物
岗位职责范本
2013/11/23 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
LeetCode189轮转数组python示例
2022/08/05 Python