JS中的位运算

news2025/2/24 6:59:25

目录

JS中的位运算

JS中的与运算

JS中的或运算

JS中的否(非)运算

计算机中负数的存储方式

JS中的异或运算

JS中位运算的应用场景

位的叠加(开关)

JS中的位移运算

左位移

右位移

全右位移


首先了解一下什么是位运算

位运算:从现代计算机中所有的数据二进制的形式存储在设备中。即 0、1 两种状态,计算机对二进制数据进行的运算(+、-、*、/)都是叫位运算,即将符号位共同参与运算的运算。

上面的话可以简化为:将一个整数的二进制格式进行运算

那么在JS中是如何进行位运算的呢?

JS中的位运算

在JS中,如果需要对一个数据,类似于加减乘除,它会首先将其转换为一个整数,并且按照32位的整数二进制排列

举个例子:小数2.3

2.3 -> 2 -> 0000 0000 0000 0000 0000 0010  //第一个0表示符号位,1为负数,0为正数

首先把2.3四舍五入成一个整数2,然后将这个整数转换成32位二进制整数格式,所以对于JS中的位运算,需要全部转换成整数格式,在进行运算

那么对于一些特殊的数字,比如NaN、infinity、-infinity是怎么表示的呢

在JS中规定。对于特殊的以上数字,如果进行位运算,全部看作0

JS中的与运算

在js中位运算有多种,先介绍第一种与运算,符号为:&,写法为:表达式1 & 表达式2

那么与运算是怎么计算的呢?

与运算:参加运算的两个数据,按二进制位进行“与”运算

上面的话通俗来讲:两位同时为“1”,结果才为“1”,否则为0,就是将两个整数的每一个二进制位进行比较,如果都为1,结果才为1,其余情况全部为0;

举个例子 : 1 & 2

1 & 2

1 对应的二进制是--0000 0000 0000 0000 0000 0000 0000 0001
2 对应的二进制是--0000 0000 0000 0000 0000 0000 0000 0010

由于前28位都为0,结果与运算后肯定也全为0,这时就算后四位

- 0 0 0 1 -
- 0 0 1 0 -
-----------
- 0 0 0 0 -  //结果为0000,转换为十进制为0,那么1 & 2的结果就为0

JS中的或运算

在js中的第二种位运算是或运算,符号 | ,写法:表达式1 | 表达式2

那么或运算是如何计算的呢?

或运算:将比较的两个整数,先转换为32位二进制,然后每一位进行比较,全0才为0,其余情况全为1

举个例子 : 1 | 3

1 | 3

1 对应的二进制是--0000 0000 0000 0000 0000 0000 0000 0001
3 对应的二进制是--0000 0000 0000 0000 0000 0000 0000 0011

由于前30位全为0,与运算后也全为0,可以不计入计算

- 0 1 -
- 1 1 -
-------
- 1 1 -     //二进制11,需要补齐32位才可以转换为十进制,那么1 | 3的结果就为3

JS中的否(非)运算

在js中,还有一中运算,称为否或者非运算,符号为:~,写法:~表达式

否运算:将这个整数全部二进制位按位取反,0变成1,1变成0

在这里首先带大家了解一下知识

计算机中负数的存储方式

可能某些同学认识二进制会认为负数-1在计算机是这样存储的

-1

> 1000 0000 0000 0000 0000 0000 0000 0001   //符号位为-表示负数,最后一位为1,表示1

感觉上-1好像是这样存储的,但其实计算机并不是这样存储的,这样的表示方法叫做真码,对于人来说,这样确实很任意让人阅读,对于为什么计算机会这样存储,这与计算机组成原理有关,计算机是不能做减法的,只能做加法的,这里并不多讲

那么计算机到底是如何存储负数的呢?

首先计算机拿出负数的真码,符号位不动,其余位全部取反,取反的叫反码,然后将反码加上1就可以得到负数的补码,在计算机中负数就是存储的补码

如果还不懂的话,请看我举个例子:如   -1

-1 

拿出真码    --> 1000 0000 0000 0000 0000 0000 0000 0001  // 也叫原码
得到反码    --> 1111 1111 1111 1111 1111 1111 1111 1110  // 真码取反
得到补码    --> 1111 1111 1111 1111 1111 1111 1111 1111  // 反码加1

由上述方法,那么-1在计算机存储的就是补码:1111 1111 1111 1111 1111 1111 1111 1111

注意:以上方法只针对负数存储,正数在计算机中,原反补码相同

通过上述问题你是否知道 ~1等于多少,如果还不懂,请听我慢慢讲

~1

1 对应的二进制是            --> 0000 0000 0000 0000 0000 0000 0000 0001

~1  对1的二进制序列进行取反  --> 1111 1111 1111 1111 1111 1111 1111 1110

这是得到的是存储在计算机中的补码,需要转换成真码,然后才能传换成十进制

> 取出补码  --> 1111 1111 1111 1111 1111 1111 1111 1110
> 得到反码  --> 1111 1111 1111 1111 1111 1111 1111 1101  //补码-1就得到反码
> 得到真码  --> 1000 0000 0000 0000 0000 0000 0000 0010  //符号位不变,其余全部取反,得到真码
> 转换成十进制 ----得到-2

--所以 ~1 的结果为 -2

以上方法确实可以得出非运算结果,但看起来繁琐复杂,这里小编给大家介绍一个简单的使用方法,面试笔试,考试快速得出结果

~x:-x - 1    // 取反某个数字,先让这个数字变成负数,然后减去1,就得到非运算结果

举个例子  ~2和~-2

~2 = -2 - 1 = -3
~-2 = 2 - 1 = 1

以上方法,非常好用

顺便给大家介绍一种JS中最快速取整的方式,就是小数取整数,符号:~~,写法:~~小数

举个例子 

~~3.1415926

> 首先对3.1415926进行非运算  --> ~3.1415926  -->取出整数部分3,结果为-4
> 然后再对-4进行非运算  --> ~-4  --> 结果为3

但小编并不介意使用这种方法,不太容易阅读,可以拿来炫炫技巧

JS中的异或运算

再给大家介绍一种位运算:异或运算,符号:^ ,写法:数字1 ^ 数字2

异或运算:将数字1和数字2按32位二进制进行比较,不同为1,相同为0

举个例子  1 ^ 2

1 ^ 2

1 对应的二进制是 --> 0000 0000 0000 0000 0000 0000 0000 0001
2 对应的二进制是 --> 0000 0000 0000 0000 0000 0000 0000 0010

由于前30位相比较全部为0,这里就比较后两位

-- 0 1 --
-- 1 0 --
---------
-- 1 1 --   // 二进制补齐32位,转换成十进制后,结果为3

炫技的时刻又到啦!!!

如果面试官问你交换变量的方法,你能写出来几种

小编给大家带来下面几种方法

let a = 1,b = 2;

//方式一
let temp = a;
a = b;
b = temp;
console.log(a,b)  //输出2 1

//方式二
a = a + b;
b = a - b;
a = a - b;
console.log(a,b)  //输出2 1

//方式三
a = a ^ b;
b = a ^ b;
a = a ^ b;
console.log(a,b)  //输出2 1

介绍完JS中的位运算,相信大家都不陌生了,那么位运算到底应用于JS中的那些场景呢?

JS中位运算的应用场景

这里小编给带来,js中位运算的常见场景

位的叠加(开关)

举个例子

//管理所有权限

let  AllPermission = {
    read:0b001, //读权限
    write:0b010, //修改权限
    create:0b100, //创建权限
}

//权限1表示可读可写

let permission1 = AllPermission.read | AllPermission.write

//判断权限:权限1中是否有可读权限

permission1 & AllPermission === AllPermission ? console.log("可读") : console.log("不可读") 
//输出可读

JS中的位移运算

接下来给大家介绍一下js中的位移运算,包含左位移和右位移

左位移

符号:<<

写法:数字1  <<  数字2

左位移:将数字1的二进制位(除符号外),左位移数字2的次数

举个例子:  3  <<  1

3 << 1

3 对应的二进制是 --> 0000 0000 0000 0000 0000 0000 0000 0011
左移一位后是     --> 0000 0000 0000 0000 0000 0000 0000 0110

左移运算,是整个32位向左移动,最后移动多少位,后面补多少0

所以3 << 1 的结果为 0110 ,转换为十进制为6

 由上面可以得出左移运算的规律:数字1 乘以 2的数字2次方

3 << 1 = 3 * 2 ^ 1 = 6

右位移

符号: >> 

写法:数字1  >> 数字2

右位移:将数字1的二进制位(除符号外),右位移数字2的次数

注意!!!!!------->右位移有可能会丢失精度,请谨慎使用

举个例子   3 >> 1

3 >> 1

3 对应的二进制是 --> 0000 0000 0000 0000 0000 0000 0000 0011
右移一位后是     --> 0000 0000 0000 0000 0000 0000 0000 0001

右移运算,是整个32位向右移动,最后移动多少位,符号位不变,前面补多少0

所以3 >> 1 的结果为 0001 ,转换为十进制为1

求右位移的快速方法:

举个例子  5 >> 1

相当于 5 / 2^1 ,然后取整数部分,结果为2

全右位移

符号:>>>

写法:同右位移

全右位移:同右位移,区别在于,符号位会跟着移动

举个例子  -1 >>> 1

-1 >>> 1

-1 对应的二进制是 --> 1111 1111 1111 1111 1111 1111 1111 1110
全右移后是        --> 0111 1111 1111 1111 1111 1111 1111 1111


所以-1 >>> 1 的结果为 0111 1111 1111 1111 1111 1111 1111 1111 ,转换为十进制为2147483647

好啦,今天的JS位运算已经全部介绍完毕,你学会了吗

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408524.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vite 配置篇:日常开发掌握这些配置就够了!

不知道有没有这样的兄弟&#xff0c;学习 Vite 的时候&#xff0c;官网上各种配置看的是眼花缭乱。不知道哪些需要掌握&#xff0c;哪些只用简单了解一下。为了提高大家的效率&#xff0c;我把项目中常用的配置梳理了一下分享给大家&#xff0c;希望对你上手 Vite 有所帮助。话…

若依框架前端切换TagView时刷新问题

若依框架点击顶部tag切换时&#xff0c;永远都是刷新的。刷新问题两种情况&#xff1a;普通view切换时刷新及iFrame切换刷新 一、普通view切换时刷新 原因是view的name与在菜单填写的大小写不一致&#xff0c;按若依框架规则&#xff0c;路由地址必须写为 camel 驼峰命名形式&…

前端:Tomcat服务器部署Web项目

文章目录1.1 C/S架构1.2 B/S架构2.1 服务器2.2 常见服务器3.1 Tomcat安装3.2 Tomcat使用3.3 Tomcat配置3.4 Tomcat项目部署4.1 Servlet技术4.2 Servlet配置4.3 配置测试4.4 Servlet部署5.1 IDEA部署1.1 C/S架构 Client / Server客户端/服务器 客户端作为独立程序 图形效果较好…

【面试题】面试官: Vue如何实现权限管理?

我正在参加「掘金启航计划」 一、权限管理 权限管理就是让不同的用户只能访问自己权限内的资源&#xff0c;有以下几种 路由权限&#xff0c;用户登录后只能看到自己权限内的导航菜单&#xff0c;且只能访问自己权限内的路由地址视图权限&#xff0c;用户只能看到自己权限内…

为你心仪的她做一个 “旋转木马“告白相册【零基础纯 CSS3 实现】

&#x1f4b3; 效果展示&#xff1a; 旋转相册效果里面就不放女朋友的美照了防止虐狗 &#x1f970;&#x1f970;&#x1f970;&#xff0c;就用个前端技能树的图片代替哈&#xff0c;有需要大家自行替换。 &#x1f4b3; 源码获取&#xff1a; 源码我已经上传到了资源里&…

Django web开发(二) - Mysql数据库

文章目录Mysql数据库Mysql的安装(CentOS7)下载修改配置文件Mysql强制重置密码远程可登录数据库管理数据表的管理常用数据类型数据管理添加数据查询数据删除数据修改数据员工管理Python管理数据库添加数据查询数据删除数据修改数据案例: Flask Mysql案例: 查询所有用户Mysql数据…

Three.js 渲染glb,gltf模型(保姆级教程)

1.准备工作 将下列文件在three.js的包中找到&#xff0c;注意的是我这里使用的是模块化版本的&#xff0c;这里不知道模块化的&#xff0c;可以先去看一下es6的模块化。 控制器&#xff1a; OrbitControls.js 加载器&#xff1a;GLTFLoader.js 材质&#xff1a; RoomEnviron…

echarts折线图流动特效的实现(非平滑曲线)

1.实现效果 2.实现原理 echarts官网&#xff1a;series-lines 注意&#xff1a;流动特效只支持非平滑曲线&#xff08;smooth&#xff1a;false&#xff09; series-lines路径图&#xff1a; 用于带有起点和终点信息的线数据的绘制&#xff0c;主要用于地图上的航线&#xff…

若依框架:前端登录组件与图像验证码

在上一篇《若依框架&#xff1a;前端项目结构与初始页面渲染流程》中&#xff0c;我们探讨了与“vue.config.js文件配置、.env模式和环境变量配置、vue-router全局导航守卫配置、vue-router路由配置简介”相关的内容&#xff0c;书接上回&#xff0c;我们继续探讨若依前端项目的…

前端实现在线预览Word文件

简介 在项目中遇到了个需求&#xff0c;大致需求这样的&#xff1a;用户在上传文件前需要先预览一下内容&#xff0c;确认内容是否正确&#xff0c;正确的情况下才可以上传&#xff1b; 那么这里面会涉及到一个在上传前的文档的预览操作&#xff0c;下面就记录一下踩坑记录 d…

uni-app ——使用uploadFile上传多张图片

前言&#xff1a;最近的工作中出现了一个功能点&#xff0c;具体写法我在前面的文章中已经阐述过&#xff0c;不过之前的情况是上传图片调用后端的一个接口&#xff0c;整个表单页面提交的时候调用的是另一个接口&#xff0c;我也从中学到了另外的一种方法&#xff0c;写到这里…

UniApp Scroll-View 设置占满下方剩余高度的方法小记

前言&#xff1a;点滴积累&#xff0c;贵在坚持一、布局描述&#xff1a;屏幕分为上下两部分&#xff0c;上面部分高度固定&#xff0c;比如 400rpx&#xff08;单位可以指定为其他的比如px、upx等&#xff0c;高度也可以自己设定&#xff09;&#xff0c;下面部分为 scroll-vi…

css渐变

1. 线性渐变&#xff08;是从一个方向到另一个方向的渐变&#xff09; 属性值&#xff1a;background&#xff1a;linear-gradient&#xff08;颜色&#xff09; ✍默认值&#xff1a;从上到下线性渐变&#xff1a; 代码&#xff1a; 结果&#xff1a; ✍ 属性延伸&#x…

axios—使用axios请求REST接口—发送get、post、put、delete请求

文档&#xff1a;GitHub - axios/axios: Promise based HTTP client for the browser and node.js 目录 一、axios发送get请求 简写版get请求 完整版get请求 get请求怎么在路径上携带参数 二、axios发送post请求 简写版post请求 完整版post请求 其他方式发送post请求 三…

HBuilderX 安装教程

&#x1f48c; 所属专栏&#xff1a;【软件安装教程】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496…

element日期选择器el-date-picker样式

1、基本用法 代码&#xff1a; <el-date-pickertype"date"v-model"valueStart"value-format"yyyy-MM-dd"placeholder"开始时间" ></el-date-picker>代码解读&#xff1a; type参数是用来定义选择器选择的对象&#xff…

【汇总3种】vue项目中【H5】如何处理后端返回的支付宝form表单,如何实现支付跳转?

背景&#xff1a; 现在的项目&#xff0c;都需要付款&#xff0c;难免涉及支付宝或者微信支付。如果是支付宝支付&#xff0c;很多人都说&#xff0c;都已经2202年了&#xff0c;支付宝返回的还是form表单&#xff0c;然后&#xff0c;唤起支付宝的界面。 一般来说&#xf…

【JavaScript 进阶教程】汽车商城根据价格区间筛选车辆案例

本案例源码链接&#xff08;非VIP可私聊获取&#xff09;&#xff1a;https://download.csdn.net/download/weixin_52212950/86286910https://download.csdn.net/download/weixin_52212950/86286910 文章导读&#xff1a; 这篇文章实现一个小案例&#xff1a;在购物平台选商品…

axios二次封装(详细+跨域问题)

一&#xff0c;为什么要对axios进行二次封装&#xff1f; 答&#xff1a;主要是要用到请求拦截器和响应拦截器; 请求拦截器&#xff1a;可以在发请求之前可以处理一些业务 响应拦截器&#xff1a;当服务器数据返回以后&#xff0c;可以处理一些事情 二&#xff0c;axios的二次…

html/javascript实现简单的上传

一、 上传用到的按钮类型是type file 二、 为了美化上传按钮&#xff0c;我们通常会自定义按钮&#xff0c;将默认的上传隐藏掉。 fileInputs.click() 触发上传按钮点击 三、 new FileReader() 读取文件内容方法&#xff1a; readAsText() 读取文本文件&#xff0c;(可以使用…