javascript位运算你真的会了吗？你知道它们的使用场景吗？

努力学前端的小胡
115 阅读4分钟

今天我们来讲一下 js 的位运算以及它的应用场景

<<（左移）>>(右移)
二进制左移动 n 位二进制右移动 n 位
&(按位与)|（按位或）
二进制位同时是1的时候，结果是1，否则是0二进制位同时是0的时候，结果是0，否则是1
^（异或运算）
二进制位两个都为1，结果为0

下面我给大家详细讲解一下：

  1. << 左移
(10).toString(2) // 得到 2 进制 1010
// 表示二进制向左边移动一位 则现在二进制位为：10100
10 << 1 // 输出 20
// 我们来验证一下 把二进制位转换为十进制
parseInt(10100,2) // 输出 20
  1. >>右移
// 右移跟左移同理
(10).toString(2) // 得到 2 进制 1010
// 表示二进制向右边移动一位 则现在二进制位为：101
10 >> 1 // 输出 5
// 我们来验证一下 把二进制位转换为十进制
parseInt(101,2) // 输出 5
  1. &按位与运算
// 我们现在有两个数，分别为 10 和 13
10 & 13 // 输出 8

// 它们是怎么计算的呢？
// 首先我们先把这两个数转换为 2 进制
(10).toString(2) // 二进制为 1010
(13).toString(2) // 二进制为 1101
// 然后我们从个位数开始对比，两个为 1 ，结果为1，否则为0
1010
1101
____
1000
// 我们得到的二进制 结果为 1000，接下来我们来验证一下
parseInt(1000,2) // 输出 8

接下来两个大家以此类推就行了，下面跟大家说一下位运算的使用场景：

位运算最常用的使用场景那就是定义权限了

平常我们定义权限：

// 新增权限
const CREATE = 1
// 删除权限
const DELETE = 2
// 修改权限
const UPDATE = 3
// 游览权限
const DETATL = 4

用位运算定义权限：

// 注意 0b 代表定义二进制数据

// 假设我们现在有 4 种权限，那我们就用二进制位表示权限

0001 代表有新增权限 0010 代表有删除权限 0100 代表有修改权限 1000 代表有游览权限
没有权限的就在相应位置上为 0 即可

// 新增权限
const CREATE = 0b0001
// 删除权限
const DELETE = 0b0010
// 修改权限
const UPDATE = 0b0100
// 游览权限
const DETATL = 0b1000

这时候有些人就要问了，这样定义有什么好处呢？

这边我举个例子：

既然是权限，每个人的权限都不一样，比如有些人有：
新增
新增、删除
新增、删除、修改
新增、删除、游览
新增、修改、游览
删除、修改......

那么上面我们又要新增数字来判断了吗？
// 可新增、可删除
const add_delete = 5
// 可新增、可删除、可修改
const add_delete = 6
// ......省略

那以后有更多的权限呢？这是不是一个无底洞

但是用位运算就不会出现这样的问题：

// 新增权限
const CREATE = 0b0001
// 删除权限
const DELETE = 0b0010
// 修改权限
const UPDATE = 0b0100
// 游览权限
const DETATL = 0b1000

那么我们怎么用位运算表达多种权限呢？
很简单，用 按位或 就行了，一个为 1 就为1，这不刚好表达了我们的权限吗？
0001
0010
______
0011
// 新增、删除 权限
const result = CREATE | DELETE

我们会了表达权限之后，我们怎么判断权限呢？
比如后端返回了一个权限
// 可游览、可修改
const power =  0b1100
现在我们要判断它有没有删除权限怎么判断呢？
我们用 按位与 就行了，两个为1就为1，否则为0
1100
0010
____
0000

0000 和 0010 相等吗？不相等那就是没有权限
power & DELETE // 没有权限就返回 0，有权限返回相应的 10 进制

上面为了方便大家理解直接用二进制定义权限，接下来我们用 左移和右移 来定义权限

// 新增权限
const CREATE = 1
// 删除权限
const DELETE = 1<<1
// 修改权限
const UPDATE = 1<<2
// 游览权限
const DETATL = 1<<3

不知道上面这种大家看懂没有，vue 源码就是用了上面这种形式
新增权限 1
删除权限 10
修改权限 100
游览权限 1000

// 表达权限也是一样的方式
const result = CREATE | DELETE

// 判断权限的话我们可以用 !! ，直接返回 Boolean 值，就不用判断是不是 0 了
!!(result & UPDATE)

接下来最后一个 ^或 ，这个可以用来判断两个数字是否相等，就不过多演示了！

如果你觉得这份文章很有用，别忘了把它收藏起来，并关注我以获得更多类似的内容。

avatar
文章
阅读
粉丝