10.位运算(&、|、^、~、>>、<<)在实际开发中的应用

& 和 |

前置知识

1. &：与运算符 运算规则：两位同时为1，结果才为1，否则结果为0。

0&0=0  0&1=0  1&0=0  1&1=1

2. |：或运算符 运算规则：参加运算的两个对象只要有一个为1，其值为1。

0^0=0  0^1=1  1^0=1  1^1=0

应用

1. 状态管理 如 React Reconciler 中使用二进制来表示虚拟 Dom 状态 类似：

export const Placement = /*             */ 0b0000000000010;
export const Update = /*                */ 0b0000000000100;
export const PlacementAndUpdate = /*    */ 0b0000000000110;
export const Deletion = /*              */ 0b0000000001000;

如何理解？

假设我们有一个简单的组件，它有三种状态：可见性（Visible）、激活状态（Active）、和禁用状态（Disabled）。 可见性：1(0b001) 激活状态：10(0b010) 禁用状态：100(0b100)

我们想表示这个组件既是可见的又是激活的，该怎么判断？

首先，用或运算符运算到 status 上

1. 设置可见性：status |= 0b001 (将1按位或运算到 status 上)
2. 设置激活状态：status |= 0b010 (将10按位或运算到 status 上) 此时：，status 为 0b011。

实际使用位运算来检查组件的状态：

通过与运算，判断结果是否为 0，即0b000。

检查是否可见：status & 0b001，如果结果不为0，则表示组件是可见的。(结果为0b001，可见状态) 检查是否激活：status & 0b010，如果结果不为0，则表示组件是激活的。(结果为0b010，激活状态) 检查是否禁用：status & 0b100，如果结果不为0，则表示组件是禁用的。(结果为0b000，目前是非禁用的)

总结：

1. 假设有三个状态，那么需要有三个位数的二进制符来表示状态，如(0b000);
2. 通过目前状态(如0b011表示即在可见又是激活)，与期望状态(如0b001),进行与运算。如果结果不为 0，则表示是可见状态。

将上面的状态封装为 js 代码

const Visible = 0b001;
const Active = 0b010;
const Forbidden = 0b100;
function isVisible(status){
    return status & Visible !== 0 
}
// .....

^：异或运算符

运算规则：参加运算的两个对象，如果两个相应位相同为0，相异为1。