二进制数的妙用

　　最近遇到了这么一个问题： 如何解析一个二进制计算得来的十进制并使用，场景是这样的： 一个购物平台， 商家可以发布商品（在商家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这个数组就是没有问题的了。