前端位运算运用场景小知识（权限相关）

wantLG

已于 2024-07-27 09:39:18 修改

阅读量643

点赞数 18

分类专栏： web前端基础解决方案文章标签：前端 javascript

于 2024-07-26 16:47:19 首次发布

本文链接：https://blog.csdn.net/weixin_45491473/article/details/140719010

版权

web前端基础同时被 2 个专栏收录

12 篇文章 1 订阅

订阅专栏

解决方案

6 篇文章 0 订阅

订阅专栏

文前推荐一下👉前端必备工具推荐网站(图床、API和ChatAI、智能AI简历、AI思维导图神器等实用工具):
站点入口：http://luckycola.com.cn/
图床：https://luckycola.com.cn/public/dist/#/imghub
多种API：https://luckycola.com.cn/public/dist/#/
ChatAI：https://luckycola.com.cn/public/dist/#/chatAi
AI思维导图神器：https://luckycola.com.cn/public/dist/#/aiQStore/aiMindPage

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

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

ai回答：

整数运算与性能优化：

位运算直接对整数的二进制位进行操作，因此在处理大量整数运算时，相较于常规算术运算，位运算通常具有更高的性能。
在一些需要快速计算整数的场景中，如游戏开发、加密解密等，位运算尤为有用。

权限与状态管理：

位运算常用于权限与状态的管理。例如，可以使用位掩码（bitmask）来设置、检查和修改一系列独立的标志位，每个标志位代表一个特定的权限或状态。
按位与（&）、按位或（|）和按位异或（^）等运算符在处理此类场景时特别有用。

图像处理与图形学：

位运算在图像处理与图形学中也有广泛应用，因为颜色和像素数据通常可以用二进制位来表示。
例如，可以使用位运算来组合、修改或比较像素的颜色值，实现各种图像效果。

数据加密与校验：

位运算在数据加密和校验中扮演着重要角色。
例如，可以使用按位异或（^）运算符来加密或解密数据，因为异或操作具有可逆性。
校验和（checksum）的计算也经常使用位运算来确保数据的完整性和准确性。

快速判断与转换：

位运算可以用于快速判断一个数的性质，如奇偶性、符号等。
通过位运算，还可以将一个整数快速转换为其他格式的数据，如布尔数组。

网络编程与底层通信：

在网络编程和底层通信中，位运算常用于编解码和协议解析等任务。
例如，可以使用位运算来解析数据包的头部信息，或者将数据按照特定的位格式进行编码和解码。

浮点数向下取整：

在处理浮点数时，有时需要将其向下取整为最接近的整数。虽然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），以此类推。

用户权限

假设我们有一个用户，该用户具有 READ 和 EXECUTE 权限：

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 位。