Angular技术疑问：Number.isNaN对非空字符串返回false？下拉框逻辑问题

嘿，让我来帮你拆解这两个问题～

问题一：为什么Number.isNaN对非空字符串返回false？ #

这其实是因为Number.isNaN()和全局的isNaN()函数行为完全不同，很多开发者一开始都会搞混它们：

• Number.isNaN()是个“严格派”：它只认参数本身就是NaN类型的情况，才会返回true。非空字符串（比如"abc"、"123"）本质是string类型，根本不是NaN，所以它自然返回false。
• 而全局的isNaN()就宽松多了，它会先把参数强制转换成数字，要是转换结果是NaN，就返回true。比如isNaN("abc")会先把"abc"转成数字NaN，所以返回true，但这是转换后的状态，不是原参数本身的样子。

给你举几个直观的例子，一看就懂：

console.log(Number.isNaN("test")); // false，"test"是字符串，不是NaN
console.log(isNaN("test")); // true，"test"转数字后变成了NaN
console.log(Number.isNaN(NaN)); // true，只有这种本身就是NaN的情况才会返回true
console.log(Number.isNaN(123)); // false，数字当然不是NaN

问题二：下拉框变更逻辑异常的解决方案 #

你的逻辑异常根源就在Number.isNaN(id)这里。当用户选择默认选项时，传入的id是字符串"Please select an option"，但Number.isNaN()因为它是字符串类型，直接返回false，导致代码跑进else分支，把这个字符串赋值给了selectedIndex，这显然和你的预期不符。

这里有几个简单的修复方案，你可以根据场景选：

方案一：直接判断默认字符串（最直观） #

既然知道默认选项的固定值，直接判断这个字符串就行：

onDropdownChange(id: string | number) {
  if (id === "Please select an option") {
    this.selectedIndex = null;
    this.isItemSelected = false;
  } else {
    // 万一框架传的是字符串形式的数字（比如"2"），可以转成数字类型
    this.selectedIndex = typeof id === 'string' ? parseInt(id, 10) : id;
    this.isItemSelected = true;
  }
}

方案二：转成数字后再判断NaN #

要是你想保留类似的NaN判断逻辑，可以先把id转成数字，再用Number.isNaN检查：

onDropdownChange(id: string | number) {
  const numericId = Number(id);
  if (Number.isNaN(numericId)) {
    this.selectedIndex = null;
    this.isItemSelected = false;
  } else {
    this.selectedIndex = numericId;
    this.isItemSelected = true;
  }
}

这样当id是默认字符串时，Number(id)会转成NaN，Number.isNaN(numericId)就会返回true，顺利进入正确的分支。

小建议 #

别用any当参数类型啦，换成string | number更明确，TypeScript能帮你提前揪出类型相关的问题，避免踩坑～

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