JS使用位运算实现权限组合的代码示例

 更新时间:2024年07月24日 08:38:36   作者:Lim46  
在业务开发中我们经常会遇到处理不同权限的情况,例如根据用户角色是否有编辑权限来展示和隐藏一个按钮,或者一个函数根据传入的配置项来执行不同的逻辑,也就是所谓的权限控制,所以本文给大家介绍了JS使用位运算实现权限组合,需要的朋友可以参考下

在业务开发中我们经常会遇到处理不同权限的情况,例如根据用户角色是否有编辑权限来展示和隐藏一个按钮,或者一个函数根据传入的配置项来执行不同的逻辑,也就是所谓的权限控制。

在判断用户是否拥有某个权限时,一般情况下我们会这样写:

// 用户信息
const userInfo = {
    permission: 1
};

const READ = 0; // 读取权限
const WRITE = 1; // 写入权限
const DELETE = 1; // 删除权限
// 判断用户是否有删除权限
if(userInfo.perssion === DELETE) {
    // do something...
}

但如果要判断是否同时拥有读取和删除权限时,上面这种方法就做不到了,因为只能判断一种权限。在多于一种权限的组合状态下,就需要用到位运算了。

例如在LoashbaseClone方法里,使用了bitmask参数来判断是否深度克隆,是否克隆symbols等。

普通的克隆方法clone和深度克隆方法cloneDeep基于baseClone封装而来,两者的区别是在第二个参数的值有区别,这里就是运用了位运算。

接下来让我们一起研究下这个位运算是个什么东西。

1、位运算概述

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

2、位运算符概览

符号描述运算规则
&两个位都为1时,结果才为1
|两个位都为0时,结果才为0
异或两个位相同为0,相异为1
~取反0变1,1变0
<<左移各二进位全部左移若干位,高位丢弃,低位补0
>>右移各二进位全部右移若干位,对无符号数,高位补0,有符号数,各编译器处理方法不一样,有的补符号位(算术右移),有的补0(逻辑右移)

3、位运算实现权限组合

既然位运算是以二进制数据做运算,因此我们可以用二进制数定义权限变量。

const READ = 0b0001; // 读取权限
const WRITE = 0b0010; // 写入权限
const DELETE = 0b0100; // 删除权限
// 或
const READ = 1;
const WRITE = 2;
const DELETE = 4;

1)权限组合(添加权限)

上面已经定义了读、写、删三个单独权限。如果要定义一个读写权限,需要怎么定义呢。
根据|运算符的规则可知,当两个位中只要有一个为1,结果为1。因此可以这样定义读写权限:

const READ = 0b0001; // 读取权限
const WRITE = 0b0010; // 写入权限

// 组合读写权限
const READ_WRITE = READ | WRITE; // 0b0011

2)权限切换

当用户拥有读权限,就删除用户的读权限;当用户没有读权限,就添加读权限。这样的权限切换,要怎么实现呢。
根据^运算符规则可知,当两个位相同时为0,相异为1。

// 当两个值相等时,结果为0。即自己与自己做异或运算时,结果为0。
0b0001 ^ 0b0001 // 0b0000

// 一个0值与目标做异或运算时,得到目标值。
0b0000 ^ 0b0001 // 0b0001

因此,要切换哪个权限,只需要与该权限做异或运算就可以了。

const READ = 0b0001; // 读取权限
const WRITE = 0b0010; // 写入权限

// 用户权限
let userPermission = READ | WRITE; // 0b0011 读写权限

// 切换读取权限
userPermission = userPermission ^ READ; // 0b0010 第一次执行,删除读权限
userPermission = userPermission ^ READ; // 0b0011 第二次执行,添加读权限

3)判断权限组合中是否拥有某个权限

当用户拥有一个权限组合,怎么判断用户是否拥有某个权限呢。
根据&运算符规则可知,当两个位都为1时结果为1,否则结果为0。

// 自己与自己做与运算时,结果为自己。
0b0001 & 0b0001 // 0b0001

// 一个0值与目标做与运算时,结果为0。
0b0000 & 0b0001 // 0b0000

因此,要判断是否拥有某个权限,只需要与该权限做与运算,与运算结果为该权限的值则代表拥有该权限。

const READ = 0b0001; // 读取权限 
const WRITE = 0b0010; // 写入权限

// 用户权限
const userPermission = READ | WRITE; // 0b0011

// 判断是否有读权限
const hasReadPermission = (userPermission & READ) === READ; // true

4)删除权限组合中的某个权限

如果用户拥有读写权限,想要删掉用户的读权限,需要怎样实现呢。
由以上可知,需要先判读是否有读权限,有的话就做异或运算切换(删除)该权限。

const READ = 0b0001; // 读取权限 
const WRITE = 0b0010; // 写入权限

// 用户权限
const userPermission = READ | WRITE; // 0b0011

const hasPermission = (userPermission, value) => {
  return  (userPermission & value) === value;
};
// 删除读权限
if(hasPermission(userPermission, READ)) {
  userPermission = userPermission ^ READ;
};

以上就是JS使用位运算实现权限组合的代码示例的详细内容,更多关于JS位运算实现权限组合的资料请关注脚本之家其它相关文章!

相关文章

  • js实现浏览本地文件并显示扩展名的方法

    js实现浏览本地文件并显示扩展名的方法

    这篇文章主要介绍了js实现浏览本地文件并显示扩展名的方法,涉及javascript文件上传及字符串操作的相关技巧,非常简单实用,需要的朋友可以参考下
    2015-08-08
  • layer弹窗在键盘按回车将反复刷新的实现方法

    layer弹窗在键盘按回车将反复刷新的实现方法

    今天小编就为大家分享一篇layer弹窗在键盘按回车将反复刷新的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 用JavaScript实现浏览器截图功能的全过程

    用JavaScript实现浏览器截图功能的全过程

    在Web开发中实现网页截图功能可以帮助我们保存网页内容、生成海报、制作截图分享等,这篇文章主要介绍了用JavaScript实现浏览器截图功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-07-07
  • js操作XML文件的实现方法兼容IE与FireFox

    js操作XML文件的实现方法兼容IE与FireFox

    下面小编就为大家带来一篇js操作XML文件的实现方法兼容IE与FireFox。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 原生JS实现各种运动之匀速运动

    原生JS实现各种运动之匀速运动

    这篇文章主要为大家详细介绍了原生JS实现各种运动之匀速运动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 微信小程序云开发使用方法新手初体验

    微信小程序云开发使用方法新手初体验

    微信小程序云开发使用方法新手初体验,开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • javascript中的后退和刷新实现方法

    javascript中的后退和刷新实现方法

    下面小编就为大家带来一篇javascript中的后退和刷新实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 使用ngrok+express解决本地环境中微信接口调试问题

    使用ngrok+express解决本地环境中微信接口调试问题

    这篇文章主要介绍了使用ngrok+express解决本地环境中微信接口调试问题,需要的朋友可以参考下
    2018-02-02
  • 防止页面被iframe(兼容IE,Firefox火狐)

    防止页面被iframe(兼容IE,Firefox火狐)

    以前发布的防止被iframe的代码,容易在火狐浏览器下, 不断的刷新页面。所以从网站找到了这篇文章。
    2010-07-07
  • 如何利用JS判断整数x是否是回文数

    如何利用JS判断整数x是否是回文数

    回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数,下面这篇文章主要给大家介绍了关于如何利用JS判断整数x是否是回文数的相关资料,需要的朋友可以参考下
    2022-01-01

最新评论