二进制的巧用

12 阅读1分钟

今天对接一个第三方的接口的时候有一个参数是这样子的: 七位数字0000000,第一位到第七位分别表示周一到周末,每一位上0表示没有选中,1表示选中,就是一个多选的功能

image.png

前端页面的表单中如何设计这个多选功能呢?

一般的select组件都是这样子,然后绑定选中的值都是无序list

const options = [{
    key:'周一'value:'0' //从0开始正好可以表示下标
    ...
}]

然后定义一个7个0的数据通过下表修改对应的数据,再将修改后的数据合并。这是一般做法 image.png

当我看到这个参数的描述后 我第一反应是二进制

之前刷抖音的时候看到过一个案例使用二进制来做权限控制 二进制的每一位代表着一种权限。以此类推,在这里正好一样,每一位都代表着一天。下面是我设置的select的options

const eqWeekOption = [
  {
    text: '周一',
    value: '1000000',
  },
  {
    text: '周二',
    value: '0100000',
  },
  {
    text: '周三',
    value: '0010000',
  },
  {
    text: '周四',
    value: '0001000',
  },
  {
    text: '周五',
    value: '0000100',
  },
  {
    text: '周六',
    value: '0000010',
  },
  {
    text: '周日',
    value: '0000001',
  },
];

然后我们会得到一个选中的list的,然后将选中的list的十进制相加在转换成二进制就可以了,但是需要注意的是转成二进制的时候会改变长度需要补零。

是不是感觉这种形式更高大上点 嘿嘿嘿!!!