转自:https://www.jb51.net/article/104394.htm

一、前言:

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

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。我们尝试结合上面的理论来分析为什么会输出最终的结果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 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中的 “&” 和 “|” 详解的更多相关文章

  1. JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解

    二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...

  2. (转)javascript中event对象详解

    原文:http://jiajiale.iteye.com/blog/195906 javascript中event对象详解          博客分类: javaScript JavaScriptCS ...

  3. 【JavaScript中的this详解】

    前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的 ...

  4. JavaScript中的this详解

    前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的 ...

  5. Javascript中prototype属性详解 (存)

    Javascript中prototype属性详解   在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不 ...

  6. JavaScript 中 this 的详解

    this 的指向 this 是 js 中定义的关键字,它自动定义于每一个函数域内,但是它的指向却让人很迷惑.在实际应用中,this 的指向大致可以分为以下四种情况. 原文作者:林鑫,作者博客:http ...

  7. JavaScript中的arguments详解

    1. arguments arguments不是真正的数组,它是一个实参对象,每个实参对象都包含以数字为索引的一组元素以及length属性. (function () { console.log(ar ...

  8. javascript中的操作符详解1

    好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...

  9. Javascript中prototype属性详解

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

  10. [No000069]Javascript中this关键字详解

    Quiz 请看下面的代码,最后alert出来的是什么呢?(chrome下按F12,选择Console直接复制粘贴运行) var name = "Bob"; var nameObj ...

随机推荐

  1. Uva LA 3177 - Beijing Guards 贪心,特例分析,判断器+二分,记录区间内状态数目来染色 难度: 3

    题目 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...

  2. 【转载】Qt中图像的显示与基本操作

    Qt可显示基本的图像类型,利用QImage.QPxmap类可以实现图像的显示,并且利用类中的方法可以实现图像的基本操作(缩放.旋转). 参考:Qt中图像的显示与基本操作 - ykm0722的专栏 - ...

  3. VirtualBox安装CentOS7的网络配置

    VirtualBox安装CentOS7的网络配置 这几天在本机VirtualBox安装CentOS时遇到了网络的坑... VirtualBox的下载地址:https://www.virtualbox. ...

  4. day044 cssy其他样式 js初识

    float: 浮动 .t1{ float: right/left; } 关于浮动的两个特点: 1.浮动的框可以向左或向右移动,知道他的外边缘碰到包括框或另一个浮动框的边框为止. 2.由于浮动框不在文档 ...

  5. Python自动化必备发送邮件报告脚本详解

    #!/usr/bin/python3# -*- coding:UTF-8 -*-import smtplib#smtplib库主要用来连接第三方smtp库,用来发邮件from email.mime.t ...

  6. MySQL存储过程错误No data - zero rows fetched, selected, or processed

    原因:游标没有获取到任何内容! 解决方案 : 声明一个 continue handler declare continue handler for not found set V_NotFound = ...

  7. The issue about the GMT paper can't display all the seismograms

    I try to display seismograms using 'pssac' by the command: gmt pssac *.z -JX20c/40c -R0/// -Bx20+l'T ...

  8. 数位DP详解

    算法使用范围 在一个区间里面求有多少个满足题目所给的约束条件的数,约束条件必须与数自身的属性有关 下面用kuangbin数位dp的题来介绍 例题  不要62 题意:在一个区间里面求出有多少个不含4和6 ...

  9. python random模块(获取随机数)

    如果要使用random模块,需要先导入 import random 1.random.random()  #用于生成一个0到1的随机浮点数 2.random.uniform(a,b)  #用于生成一个 ...

  10. MySQL:数据表基本操作

    数据表基本操作 注意点: 1.数据表中已经有数据时,轻易修改数据类型,有可能因为不同的数据类型的数据在机器 中存储的方式及长度并不相同,修改数据类型可能会影响到数据表中已有的数据类型. 2.  数据表 ...