Javascript数组值出现两次

嗨，我希望有人能帮助我。我有5个输入框，我从这些框中获取值，并将它们放入JavaScript中的数组中，然后按字母顺序对这些值进行排序，这非常有效。问题在于，由于某种原因，当将值放入数组时，它会将值加倍，并给出两次值。任何帮助都将不胜感激。谢谢

<form>
   *Choice A
    <input type="text" maxlength="100" name="cha" class="answer" rows="1" cols="10">

    *Choice B
    <input type="text"  maxlength="100" name="chb" class="answer" rows="1" cols="10">

    *Choice C
    <input type="text" maxlength="100" name="chc" class="answer" rows="1" cols="10" >

    *Choice D
    <input type="text" maxlength="100" name="chd" class="answer" rows="1" cols="10" >

    *Choice E
    <input type="text" maxlength="100" name="che" class="answer" rows="1" cols="10" >

    <input type = "button" id="myBtn" onclick="myFunction()" value ="Selection Sort in Ascending Order">
    <br/>
    <div id="showInputValues">
    </div>
</form>

下面是Javascript：

<script language="javascript">
    var getBtn = document.getElementById('myBtn');
    getBtn.onclick = function() {
        getTheData() ;
    }

    function getTheData() {
        var answer = document.getElementsByClassName("answer");
        var inputValues = new Array();

        for (var i in answer) {
            //extract the value of input elements
            var singleVal = answer[i].value;
            if (singleVal !== "" && singleVal !== undefined) {
                inputValues.push(singleVal);
            } 
        }
        console.log(inputValues);
        inputValues.sort();
        //Display sorted values on form
        console.log(inputValues);
        alert( inputValues);
        // set the sorted values :
        for (var i=0;i<inputValues.length;i++) {
            //extract the value of input elements
            console.log(i);
            console.log(inputValues[i]);
            answer[i].value = inputValues[i];
        }
    }
</script>

---

这个循环的问题在于：

for (var i in answer) {
    //extract the value of input elements
    var singleVal = answer[i].value;
    if (singleVal !== "" && singleVal !== undefined) {
        inputValues.push(singleVal);
    }
}

我可能对这个解释有点不理解，但答案变量来自一个文档。getElementsByClassName。。。它返回一个节点列表。NodeList包含元素两次，一次包含索引，一次包含name属性。这就是为什么循环会在集合中找到每个元素中的两个

如果您将其更改为传统的for循环，它将起作用：

for (var i = 0; i < answer.length; i++) {
    ...
}

---

这是因为返回类似数组的对象，而不是实际数组。如果您使用console.diranswer，您将看到，除了在数组中可以找到的数字键之外，该对象每个命名元素都有一个键。循环对象上的每个属性，因此您将获得两次值。

请以一致的方式格式化代码。如果代码格式不正确，则更难理解、调试和检查语法错误。如果你的问题格式正确，人们也会对你的问题做出更积极的回应。像这样的工具可以帮助您正确格式化代码。预期的行为是，用户将在输入字段中输入5个选项，然后单击按钮后，这些值将放入数组并按字母顺序排序，然后新排序的值将显示在输入字段中。例如，如果我输入苹果、香蕉、橘子、梨、斑马。排序后的值将是Apple，Apple，Bananna，Bananna，Orange，Orange，Pear，Pear，Zebra，Zebra。我只是想问有人能解释一下为什么价值翻了一番。感谢rudeTo的精心设计，节点会重复，首先是索引0、1、2、3、4，然后是cha、chb、chc、chd、che。通过切换到上面描述的整数索引，你只会找到前5个。谢谢，这实际上让事情变得更清楚了。改回传统的for循环解决了这个问题。谢谢你的精彩解释！！这是对正在发生的事情的更好的解释。谢谢你的帮助。很高兴了解for in循环，这些信息对未来肯定有帮助。我很感激。我无意中发现了这个，想知道我是如何在React中得到同样的钥匙的。。。不管怎样，就像这个答案所说的，您看到的是一个类似HTMLCollection数组的对象。您可以：Array.fromHTML集合将其转换为数组。