一、前言：

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

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  # &  # |  # AngularJS实用开发技巧(推荐)  # 分享经典的JavaScript开发技巧  # javascript:;与javascript:void(0)使用介绍  # 帮你提高开发效率的JavaScript20个技巧  # 都是  # 结果是  # 每一位  # 转换成  # 第一个  # 第二个  # 对了  # 又会  # 再加  # 转换为  # 再将  # 本质上  # 数为  # 这是  # 有什么  # 几个  # 有两个  # 是在  # 决定了  # 也会 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何在IIS中配置站点IP、端口及主机头？  高端建站三要素：定制模板、企业官网与响应式设计优化  ChatGPT常用指令模板大全 新手快速上手的万能Prompt合集  如何用美橙互联一键搭建多站合一网站？  Laravel Octane如何提升性能_使用Laravel Octane加速你的应用  Laravel如何集成第三方登录_Laravel Socialite实现微信QQ微博登录  Microsoft Edge如何解决网页加载问题 Edge浏览器加载问题修复  如何快速使用云服务器搭建个人网站？  html5audio标签播放结束怎么触发事件_onended回调方法【教程】  如何在阿里云虚拟机上搭建网站？步骤解析与避坑指南  Laravel怎么写单元测试_PHPUnit在Laravel项目中的基础测试入门  开心动漫网站制作软件下载,十分开心动画为何停播？  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  JS经典正则表达式笔试题汇总  Laravel如何实现全文搜索功能？（Scout和Algolia示例）  nginx修改上传文件大小限制的方法  Laravel如何升级到最新的版本_Laravel版本升级流程与兼容性处理  如何在Ubuntu系统下快速搭建WordPress个人网站？  C#如何调用原生C++ COM对象详解  如何在香港服务器上快速搭建免备案网站？  html如何与html链接_实现多个HTML页面互相链接【互相】  jquery插件bootstrapValidator表单验证详解  成都网站制作公司哪家好,四川省职工服务网是做什么用？  Android 常见的图片加载框架详细介绍  如何在搬瓦工VPS快速搭建网站？  百度输入法ai面板怎么关 百度输入法ai面板隐藏技巧  如何快速生成ASP一键建站模板并优化安全性？  Python文件异常处理策略_健壮性说明【指导】  Laravel怎么进行数据库事务处理_Laravel DB Facade事务操作确保数据一致性  iOS UIView常见属性方法小结  Laravel如何使用Gate和Policy进行权限控制_Laravel权限判定与策略规则配置  HTML透明颜色代码怎么让下拉菜单透明_下拉菜单透明背景指南【技巧】  如何快速查询网站的真实建站时间？  Python正则表达式进阶教程_复杂匹配与分组替换解析  HTML透明颜色代码怎么让图片透明_给img元素加透明色的技巧【方法】  Laravel中的Facade(门面)到底是什么原理  如何打造高效商业网站？建站目的决定转化率  Laravel怎么创建自己的包(Package)_Laravel扩展包开发入门到发布  如何快速上传自定义模板至建站之星？  Android中Textview和图片同行显示(文字超出用省略号，图片自动靠右边)  高防服务器：AI智能防御DDoS攻击与数据安全保障  如何快速建站并高效导出源代码？  如何在橙子建站上传落地页？操作指南详解  香港服务器网站搭建教程-电商部署、配置优化与安全稳定指南  Android自定义控件实现温度旋转按钮效果  独立制作一个网站多少钱,建立网站需要花多少钱？  三星网站视频制作教程下载,三星w23网页如何全屏？  详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）  Android中AutoCompleteTextView自动提示  文字头像制作网站推荐软件,醒图能自动配文字吗？