为什么Javascript将5 == 8等同为true?

时间:2019-06-11 09:26:20

标签: javascript html checkbox equality

所以我有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);
}

3 个答案:

答案 0 :(得分:10)

第一次迭代:

由于状态列表为空,因此您要在其中添加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>

答案 1 :(得分:7)

因为您要遍历statusList。第一次迭代时,检查5 == 8,然后移动到else部分,并将8插入statusList中。您的statusList为= [5,8]。对于下一次迭代,这是正确的statuslist[i]将是8和8 === 8,并且您的语句-statusList[i] = 123;将最后插入的8值替换为123。因此,您的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>

答案 2 :(得分: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>