JS数组indexOf()无法匹配输入框数字值的问题排查

<input>元素的value属性返回值固定为字符串类型，即便设置了type="number"，获取到的用户输入也不会自动转为Number类型。
Array.indexOf() 匹配时使用严格相等运算符（===）做比对，不会触发隐式类型转换，只有值和类型完全一致才会判定匹配：

• 输入1、2、4时，获取到的x是字符串"1"、"2"、"4"，和数组内存储的数字类型1、2、4类型不同，比对不通过，因此返回-1
• 输入3时，获取到的x是字符串"3"，和数组索引2位置存储的字符串"3"值、类型完全一致，因此匹配成功
• 直接在代码中写var x = 2时，x是数字类型，和数组内的数字2满足严格相等条件，因此可以正常匹配

将输入框获取到的值主动转为数字类型后再做匹配即可，常用的转换方式有三种：

• 用Number()做显式类型转换
• 用一元加号+做快速转换
• 整数场景用parseInt()、浮点数场景用parseFloat()转换

修复后的完整代码：

<p><input type="number" id="inNum"></p>
<button onclick="indexCheck()">Check</button>
<p id="result"></p>

<script>
var arr = [1, 2, "3", 4];

function indexCheck() {
    // 输入值转数字后再匹配
    var x = Number(document.getElementById("inNum").value);
    var ind = arr.indexOf(x);
    document.getElementById("result").innerHTML = ind;
}
</script>

补充提示：如果输入框为空，转换后会得到NaN，由于NaN和任何值都不相等（包括它自身），实际使用时建议提前加输入合法性校验，避免返回不符合预期的结果。

内容的提问来源于stack exchange，提问作者Dix1