Question

这是我的html：

<div id='test'>
<input name="M1" size="3" value="1">
<input name="M2" size="3" value="2">
<input name="M3" size="3" value="3">
</div>

这是我的JavaScript：

var test = document.getElementById('test');
var arr = test.querySelectorAll('input');
var arr2 =[];
for (i in arr) {arr2.push(arr[i].value) ;}

这是我的最终数组arr2：

["1","2","3",undefined,undefined,undefined,undefined,undefined,undefined]

问题在于arr.length为3，而arr2.length为9，六个元素未定义。您能解释一下为什么以及实现它的更好方法吗？

Answer 1

JavaScript中的for..in循环遍历对象的 enumerable 属性。在这里，您尝试在{strong>不是数组的for..in上使用arr，它是一个NodeList（因为这是querySelectorAll的返回值）。 / p>

NodeList具有以下可枚举的属性：

0
1
2
length
item
entries
forEach
keys
values

如您所见，它不仅包含arr的索引，还包含所有可枚举的属性。这意味着您的for..in循环将经历所有这些循环。这就是为什么您在数组中获得undefined的原因，例如arr['length'].value会给您undefined。对于循环NodeList，可以使用常规的for循环，for..of循环或NodeList.prototype.forEach()：

const test = document.getElementById('test');
const nodes = test.querySelectorAll('input');
const arr2 = [];
for (const input of nodes) {
  arr2.push(input.value);
}
console.log(arr2);

<div id='test'>
  <input name="M1" size="3" value="1">
  <input name="M2" size="3" value="2">
  <input name="M3" size="3" value="3">
</div>

作为旁注，如果您尝试从输入中构建value的数组，则可以将Array.from()与NodeList上的映射功能一起使用，如下所示：

const test = document.getElementById('test');
const nodes = test.querySelectorAll('input');
const arr2 = Array.from(nodes, ({value}) => value);
console.log(arr2);

<div id='test'>
  <input name="M1" size="3" value="1">
  <input name="M2" size="3" value="2">
  <input name="M3" size="3" value="3">
</div>

Answer 2

forEach应该可以工作：

var test = document.getElementById('test');
var arrInput = test.querySelectorAll('input');
var arr2 = [];

arrInput.forEach(element => {
    arr2.push(element.value);
})
console.log(arr2)

<body>
    <div id='test'>
        <input name="M1" size="3" value="1">
        <input name="M2" size="3" value="2">
        <input name="M3" size="3" value="3">
    </div>
</body>

for循环后输出数组的长度大于输入数组的长度（未定义的值）

2 个答案: