为什么 Javascript 等于 5 == 8 为真？

Question

所以我有 2 个复选框：

var statusList = [];
function updateStatusString(x) {
    if (statusList != null) {
        if (statusList.length > 0) {
            for (var i = 0; i < statusList.length; i++) {
                if (parseInt(statusList[i]) == parseInt(x)) {
                    statusList[i] = 123;
                } else {
                    statusList.push(x);
                }
            }
        } else {
            statusList.push(x);
        }
    }
    alert(statusList);
}

<label>&nbsp;<input type="checkbox" name="Active" value="5" onchange=updateStatusString("5")>&nbsp;"Active"</label>
<label>&nbsp;<input type="checkbox" name="NonActive" value="8" onchange=updateStatusString("8")>&nbsp;"Active"</label>

当我点击一个复选框时，它会将它添加到 JavaScript 列表中，如果它已经在列表中，我想用另一个值（在本例中为 123）覆盖它。

但是当我点击第二个时（不管顺序，第二个元素由于某种原因总是123。

如果我单击顶部的复选框，我希望它会是一个包含“5”的列表，然后单击第二个复选框，我希望它是 5,8，但它会以5,123 提醒，不要真的明白为什么要这样做，因为5==8 是错误的......有什么想法吗？

更新算法以解决潜在问题：

万一有人发现这很有用，我将算法更改为更好的替代方案：

var statusList = [];
function updateStatusString(x) {
    if (statusList.length > 0) {
        if (statusList.includes(x)) {
            var idx = statusList.indexOf(x);
            if (idx != -1) {
                statusList.splice(idx, 1);
            }
        }
        else {
            statusList.push(x);
        }
    } else {
        statusList.push(x);
    }
    alert(statusList);
}

Answer 1

第一次迭代：

由于状态列表为空，因此您在其中添加 5，

第二次迭代：

statulsList = [5]

你加了 8 所以现在 statusList 的值是 [5,8] 这意味着长度也是 2，

所以我们有第三次迭代，在这种情况下 8 === 8 。

如果您想要不同，请在添加列表中的其他项目之前保存状态列表的长度。

var statusList = [];
function updateStatusString(x) {
    if (statusList != null) {
        if (statusList.length > 0) {
           var lengthStat = statusList.length;
            for (var i = 0; i < lengthStat; i++) {
                if (parseInt(statusList[i]) == parseInt(x)) {
                    statusList[i] = 123;
                } else {
                    if(! (statusList.indexOf(x) != -1))
                        statusList.push(x);
                }
            }
        } else {
            statusList.push(x);
        }
    }
    alert(statusList);
}

<label>&nbsp;<input type="checkbox" name="Active" value="5" onchange=updateStatusString("5")>&nbsp;"Active"</label>
<label>&nbsp;<input type="checkbox" name="NonActive" value="8" onchange=updateStatusString("8")>&nbsp;"Active"</label>

Answer 2

因为您正在迭代 statusList。在第一次迭代中，您检查是否 5 == 8，然后移动到 else 部分并在 statusList 中插入 8。您的 statusList 是 = [5, 8]。对于下一次迭代，这将变为真的statuslist[i] 将是 8 和 8===8 并且您的语句 - statusList[i] = 123; 将用123 替换最后插入的8value。因此，您的 statusList 数组将具有 ["5", 123]。

var statusList = [];

function updateStatusString(x) {
  const input = parseInt(x);
  if (statusList != null) {
    if (statusList.includes(input)) {
      const idx = statusList.indexOf(input);
      statusList[idx] = 123;
    } else {
      statusList.push(input);
    }
    alert(statusList);
  }
}

<label>&nbsp;<input type="checkbox" name="Active" value="5" onchange=updateStatusString("5")>&nbsp;"Active"</label>

<label>&nbsp;<input type="checkbox" name="NonActive" value="8" onchange=updateStatusString("8")>&nbsp;"Active"</label>

Answer 3

看起来是循环导致了您的问题。

1. 您正在检查 x 是否存在，在第一个循环中是错误的
2. 你把它推到了数组中
3. 第二个循环，它存在并被替换为 123

您可以通过删除其中一项 if 检查并使用 array.prototype.includes 而不是循环和检查相等性来显着简化您的代码。

编辑：添加了第三个输入来演示添加了 123。

var statusList = [];
function updateStatusString(x) {
    if (statusList != null) {
      if (statusList.includes(x)) {
          statusList[statusList.indexOf(x)] = 123;
      } else {
          statusList.push(x);
      }
    }
    
    alert(statusList);
}

<label>&nbsp;<input type="checkbox" name="Active" value="5" onchange=updateStatusString("5")>&nbsp;"Active"</label>
<label>&nbsp;<input type="checkbox" name="NonActive" value="8" onchange=updateStatusString("8")>&nbsp;"Active"</label>
<label>&nbsp;<input type="checkbox" name="NonActive" value="8" onchange=updateStatusString("5")>&nbsp;"Active"</label>