二进制数的妙用

  最近遇到了这么一个问题: 如何解析一个二进制计算得来的十进制并使用,场景是这样的: 一个购物平台, 商家可以发布商品(在商家APP中), 并选择他可以接受的支付方式,如线下支付、支付宝、微信、银联以及我的钱包支付。如果选择了使用前面三者支付,那么后端就会传来00111这个二进制表示的十进制7, 如果这五种方式都是支持的,那么后端会传来11111这个二进制表示的十进制31,然后前端需要将这三种支付方式显示在页面上,并且如果用户选择了支付宝支付,那么前端向后台传参数2, 如果用户选择了使用微信支付,那么前端向后台选择传递4,这个很容易理解,即1代表有,0代表无。 但是我这边应该怎么操作呢? 

 

(31).toString(2).split("").map(function (value) { return Number(value) });
[1, 1, 1, 1, 1]

这样,我们就可以根据这个数组中的值是否为1来决定是否显示相应的支付方式了,当用户选择了相应的值后,我们可以根据其index值来使用2的index次方来传递。

当然,只是这样简单的匹配一定是要出问题的。因为这里是31倒是好说,如果是7呢? 那么得到的就是[1,1,1], 这样和select下的option就没有办法正确匹配了。 

如下所示:

  <span class="left">支付方式</span>
      <select name="payStyle" id="select">
        <option value="1" v-if="payArr[4] == 1" >线下支付</option>
        <option value="2" v-if="payArr[3] == 1" selected="">支付宝</option>
        <option value="4" v-if="payArr[2] == 1">微信支付</option>
        <option value="8" v-if="payArr[1] == 1">银联支付</option>
        <option value="16" v-if="payArr[0] == 1">我的钱包支付</option>
      </select>

即这样,从7的到的[1,1,1]就无法正确的匹配,我们希望显示线下支付、支付宝支付、微信支付, 但最后的显示方式是微信支付、银联支付和我的钱包支付。 

所以,一种方法是如果得到的长度小于5,我们就利用unshift的方式在头部添加0作为补充,另一种方式如下:

      <span class="left">支付方式</span>
      <select name="payStyle" id="select">
        <option value="1" v-if="payArr[payArr.length - 1] == 1" >线下支付</option>
        <option value="2" v-if="payArr[payArr.length - 2] == 1" selected="">支付宝</option>
        <option value="4" v-if="payArr[payArr.length - 3] == 1">微信支付</option>
        <option value="8" v-if="payArr[payArr.length - 4] == 1">银联支付</option>
        <option value="16" v-if="payArr[payArr.length - 5] == 1">我的钱包支付</option>
      </select>

即如上所示: 我们使用payArr.length - 1作为index,数组为[1,1,1]时,那么线下支付对应的就是payArr[2], 支付宝对应的就是payArr[1], 微信支付对应的就是payArr[0], 剩下的两个是payArr[-1]和payArr[-2], 他们都是undefined,所以个人认为这种方法还是非常简洁的。

补充:使用unshift()的实现方法:

同样的我们通过(31).toString(2).split("").map(function (value) { return Number(value) });的方式得到一个数组如 resultArr, len= resultArr.length,接着 var i = 0; while( i < 5 - resultArr.length ) { resultArr.unshift(0); i++ } ,然后再使用resultArr这个数组就是没有问题的了。

  

原文地址:https://www.cnblogs.com/zhuzhenwei918/p/6979244.html