使用位运算管理类型或状态

925 字

5 分钟

使用位运算管理类型或状态

2025-09-05

无标签

前言
在许多场景，尤其前端组件库开发中，使用位运算管理类型/状态是一种非常高效和优雅的方式，特别适合处理”多状态共存” 或 “类型组合”。这种方式利用二进制位的独立性，通过位运算实现状态的组合、判断和修改，具有性能高、代码简洁、扩展性强的特点。

一、基本原理#

TIP
用二进制的每一位来代表一个独立的状态/类型，然后通过位运算(与、或、非、异或、与非等)来实现状态的判断/组合/切换等操作

每个状态 / 类型用 2^n（即 1 << n）表示，确保二进制中只有一位为 1（互不干扰）。

用一个数字（二进制）存储多个状态的组合（每一位代表该状态是否生效）。

通过位运算快速操作：

组合状态：|（或运算，叠加状态）

检查状态：&（与运算，判断是否包含某状态）

移除状态：& ~（与非运算，清除某状态）

切换状态：^（异或运算，反转某状态）

二、简单示例#

这里我们以一个Button组件状态管理场景举例：

1. 定义状态枚举#

1
// 每个状态对应一个二进制位
2
enum ButtonStatus {
3
    Disabled = 1 << 0,  // 1 二进制： 0001
4
    Loading = 1 << 1,  // 2 二进制： 0010
5
    Selected = 1 << 2,  // 4 二进制： 0100
6
    Highlight = 1 << 3  // 8 二进制： 1000
7
}

2. 状态操作方法#

1
class Button {
2
    private status: number = 0
3

4
    // 判断
5
    hasStatus(target: ButtonStatus): boolean {
6
        return (this.status & target) !== 0
7
    }
8

9
    // 组合：可同时添加多个
10
    addStatus(...states: ButtonStatus[]): void {
11
        states.forEach((state) => {
12
            this.status |= state
13
        })
14
    }
15

16
    // 删除：可同时移除多个
17
    removeStatus(...states: ButtonStatus[]): void {
18
        states.forEach((state) => {
19
            this.status &= ~state
20
        })
21
    }
22

23
    // 切换: 存在则移除，不存在则添加
24
    toggleStatus(state: ButtonStatus): void {
25
        this.status ^= state
26
    }
27
}

三、应用场景#

除了上面举例的场景外，还有很多类似的场景都可以考虑使用，比如：

1. 权限管理#

用位值表示不同权限（如查看、编辑、删除），用户的权限集合为多个位的组合，通过位运算快速判断是否有权限

1
enum Permission {
2
  View = 1 << 0,    // 1
3
  Edit = 1 << 1,    // 2
4
  Delete = 1 << 2,  // 4
5
  Admin = 1 << 3    // 8
6
}
7

8
// 用户权限：可以查看和编辑
9
const userPerms = Permission.View | Permission.Edit;
10

11
// 判断是否有权限删除
12
const canDelete = (userPerms & Permission.Delete) !== 0; // false

2.事件类型组合#

1
enum EventType {
2
  Click = 1 << 0,    // 点击
3
  Hover = 1 << 1,    // 悬浮
4
  Focus = 1 << 2     // 聚焦
5
}
6

7
// 监听「点击」和「聚焦」事件
8
const listenEvents = EventType.Click | EventType.Focus;
9

10
// 触发事件时判断类型
11
function handleEvent(type: EventType) {
12
  if (type & listenEvents) {
13
    console.log('处理点击');
14
  }
15
}

3.特征标记#

1
enum Feature {
2
  DarkMode = 1 << 0,   // 深色模式
3
  NewUI = 1 << 1,      // 新UI
4
  Beta = 1 << 2        // beta功能
5
}
6

7
// 为用户开启「深色模式」和「新UI」
8
const userFeatures = Feature.DarkMode | Feature.NewUI;
9

10
// 检查是否开启新UI
11
if (userFeatures & Feature.NewUI) {
12
  renderNewUI();
13
}