一、前言：

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

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 】

相关推荐： 米侠浏览器网页图片不显示怎么办 米侠图片加载修复  node.js报错：Cannot find module 'ejs'的解决办法  专业商城网站制作公司有哪些,pi商城官网是哪个？  Win11摄像头无法使用怎么办_Win11相机隐私权限开启教程【详解】  Laravel如何使用Socialite实现第三方登录？（微信/GitHub示例）  深圳网站制作平台,深圳市做网站好的公司有哪些？  PHP正则匹配日期和时间(时间戳转换)的实例代码  Laravel中的Facade(门面)到底是什么原理  Laravel如何使用Laravel Vite编译前端_Laravel10以上版本前端静态资源管理【教程】  标准网站视频模板制作软件,现在有哪个网站的视频编辑素材最齐全的，背景音乐、音效等？  Laravel怎么生成二维码图片_Laravel集成Simple-QrCode扩展包与参数设置【实战】  详解jQuery中的事件  长沙做网站要多少钱,长沙国安网络怎么样？  北京企业网站设计制作公司,北京铁路集团官方网站？  Linux安全能力提升路径_长期防护思维说明【指导】  Laravel DB事务怎么使用_Laravel数据库事务回滚操作  活动邀请函制作网站有哪些,活动邀请函文案？  香港服务器建站指南：外贸独立站搭建与跨境电商配置流程  Java类加载基本过程详细介绍  php8.4header发送头信息失败怎么办_php8.4header函数问题解决【解答】  Laravel如何实现用户注册和登录？（Auth脚手架指南）  Laravel如何获取当前登录用户信息_Laravel Auth门面使用与Session用户读取【技巧】  UC浏览器如何设置启动页 UC浏览器启动页设置方法  如何使用 jQuery 正确渲染 Instagram 风格的标签列表  Laravel如何使用Passport实现OAuth2？（完整配置步骤）  高端网站建设与定制开发一站式解决方案 中企动力  微信小程序 五星评分(包括半颗星评分)实例代码  Gemini手机端怎么发图片_Gemini手机端发图方法【步骤】  Python高阶函数应用_函数作为参数说明【指导】  中国移动官方网站首页入口 中国移动官网网页登录  悟空识字如何进行跟读录音_悟空识字开启麦克风权限与录音  如何在云主机快速搭建网站站点？  python中快速进行多个字符替换的方法小结  如何在Windows虚拟主机上快速搭建网站？  1688铺货到淘宝怎么操作 1688一键铺货到自己店铺详细步骤  Laravel如何集成第三方登录_Laravel Socialite实现微信QQ微博登录  Laravel如何获取当前用户信息_Laravel Auth门面获取用户ID  制作企业网站建设方案,怎样建设一个公司网站？  laravel怎么配置和使用PHP-FPM来优化性能_laravel PHP-FPM配置与性能优化方法  如何在 React 中条件性地遍历数组并渲染元素  Laravel观察者模式如何使用_Laravel Model Observer配置  魔方云NAT建站如何实现端口转发？  Laravel如何处理JSON字段的查询和更新_Laravel JSON列操作与查询技巧  微信小程序 闭包写法详细介绍  php在windows下怎么调试_phpwindows环境调试操作说明【操作】  韩国服务器如何优化跨境访问实现高效连接？  ChatGPT 4.0官网入口地址 ChatGPT在线体验官网  如何利用DOS批处理实现定时关机操作详解  如何在腾讯云服务器快速搭建个人网站？  iOS UIView常见属性方法小结