当前位置: 首页 > news >正文

前端位运算运用场景小知识(权限相关)

前提:此篇结合AI、公司实际业务产出,背景是公司有个业务涉及权限,用位运算来控制的,比较新奇,所以记录一下(可能自己比较low)

前端js位运算一般实际的应用场景在哪

ai回答:

  1. 整数运算与性能优化:
  • 位运算直接对整数的二进制位进行操作,因此在处理大量整数运算时,相较于常规算术运算,位运算通常具有更高的性能。
  • 在一些需要快速计算整数的场景中,如游戏开发、加密解密等,位运算尤为有用。
  1. 权限与状态管理:
  • 位运算常用于权限与状态的管理。例如,可以使用位掩码(bitmask)来设置、检查和修改一系列独立的标志位,每个标志位代表一个特定的权限或状态。
  • 按位与(&)、按位或(|)和按位异或(^)等运算符在处理此类场景时特别有用。
  1. 图像处理与图形学:
  • 位运算在图像处理与图形学中也有广泛应用,因为颜色和像素数据通常可以用二进制位来表示。
  • 例如,可以使用位运算来组合、修改或比较像素的颜色值,实现各种图像效果。
  1. 数据加密与校验:
  • 位运算在数据加密和校验中扮演着重要角色。
  • 例如,可以使用按位异或(^)运算符来加密或解密数据,因为异或操作具有可逆性。
  • 校验和(checksum)的计算也经常使用位运算来确保数据的完整性和准确性。
  1. 快速判断与转换:
  • 位运算可以用于快速判断一个数的性质,如奇偶性、符号等。
  • 通过位运算,还可以将一个整数快速转换为其他格式的数据,如布尔数组。
  1. 网络编程与底层通信:
  • 在网络编程和底层通信中,位运算常用于编解码和协议解析等任务。
  • 例如,可以使用位运算来解析数据包的头部信息,或者将数据按照特定的位格式进行编码和解码。
  1. 浮点数向下取整:
  • 在处理浮点数时,有时需要将其向下取整为最接近的整数。虽然JavaScript提供了Math.floor()函数来实现这一功能,但位运算也可以作为一种快速替代方案(例如,使用num | 0)。

关于权限与状态管理

  • 公司业务涉及权限业务,以往认知只知道几种控制权限的实现方案:例如 动态路由、自定义指令、用户权限、菜单|按钮权限、接口权限等等,但这个用位运算来控制权限的比较有趣

什么是位运算?

  • 位运算(Bit Manipulation)是直接在整数的二进制位上进行的操作,相当于转成二机制数进行运算

按位与(&)

按位与操作符会将两个数的二进制表示进行逐位比较,当且仅当两个相应的二进制位都为1时,结果位才为1,否则为0。

示例:

  A: 1010 (十进制中的 10)
& B: 1100 (十进制中的 12)
----------
结果: 1000 (十进制中的 8)

按位或(|)

按位或操作符会将两个数的二进制表示进行逐位比较,只要两个二进制位中有一个为1时,结果位就为1。

示例:

  A: 1010 (十进制中的 10)
| B: 1100 (十进制中的 12)
----------
结果: 1110 (十进制中的 14)

按位异或(^)

按位异或操作符会将两个数的二进制表示进行逐位比较,当两个相应的二进制位相异时,结果位为1,否则为0。

示例:

  A: 1010 (十进制中的 10)
^ B: 1100 (十进制中的 12)
----------
结果: 0110 (十进制中的 6)

左移(<<)

左移操作符会将数的所有位向左移动指定的位数。右侧空出的位用0填充,左侧溢出(超出位数限制)的位则丢弃。

示例:

将数字 4 (二进制中的 0100) 左移 1 位:A: 0100 (十进制中的 4)
<< 1
----------
结果: 1000 (十进制中的 8)

位取反(~)

位取反操作符会对数字的二进制表示中的每一位执行取反操作(0变为1,1变为0)。注意,由于位取反是对整个数字进行操作(通常是32位或64位,取决于JavaScript的实现),所以结果可能是负数,因为最高位(符号位)也可能被取反。

示例(以8位为例,但JavaScript中的位运算通常是32位):

  A: 0100 (十进制中的 4,假设只有4位)
~
----------
结果: 1011 (十进制中的 -5,如果是8位二进制,最高位是符号位)

在JavaScript中,因为数字是以补码形式表示的,所以位取反后得到的是一个负数。在上面的例子中,如果假设是4位的二进制数(仅用于演示),那么0100(即4)会得到1011,这在4位二进制中不是一个有效的正数值,但如果看作是有符号的8位二进制数(最高位为符号位),则1011表示的是-5(因为它是正数5的补码的反码加1)。

权限业务实际怎么使用

假设我们有一个用户系统,每个用户可以有多个权限,如读取(READ)、写入(WRITE)、删除(DELETE)和执行(EXECUTE)等。我们可以使用位运算为每个权限分配一个唯一的位,并将这些位组合起来存储在一个整数中。

权限定义

const PERMISSIONS = {READ: 1 << 0,  // 1 (二进制: 0001)WRITE: 1 << 1, // 2 (二进制: 0010)DELETE: 1 << 2, // 4 (二进制: 0100)EXECUTE: 1 << 3 // 8 (二进制: 1000)
};

这里使用左移操作符(<<)来为每个权限分配一个唯一的位。例如,READ 权限被分配了最低位(即 2 的 0 次方,即 1),WRITE 权限是 2 的 1 次方(即 2),以此类推。

用户权限

假设我们有一个用户,该用户具有 READEXECUTE 权限:

let userPermissions = PERMISSIONS.READ | PERMISSIONS.EXECUTE; // 9 (二进制: 1001)

这里使用按位或操作符(|)来组合 READ 和 EXECUTE 权限。

检查权限

现在我们可以使用按位与操作符(&)来检查用户是否具有某个权限:

function checkPermission(userPermissions, permissionToCheck) {return (userPermissions & permissionToCheck) === permissionToCheck;
}console.log(checkPermission(userPermissions, PERMISSIONS.READ)); // true
console.log(checkPermission(userPermissions, PERMISSIONS.WRITE)); // false
console.log(checkPermission(userPermissions, PERMISSIONS.EXECUTE)); // true

在这个 checkPermission 函数中,我们通过将 userPermissions 和要检查的 permissionToCheck 进行按位与操作,并检查结果是否等于 permissionToCheck 来判断用户是否具有该权限。如果结果等于 permissionToCheck,则说明该位被设置(即用户具有该权限),否则说明该位未被设置(即用户不具有该权限)。

添加或删除权限

我们还可以使用按位或和按位异或操作符来添加或删除用户的权限:

// 添加 WRITE 权限
userPermissions |= PERMISSIONS.WRITE; // 11 (二进制: 1011)// 删除 READ 权限
userPermissions &= ~PERMISSIONS.READ; // 10 (二进制: 1010) 这里的 ~ 是位取反操作符

我们使用按位或操作符(|=)为 userPermissions 添加了 WRITE 权限,使用按位异或操作符(&= ~)删除了 READ 权限。注意,在删除权限时,我们使用了位取反操作符(~)来创建一个只有 READ 位被设置为 0 的掩码,然后将该掩码与 userPermissions 进行按位与操作,从而清除 READ 位。

http://www.lryc.cn/news/407493.html

相关文章:

  • 【云原生】Kubernetes中的DaemonSet介绍、原理、用法及实战应用案例分析
  • 使用框架构建React Native应用程序的最佳实践
  • Godot入门 02玩家1.0版
  • Docker-Compose配置zookeeper+KaFka+CMAK简单集群
  • Python中,集合几种基本运算
  • netsuite查询货品库存
  • Java 实现分页的几种方式详解
  • vite构建vue3项目hmr生效问题踩坑记录
  • 区块链赋能民生大数据
  • 10 Vue 特性要点
  • ESP32和mDNS学习
  • 学习SQL如何使用CASE语句查询分析设备状态
  • Gartner发布2024年零信任网络技术成熟度曲线:20项零信任相关的前沿和趋势性技术
  • React hook 之 useState
  • jenkins中shell脚本中使用构建参数化Groovy变量的四种方式
  • Robot Operating System——ParameterEventHandler监控Parameters的增删改行为
  • 计算机网络(Wrong Question)
  • Docker+consul容器服务的更新与发现
  • 全网最详细!! Linux 安装、配置教程
  • cocos creator 3学习记录01——如何替换图片
  • 【Android Compose】ListView效果
  • 【Pytorch实战教程】Pytorch中.detach()的详细介绍
  • AR 眼镜之-充电动画定制-实现方案
  • AJAX-XMLHttpRequest 详解
  • 内容管理系统 Contentful 与 Baklib
  • [Mysql-视图和存储过程]
  • Linux下C++静态链接库的生成以及使用
  • 【8月EI会议推荐】第四届区块链技术与信息安全国际会议
  • 2024年【甘肃省安全员B证】考试资料及甘肃省安全员B证模拟试题
  • 结合el-upload上传组件,验证文件格式及大小