如何将（二进制）整数转换为数组？

Question

我在HTML代码中有以下的表单选择字段 -

<select multiple class="form-control" name="uploadSites[]" id="uploadSitesDecoded">
    <option value="1">Site 1</option>
    <option value="2">Site 2</option>
    <option value="4">Site 3</option>
    <option value="8">Site 4</option>
    <option value="16">Site 5</option>
    <option value="32">Site 6</option>
</select>

现在我想根据整数值预先选择选项，例如值15应该预先选择站点1、2、3和4。

据我所知，可以使用jQuery触发方法来实现此操作。

$('#uploadSitesDecoded').val([1,2,4,8]).trigger('change');

我想要做的是将数字15转换成字符串或数组，形式为1、2、4、8（除非有更简单的方法）。

- secdave

---

以防有像我一样猜测转换公式的人，请问您能详细说明期望对15或任何数字运行的逻辑，以获得结果数组吗？目前为止，我只看到1+2+4+8=15，但这只是我的猜测。 - Taplar

“涉及选择”这个事实是次要的。问题的核心在于数字转换。 - isherwood

这些是二进制值，例如1111（=15）表示网站1、2、3和4。 - secdave

为什么这似乎像是一个写C语言的人进入了Web开发，并决定使用布尔掩码来表示选项，而不是发送数组？ - VLAZ

我不是C开发人员 :) 实际上，我在业余时间写这个来学习 :) 我只想将单个值存储到数据库中，而不是所有选项。 - secdave

Answer 1

parseInt(n, 10).toString(2)

这将给出n的逐位表示，然后您可以逐个字符地循环它以获取相应的2的幂值：

let n = 15; // The number you want to turn into an array of power of 2
let array = [];
let binaryRepresentation = parseInt(n, 10).toString(2);
binaryRepresentation = binaryRepresentation.split("").reverse().join(""); // You need to reverse the string to get the power of 2 corresponding
for(let i = binaryRepresentation.length - 1; i >= 0; i--){
     if(binaryRepresentation[i] == 1){
         array.push(Math.pow(2, i));
     }
}
console.log(array); // Check the array

这个例子将给你[8, 4, 2, 1]

。

- R.Duteil

---

谢谢！几乎符合我想要的，但是看起来6会返回[2,1]。 - secdave

我的错，你需要反转字符串，我编辑了我的答案。现在应该按预期工作，但如果出现问题，请不要犹豫告诉我。 - R.Duteil

Answer 2

实现该功能的一种可能方法是使用toString(2)将整数值转换为二进制字符串。然后，您可以循环遍历字符串，并根据字符串索引设置匹配的option为selected，如果该值为1。代码示例如下：

$('input').on('input', function() {
  var $options = $('#uploadSitesDecoded option');
  var binaryString = parseInt(this.value, 10).toString(2);
  binaryString.split('').reverse().forEach(function(n, i) {
    $options.eq(i).prop('selected', n === '1');
  });
}).trigger('input');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" value="1" min="0" max="63" /><br />
<select multiple class="form-control" name="uploadSites[]" id="uploadSitesDecoded" size="8">
  <option value="1">Site 1</option>
  <option value="2">Site 2</option>
  <option value="4">Site 3</option>
  <option value="8">Site 4</option>
  <option value="16">Site 5</option>
  <option value="32">Site 6</option>
</select>

- Rory McCrossan

Answer 3

看起来您正在尝试查找以下条件的数字数组：

1. 2的幂（2^n）
2. 小于15

您可以使用Array.filter来实现此目的

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

let powerOfTwo = [1, 2, 4, 8, 16, 32, 64]

let result = powerOfTwo.filter(function(item) {
  return item < 15
})

// the result should be [1, 2, 4, 8]

- Tzeng Alex

---

事实证明，OP实际上正在寻找一个值数组，该数组表示输入值的二进制等效值中的1位。这意味着，如果输入值为“6”而不是“15”，OP需要一个数组[2, 4]，而您提出的方法将产生一个数组[1, 2, 4]。不过不用担心，目前问题细节中OP的目标并不是非常清楚，您的答案是在问题中产生示例输出的一种好的简单方法。 - benvc

Answer 4

我不确定这是否是最优的方法，但这是我的解决方案。 首先将给定的整数转换为二进制，然后翻转它。然后循环遍历二进制中的1。

function dec2bin(dec){
    return (dec >>> 0).toString(2);
}

function reverseString(str) {
    return str.split("").reverse().join("");
}

$(document).ready(function() {
  var binary = reverseString(dec2bin(15));
  var values = [];
  var step = 1;
  
  for (var i = 0; i < binary.length; i++) {
    if(parseInt(binary.charAt(i)) === 1){
      values.push(step);
    }
    step *=2;
  }
  
  $('#uploadSitesDecoded').val(values).trigger('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select multiple class="form-control" name="uploadSites[]" id="uploadSitesDecoded">
    <option value="1">Site 1</option>
    <option value="2">Site 2</option>
    <option value="4">Site 3</option>
    <option value="8">Site 4</option>
    <option value="16">Site 5</option>
    <option value="32">Site 6</option>
</select>

- T. Dirks