搜索
首页web前端js教程JavaScript 位运算符
JavaScript 位运算符Nov 22, 2016 pm 02:03 PM
javascript

JavaScript 的位运算符一共有7个,分别是&、|、^、~、<<、>>、>>>(C#没有这个运算符,但是C#可以通过>>的逻辑右移来实现此运算),位运算的操作都是通过二进制进行的。

按位与运算符(&)

当两个数相同位都为1时返回1,否则返回0,例如1&2=0,1的二进制表示为0001,2的二进制表示为0010,二者的运算则返回0000。

按位或运算符(|)

当两个数相同位数字不同的时候返回1,否则返回0,例如1|2=3。

按位异或运算符(^)

当两个数相同位仅有一个为1的时候返回1,否则返回0,例如1^2=3。

按位非运算符(~)

~是一个一元运算符,它将所有位数取反。这里首先必须要说下负数的存储,负数是以其正数的二进制补码进行存储的,所以我们在进行负数的运算时,必须要正确的获取其二进制编码,也就是其正数的二进制补码。补码是取反然后加1来实现,下面看例子:

先计算3的反码:3的二进制形式为00000011,其反码为11111100,其补码为11111101,所以-3的二进制编码为11111101,那么我们要求~-3,就是取其反码,为00000010,这就是-3的反码,将其转化为十进制为2。

多试几个就会发现,其实一个数的反码就是其十进制的相反数减去1。

左移运算符(<<)

左移运算符就是将数的所有位集体左移,第一位变成第二位,第二位变成第三位。。。空出的新位用0补充。比如1<<2=4,-1<<2=-4。1的二进制表示为0000 0001,那么将其向左移动两位变成了0000 0100,转换为十进制就为4,-1的二进制表示为1111 1111,将其向左移动两位,得到1111 1100,1开头的为负数,将其转化为十进制则需要倒着执行一次补码的计算,就是先减去1,得到1111 1011,然后取反,得到0000 0100,转化为十进制加负号得到4。这里需要注意下二进制的减法运算法则:1-1=0-0=0,1-0=1,0-1=1(向高位借)。

这里我们可以发现左移运算就是将其十进制数乘以2的位数次方。

带符号的右移运算符(>>)

既然左移是乘以2,那么右移肯定应该是除以2了,事实上就是这样子的,如果数字本身为正数,则在高位补0,如果为负数则在高位补1。例如3>>1=1,-3>>1=-2。3的二进制编码表示为0000 0011,将其向右移动1位,得到0000 0001,转换为十进制就是1,-3的二进制编码为1111 1101,将其向右移动1位得到1111 1110,这是一个负数,负数转化为十进制,先减一得到1111 1101,取反为0000 0010,得到-2。

带符号的右移运算就是将其十进制数除以2的位数次方,并舍弃余数。

无符号的右移运算符(>>>)

正数的无符号右移运算结果跟带符号的右移运算是一样的,主要是负数的无符号右移运算。它跟带符号的右移的区别就在于,不管是正数还是负数,高位都以0补充,所以对正数来说带符号和无符号的运算都是一样的,而对于负数来说则是天壤之别。例如:-1>>>1=2147483647,数字很恐怖是吧,看看计算过程:-1的二进制编码为1111 1111 1111 1111 1111 1111 1111 1111,将其右移1位,并补0,得到0111 1111 1111 1111 1111 1111 1111 1111,第一位为0,是正数,将其转化为十进制就是230+229+……+20=230(1-1/231)/(1-1/2)=231-1=2147483647,这样最终得到了我们需要的结果,结果很恐怖,慎用!

位运算符的应用:

谈了这么久,最终的目的还是为了去用这些运算符,看些例子:

颜色的RGB值和十六进制的转换:例如一个颜色值:#33cc10,前两位代表红色(R),中间两位代表绿色(G),后两位代表蓝色(B),将其转化为二进制编码为:0011 0011 1100 1100 0001 0000(赋给color),首先我们要获取红色值,需要将其右移16位,color>>16,也就是0000 0000 0000 0000 0011 0011,这样子我们获取到R=51,那么我们要获取绿色值就需要将其先右移8位,color>>8,得到0000 0000 0011 0011 1100 1100,然后将前八位变为0,0000 0000 0011 0011 1100 1100|0000 0000 0000 0000 1111 1111,得到0000 0000 0000 0000 1100 1100,这样子我们得到G=204,最后取蓝色值,就是简单的将其前八位变为0,color | 0000 0000 0000 0000 0001 0000,我们得到B=16,#33cc10转化为RGB值就是(51,204,16)。反过来RGB转化为十六进制正好是反过来的方法,就是G << 16 | G << 8 | B,这里就不赘述啦。

判断一个节点是否为另一个节点的父节点:比如有两个节点a和b,ie的方法是a.contains(b)来确定a是否为b的子节点,而其它现代浏览器使用的方法是a.compareDocumentPosition(b),这个返回结果并不是一个boolean值,如果a和b是同一个节点则返回0,a和b在不同的document内或者至少有一个在document之外则返回1,如果b在a之前则返回2,a在b之前则返回4,b包含a则返回8,a包含b则返回16,32则为浏览器独享。0、1、2、4、8、16的二进制编码分别为0000 0000、0000 0001、0000 0010、0000 0100、0000 1000、0001 0000,我们可以通过判断a.compareDocumentPosition(b) & 16转化为boolean是true还是false来判断a是否为b的节点,那么为什么不用a.compareDocumentPosition(b) == 16判断呢?因为a.compareDocumentPosition(b)返回的应该是20(4+ 16),所以倒可以用a.compareDocumentPosition(b) == 20来运算,用&运算符的好处在于我们不需要考虑这些,我们只需要考虑它和我们需要的值16的&运算是否可以返回true。(John Resig有一个模拟compareDocumentPosition的方法,让其在ie下同样适用,有兴趣的可以参考文末的链接~)

按位左移运算:我们知道按位左移1位,就是乘以2,那么我们可以用a<<1来代替a*2,因为位运算的效率要快于普通运算(有时候可能会得到相反的结果,JavaScript 中位运算的速度非常的差,跟 C# 差的太远啦~)。

按位右移:一方面,可以用a>>1替代a/2,另外按位右移可以方便的将小数转化为整数,如3.1415>>0=3,因为按位移运算会将运算数必须为整型(详细请参考 ECMA-262 手册),所以操作后将舍弃小数位~

注:位运算符要求它的数字运算数是整型的,并且这些运算数是用32位的整数来表示的,第32位是符号位。而且运算数限制在32位的整数范围内,同时要求右边的运算数在0到31之间。(本文二进制编码并不规范,仅为方便使用~)


声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能