JavaScript中[]语法的数组特性与processInputs([numberInput])参数处理疑问

嘿，这个问题我刚折腾DOM操作的时候也懵过，咱们一步步把它理明白：

首先得先纠正一个小误解：numberInput本身绝对不是数组或者NodeList！document.getElementById()的返回值永远是单个DOM元素（这里就是那个<input>元素对象），只有像document.querySelectorAll()这种方法才会返回NodeList。

那问题出在哪呢？咱们看[numberInput]这个写法——这是JavaScript里的数组字面量语法，意思是「创建一个新的数组，把numberInput作为这个数组的第一个（也是这里唯一一个）成员」。所以你调用processInputs([numberInput])的时候，传给函数的参数是一个包含了DOM元素的数组，而不是numberInput本身被识别成了数组。

再看你写的processInputs函数：它接收list参数后，会循环遍历这个数组里的每一项。但这里数组里的项是DOM元素numberInput，不是输入框里的数值！所以当你执行total += item的时候，本质是把DOM元素对象和数值0做累加，这时候JavaScript会把DOM对象转换成对应的原始值（通常是NaN，因为DOM对象没法直接转成有效数字），这可能会让你误以为是numberInput本身是数组，但其实是你把它包装成数组传进去了~

如果你的目标是累加输入框里的数值，正确的传参应该是把输入框的数值取出来再包装成数组，比如：

processInputs([Number(numberInput.value)])

这样数组里的元素就是输入框对应的数字，函数的累加逻辑就能正常工作啦。

备注：内容来源于stack exchange，提问作者PatW