JavaScript整数置位异常：勾选复选框后结果始终为0求助

我是JavaScript新手，尝试根据复选框是否勾选为一个整数设置4个二进制位。我找到了setBit函数来实现置位逻辑，但输出结果n始终为0，不清楚问题出在哪里，恳请帮助。

我的代码如下：
JavaScript代码：

function setBit(number, bitPosition) {
  return number |= 1 << bitPosition;
}

function checkCheckbox() {
  var one = document.getElementById("one");
  var two = document.getElementById("two");
  var three = document.getElementById("three");
  var four = document.getElementById("four");
  var n = 0

  if (one.checked == true) {
    setBit(n, 0)
  }

  if (two.checked == true) {
    setBit(n, 1)
  }

  if (three.checked == true) {
    setBit(n, 2)
  }

  if (four.checked == true) {
    setBit(n, 3)
  }

  return document.getElementById("out").innerHTML = n;
}

HTML代码：

<h2>Numbers</h2>
<br>
<p>
  1? <input type="checkbox" id="one" value="1"><br>
  2? <input type="checkbox" id="two" value="2"><br>
  3? <input type="checkbox" id="three" value="3"><br>
  4? <input type="checkbox" id="four" value="4">
</p>
<br> <br>
<button onclick="checkCheckbox()">Submit</button> <br>

<h3 style="color:green" id="out"></h3>

问题原因 #

JavaScript中数字属于基本数据类型，函数参数传递时是按值传递的。你调用setBit(n, 0)时，只是把n的当前值（0）复制了一份传给函数内部的number变量，函数内部修改的是这个副本，并不会影响外部的n变量，所以最后n始终是初始值0。

解决方法 #

方法一：接收setBit的返回值更新n #

修改调用逻辑，把setBit返回的新值赋值给n，这样外部的n才会被更新：

function setBit(number, bitPosition) {
  return number | (1 << bitPosition); // 用|和|=效果一致，写法更直观
}

function checkCheckbox() {
  var one = document.getElementById("one");
  var two = document.getElementById("two");
  var three = document.getElementById("three");
  var four = document.getElementById("four");
  var n = 0

  if (one.checked) {
    n = setBit(n, 0);
  }

  if (two.checked) {
    n = setBit(n, 1);
  }

  if (three.checked) {
    n = setBit(n, 2);
  }

  if (four.checked) {
    n = setBit(n, 3);
  }

  document.getElementById("out").innerHTML = n;
}

方法二：直接在函数内处理置位逻辑（更简洁） #

可以去掉单独的setBit函数，直接在checkCheckbox里完成位运算，减少函数调用的冗余：

function checkCheckbox() {
  var one = document.getElementById("one");
  var two = document.getElementById("two");
  var three = document.getElementById("three");
  var four = document.getElementById("four");
  var n = 0

  if (one.checked) n |= 1 << 0;
  if (two.checked) n |= 1 << 1;
  if (three.checked) n |= 1 << 2;
  if (four.checked) n |= 1 << 3;

  document.getElementById("out").innerHTML = n;
}

额外优化 #

代码中的if (one.checked == true)可以简化为if (one.checked)，因为checked属性本身就是布尔值，无需再和true做比较。

内容的提问来源于stack exchange，提问作者Aleph