Javascript中的 “&” 和 “|” 详解


Posted in Javascript onFebruary 02, 2017

一、前言:

在文章开始之前,先出几个题目给大家看看:

var num1 = 1 & 0;
console.log(num1); // 0
var num2 = 'string' & 1;
console.log(num2); // 0
var num3 = true & 1;
console.log(num3); // 1 
var num4 = undefined | false;
console.log(num4); // 0 
var num5 = undefined | true;
console.log(num5); // 1 
var num6 = 23 & 5;
console.log(num6); // 5
var num7 = 23 | 5;
console.log(num7); // 23

上面的题目大家都做对了吗?我们之前有总结过 《浅谈javascript中的 “ && ” 和 “ || ” 》,"&&” 和 “||” 是逻辑运算表达式中的操作符。那么一个 “&” 或者一个 “|” 又代表什么含义呢?有什么特性呢?接下来,我们就来一一揭秘。

首先,我们得清楚 “&” 和 “|” 是位运算操作符。

位运算符用于在最基本的层次上,即按内存中表示数值的位来操作数值。ECMAScript中的所有数值都以IEEE-754 64位格式存储,但位操作符并不直接操作64位的值。而是先将64位的值转换成32位的整数,然后执行操作,最后再将结果转换为64位。对于开发人员来说,由于64位存储格式是透明的,因此整个过程就像是只存在32位的整数一样。

对于有符号的整数,32位中的前31位用于表示整数的值。第32位表示数值的符号:0表示正数,1表示负数。这个表示符号的位叫做符号位,符号位的值决定了其他位数值的格式。其中,正数以纯二进制格式存储,31位中的每一位都表示2的幂。第一位(叫做位0)表示20,第二位表示21,以此类推。没有用到的位以0表示,即忽略不计。例如,数值18的二进制表示是0000 0000 0000 0000 0000 0000 0001 0010,或者更简洁的10010。这是5个有效位,这5位本身就决定了实际的值。

负数同样以二进制码存储,但使用的格式是二进制补码。计算一个数值的二进制补码,需要经过下列3个步骤:

(1)求这个数值绝对值的二进制码(例如,要求-18的二进制补码,先求18的二进制码);

(2)求二进制反码,即将0替换为1,将1替换为0;

(3)得到的二进制反码加1。

这样,求得了-18的二进制表示,即1111 1111 1111 1111 1111 1111 1110 1110。

......在ECMAScript中,当对数值应用位操作符时,后台会发生如下转换过程:64位的数值被转换成32位数值,然后执行位操作,最后再将32位的结果转换回64位数值。这样,表面上看起来就好像是在操作32位数值,就跟在其他语言中以类似方式执行二进制操作一样。但这个转换过程也导致了一个严重的副效应,即在对特殊的NaN和Infinity值应用位操作时,这两个值都会被当成0来处理。

如果对非数值应用位操作符,会先使用Number()函数将该值转换为一个数值(自动完成),然后再应用位操作。得到的结果将是一个数值。 ......(截取自《Javascript高级程序设计》)

二、“&”(按位与AND):

按位与操作符由一个和号字符(&)表示,它有两个操作符数。从本质上来讲,按位与操作就是将两个数值的每一位对齐,对相同位置上的两个数执行AND操作。

按位与AND操作规则:只有两个数值的对应位都是1时才返回1,任何一位是0,结果都是0。

前面已经把理论性的东西说的太多了,但是我觉得理论又很有必要。接下来,直接分析例子吧!

我们先看上面题目中的 num1,num2,num3以及num6。我们尝试结合上面的理论来分析为什么会输出最终的结果。

// num1是1和0进行“按位与”操作后的返回值。1的二进制码简写为1,0的二进制码简写为0,根据上面的规则,第二个操作符数为0,结果是0
var num1 = 1 & 0;
console.log(num1); // 0 
// 第一个操作符数是字符串,按照前言里面的理论,对于非数值的操作符数,先使用Number()函数处理,结果返回NaN,NaN又会被当成0来处理。所以最终结果也是0
var num2 = 'string' & 1;
console.log(num2); // 0
// true是布尔类型值,同样使用Number()函数处理,处理后得到数值1,于是表达式就相当于“1 & 1” 进行位运算,当两个数值都为1的时候,结果返回1
var num3 = true & 1;
console.log(num3); // 1
// 23的二进制码是:...10111,5的二进制码是:...00101。然后每一位进行对齐处理,结合上面的规则,可以得出10111&00101的结果是:00101。00101就是5
var num6 = 23 & 5;
console.log(num6); // 5 
// 再加个例子:24的二进制码为...11000,7的二进制码为...00111,相同位置的两个数执行AND操作,结果发现结果是...00000。所以最终结果是0,你算对了吗?
var add1 = 24 & 7;
console.log(add1); // 0

三、“|”(按位或OR):

按位或操作符由一个竖线符号(|)表示,同样有两个操作符数。从本质上来讲,按位或操作也是将两个数值的每一位对齐,对相同位置上的两个数执行OR操作。

按位或OR操作规则:只要两个数值的对应位有一个是1就返回1,而只有在两个位都是0的情况下才返回0。

我们接最上面的例子来看吧!

// 第一个操作符数为undefined,第二个操作符数是false,均不是数值,所以都要先使用Number()函数处理,处理结果都是返回NaN,NaN又会被当成0处理,于是最终结果是0
var num4 = undefined | false;
console.log(num4); // 0
// 第一个操作符数相当于0,第二个操作符数相当于1,结合按位或的规则,最终结果是1
var num5 = undefined | true;
console.log(num5); // 1
// 23的二进制码是:...10111,5的二进制码是:...00101。然后每一位进行对齐处理,结合上面的规则,可以得出10111|00101的结果是:10111。10111就是23
var num7 = 23 | 5;
console.log(num7); // 23
// 再加个例子:24的二进制码为...11000,7的二进制码为...00111,相同位置的两个数执行AND操作,结果发现结果是...11111。所以最终结果是31,你算对了吗?
var add2 = 24 | 7;
console.log(add2); // 31

四、其他:

相信也会有一些朋友不知道怎么把数值转换成标准的二进制码,那么有没有快速的方法呢?答案是肯定的。

我的网上随机找到了一个在线转换工具地址:数值进制转换(点我查看)。(当然,你也可以使用你找到的别的工具,不管怎样,能实现效果就是我们的最终目的)

最后,再附上我通过手写转换二进制过程中总结的规律图,依然可以快速将数值转换成二进制码,逼格满满哒!

Javascript中的 “&” 和 “|” 详解

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
对联广告js flash激活
Oct 19 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
JS获取一个未知DIV高度的方法
Aug 09 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
javascript 实现动态侧边栏实例详解
Nov 11 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
微信小程序网络请求的封装与填坑之路
Apr 01 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
详解Angular6 热加载配置方案
Aug 18 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
javascript实现简易计算器
Feb 01 #Javascript
javascript实现右下角广告框效果
Feb 01 #Javascript
基于javascript实现最简单选项卡切换
Feb 01 #Javascript
快速实现jQuery多级菜单效果
Feb 01 #Javascript
angular实现商品筛选功能
Feb 01 #Javascript
Bootstarp基本模版学习教程
Feb 01 #Javascript
angular实现表单验证及提交功能
Feb 01 #Javascript
You might like
php AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
在Yii2特定页面如何禁用调试工具栏Debug Toolbar详解
2017/08/07 PHP
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
jquery动态添加option示例
2013/12/30 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
node内置调试方法总结
2018/02/22 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
Python函数式编程指南(二):从函数开始
2015/06/24 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
python是否适合网页编程详解
2019/10/04 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
联强国际笔试题面试题
2013/07/10 面试题
创意广告词
2014/03/17 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
初中班主任评语
2014/04/24 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
病人慰问信范文
2015/02/15 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫
室外天线与收音机天线杆接合方法
2022/04/05 无线电