js位运算的应用

57 阅读1分钟

背景

前端处理一个复杂表单 image.png 需要知道每个版本下的可选表单的选中情况。选中的情况有如下4种:

1. 两个附加的选项都不选。
2. 选中第一个附件的选项A。
3. 选中第二个附件项目B。
4. 两个都选中。

两个选项的选中情况,如果采用二进制表示:00两个都不选;01选中第一个选项;10选中第二个选项;11两个选项都选中。下面就是如何生成二进制。代码如下:

代码

<script>
    let data = 0;
    // 可以把第一个checked设置成true,表示第一个选项被选中
    let list = [{ checked: false }, { checked: false }];
    list.map((item, index) => {
        if (item.checked) {  
            data |= (1 << index)
        }
        console.log(data);
    });
</script>

代码解释

1. 第一个选项被选中(0001=1)

               8    4   2   1
  data         0    0   0   0
  1<<index     0    0   0   1
 -------------------------------
  |=           0    0   0   1

2. 第二个选项被选中(0010=2)

               8    4   2   1
  data         0    0   0   0
  1<<index     0    0   1   0
 -------------------------------
  |=           0    0   1   0

3. 两个选项都被选中(0011=3)

data经过第一个选项被选中,其值应当是0001

               8    4   2   1
  data         0    0   0   1
  1<<index     0    0   1   0
 -------------------------------
  |=           0    0   1   1

参考

juejin.cn/post/684490…