javascript 如果目标值项在数组中

icomxhvb  于 2023-04-04  发布在  Java
关注(0)|答案(1)|浏览(124)

我有一个属性的选择,其div id为property_id,传递了一个id值。我有一个事件侦听器,当用户选择属性时会触发。我想创建一个条件,检查属性选择是否在数组中。

document.getElementById('property_id').addEventListener('change', function (e) {
 var array = [1, 17, 20, 23, 87]
 var propertySelection = e.target.value;
 if (array.includes(propertySelection)) {
   //do stuff
 }
});

执行console.log(propertySelection)在选择属性时提供了正确的数字(即17,2,20等),但执行console.log(array.includes(propertySelection))在所有帐户上都输出false。为什么会这样?

hmmo2u0o

hmmo2u0o1#

问题是页面中的输入值总是以字符串的形式返回:

const val = document.getElementById('property_id').value;

console.log(val, typeof val)
<input type="number" value=20 id="property_id" />

这意味着当在数字数组上使用Array#includes()时,无法找到匹配项:

var array = [1, 17, 20, 23, 87];
var propertySelection = "20";

console.log(array.includes(propertySelection));

相反,从输入中获取数值的最直接方法是使用.valueAsNumber
一个三个三个一个
另一种方法是使用Number作为函数将字符串值转换为数字:

document.getElementById('property_id').addEventListener('change', function(e) {
  var array = [1, 17, 20, 23, 87]
  var propertySelection = Number(e.target.value);
  // convert to number    ^^^^^^^              ^
  if (array.includes(propertySelection)) {
    console.log("do stuff");
  } else {
    console.log("don't do anything");
  }
});
<input type="number" id="property_id" />

为了完整性,您还可以

  • a unary plus,这与调用Number完全相同。
  • parseFloat,基本上也是这样,但是parseFloat("123.4abc")123.4,而Number("123.4abc")+"123.4abc"将返回NaN
  • parseInt如果你只喜欢整数。

相关问题