在大数据时代，后端数据库压力大，会用到位运算来避免使用数组等需求，则有了位运算的加入，对于前端来说，则需要将位运算转换成需要的值，下面则是记录学习的记录
了解位运算 我们首要要了解二进制与十进制的转换，下面先来复习下二进制转十进制
二进制转十进制 除2 余数法（二进制以0开头）
举例：
数字：1
1/2=0...1
所以：1=0001(用最后商+余数,位数不够用0凑齐)
数字：2
2/2=1...0
所以：2=0010
数字：3
3/2=1...1
所以：3=0011
数字：4
4/2=2...0
2/2=1...0
所以:4=0100
数字：5
5/2=2...1
2/2=1...0
所以：5=0101
....
数字：12
12/2=6...0
6/2=3 ...0
3/2=1 ...1
所以 12=1100
十进制转二进制（从右往左依次用二进制位上的数字乘以2的n次幂的和（n大于等于0））
0 0 0 1
0*2³ 0*2² 0*2¹ 1*2º
=0+0+0+1
=1
以此内推
0010=0*0+1*2+0*0+0*0=0+2+0+0=2
0011=1*1+2*1+0*0+0*0=1+2+0+0=3
0100=0+0+1*4=4
0101=1+0+4+0=5
1100=0+0+1*4+1*8=12
复习完以上内容就可以开始了解位运算了
位运算概览:
符号 描述 运算规则
符号 描述 运算规则
& “与” 两个位都为1时，结果才为1
| “或 ” 两个位都为0时，结果才为0
^ “异或” 两个位相同为0，相异为1
~ “取反” 0变1，1变0
<< “左移” 各二进位全部左移若干位，高位丢弃，低位补0
“右移” 各二进位全部右移若干位，高位补0或符号位补齐
前端需求如下
接口中有个返回字段为:
tags: number; //标签(位图数据)：1:置顶，2:精华，4:热门
定义枚举
export enum eGuideTag {
// TOP = 1, //置顶
// HOT = 4, //热门
// ESSENCE = 2, //精华
TOP = 1 << 0, //置顶
ESSENCE = 1 << 1, //精华
HOT = 1 << 2, //热门
}
<div>
<span class="top" v-if="(item.tags & top) == top" />
<span class="sift" v-if="(item.tags & essence) == essence" />
<span class="hot" v-if="(item.tags & hot) == hot" />
</div>
分析：
枚举中的每个值通过 左移运算（1 << n） 生成，对应二进制中的 唯一一位 为 1，其余位为 0：
TOP = 1 << 0：十进制值为 1，二进制为 0001。
ESSENCE = 1 << 1：十进制值为 2，二进制为 0010。
HOT = 1 << 2：十进制值为 4，二进制为 0100。
假设 item.tags=1 0001 & 0001=1
item.tags=2 0010 & 0010=0010=2
item.tags=5 item.tags & top=0101 & 0001=0001=1
item.tags & hot=0100 & 0100=0100=4
0101 & 0100=0100=4
0 & 0 =0
1 & 1 =1
0 & 0 =0
1 & 0 =0
结论：当tags=1 显示
<span class="top" v-if="(item.tags & top) == top" />
当tags=2 显示
<span class="sift" v-if="(item.tags & essence) == essence" />
当tags=5 显示
<span class="top" v-if="(item.tags & top) == top" />
<span class="hot" v-if="(item.tags & hot) == hot" />
同理>>是向右移动
其它
按位与运算符（&）
0 & 0 = 0
0 & 1 = 0
1 & 0 = 0
1 & 1 = 1
分析： 只有两位同时为1时，结果才为1，否则结果为0。
例如：3 & 5 即 0000 0011 & 0000 0101 = 0000 0001，因此 3 & 5 的值为1。
0 | 0 = 0
0 | 1 = 1
1 | 0 = 1
1 | 1 = 1
分析： 只要有一个为1，其值为1。
例如：3 | 5 即 0000 0011 | 0000 0101 = 0000 0111，因此 3 | 5 的值为7。
注意：负数按补码形式参与按位或运算。
0 ^ 0 = 0
0 ^ 1 = 1
1 ^ 0 = 1
1 ^ 1 = 0
分析：相应位相同为0，相异为1。
取反运算符（~）
~1
原码32位表示：0000 0000 0000 0000 0000 0000 0000 0001
取反： 1111 1111 1111 1111 1111 1111 1111 1110
将 0 变 1，1 变 0。
补码转十进制（负数的补码计算）
取反后的二进制是 负数的补码，需转换为十进制
补码转原码：
符号位（最高位）为 1，表明是负数。
对补码除符号位外的所有位取反，再加 1，得到原码
补码： 1111 1111 1111 1111 1111 1111 1111 1110
取反（除符号位）：1000 0000 0000 0000 0000 0000 0000 0001
加1： 1000 0000 0000 0000 0000 0000 0000 0010
所以 ~1 = -2
按位取反的本质是：~n = -(n + 1)，可通过公式快速验证
