详解在JavaScript中如何判断变量类型

JavaScript作为一门动态类型语言，在运行时获取变量类型是开发中的常见需求。然而，由于语言设计的历史原因，这一看似简单的操作在JavaScript中往往充满陷阱。社区中流传的许多测试案例表明，即便是经验丰富的开发者也常在此处出错。

如typeof NaN所示，该表达式会返回number，这可能与直觉相悖。在JavaScript中准确获取变量类型并非易事，正因如此，类型判断常被用作面试考题。鉴于程序由数据与算法构成，而基本数据类型是数据的基石，考察类型知识具有合理性。

若在面试中仅回答使用typeof获取类型，通常会被视为答案不完整。本文旨在全面系统地介绍JavaScript中的类型判断方法，帮助读者在工作中规避类型判断的潜在风险。若在面试中引用本文内容，将展现深厚的技术功底，从而获得面试官的认可。

我们将由浅入深，从简单示例开始逐步提升难度并拓展思路。首先来看第一个典型示例：

在实际工作中，针对数据为空的情况常采用防御式编程。一个常见误区是直接使用非运算符进行判断，但这可能引入隐患，因为它会将多种假值纳入判断范围。常见的假值包括0, '', false, null, undefined等。例如，在实现如下double函数时，若需对参数为空进行防御，直接使用非空运算符可能不够严谨。

function double(x) {
  // 0会被错误计算
  if (!x) {
    return NaN;
  }
  return x * 2;
}

另一种判空写法是直接与null和undefined进行比较，示例如下：

if (x === null || x === undefined) {
  return NaN;
}

尽管逻辑看似正确，但这种写法存在一个严重问题：在JavaScript中undefined并非关键字，而是window对象上的一个属性。在ECMAScript 5标准之前，该属性是可写的。若undefined被重新赋值，在旧版浏览器中会导致判断失效，示例如下：

window.undefined = 1;

// 判断不能生效
if (x === undefined) {
  console.log(111);
}

虽然现代浏览器已修复此bug，但若在词法作用域内存在名为undefined的变量，仍会引发问题，这被称为undefiined变量覆盖现象。例如在如下代码中，undefined的值被1覆盖，导致判断逻辑失效。

(function () {
  var undefined = 1;
  // 判断不能生效
  if (x === undefined) {
    console.log(111);
  }
})();

关于判空还有一种巧妙方法，即仅与null进行相等判断，利用隐式转换达到相同效果。由于null是关键字，不存在undefined被覆盖的问题。

// null 和 undefined都会判断
if (x == null) {
}

在全等运算符成为最佳实践的背景下，上述做法并不被广泛推荐。建议使用typeof来判断undefined，因为typeof通过内部类型判断机制运行，不存在undefined变量覆盖的风险。

if (x === null || typeof x === 'undefined') {
}

对于number类型，需特别注意一个特殊值NaN。NaN的类型也是number，但在编码中很少直接使用NaN，它通常在计算失败时产生。

然而，将NaN作为普通number使用时会报错，例如调用NaN上的toFixed方法时会抛出异常。更好的做法是添加isNaN的判断，需注意number类型的这一特殊逻辑。

const x = Math.sqrt(-1); // NaN

// 注意这里的isNaN判断
if (typeof x === 'number' && !isNaN(x)) {
  console.log(x.toFixed(2));
}

也可以使用ECMAScript 2015新增的Number.isNaN。与全局函数isNaN的区别在于，Number.isNaN不会自行将参数转换为数字。Number.isNaN的逻辑与下方代码类似，Number.isNaN是更优的建议，但需注意兼容性问题。

Number.isNaN = function (value) {
  return typeof value === 'number' && isNaN(value);
};

typeof只能判断基本类型，对于引用类型的值，其返回结果均为object。

typeof []; // 'object'
typeof {}; // 'object'
typeof c; // 'object'

instanceof 可用于检测引用类型，其原理是检测constructor.prototype是否存在于参数object的原型链上。

{} instanceof Object // true
[] instanceof Array // true
/reg/ instanceof RegExp // true

instanceof存在的一个问题是准确性不足，只要原型链上存在对应构造函数，就会返回true。

[] instanceof Array // true
[] instanceof Object // true 注意这里

使用instance做类型判断时，务必注意顺序问题。若顺序错误，可能无法得到正确结果。

function type(x) {
  if (x instanceof Object) {
    return 'object';
  }

  // Array永远得不到正确的类型哦
  if (x instanceof Array) {
    return 'array';
  }
}

instanceof另一个冷门问题是在存在多个iframe时，判断可能返回错误结果。此问题通常发生在多窗口之间传递值时发生。

[] instanceof window.frames[0].Array // 返回false
[] instanceof window.Array // 返回true

对于数组的判断，更优的方法是使用ECMAScript 5引入的新方法Array.isArray，该方法在任何情况下均可得到可靠结果。

Array.isArray([]); // true
Array.isArray(1); // false

另一种常用判断类型的方式是利用获取内部类型的机制，借助Object.prototype.toString可以获取内部类型的字符串结果。

const toString = Object.prototype.toString;

toString.call({}); // [object Object]
toString.call(null); // [object Null]
toString.call(/reg/); // [object RegExp]

需注意，在ECMAScript 5之前，undefined和null并不能通过此方法返回正确值。若有兼容性需求，需特别注意此问题。

ECMAScript 2015引入了Symbol.toStringTag，可用于修改内部类型的值，这会影响toString的返回值，但需注意兼容性问题。

const toString = Object.prototype.toString;
const obj = {};

toString.call(obj); // '[object Object]'

obj[Symbol.toStringTag] = 'MyObject'; // 修改内部类型

toString.call(obj); // '[object MyObject]'

总结

至此，本文介绍了JavaScript中判断变量类型的各种方法。可以看出，在正确场景使用正确方式并不容易。这里推荐大家使用作者维护的type库，该库运用了本文介绍的知识，提供了开箱即用的判断函数，并经过多个项目检验，欢迎大家体验。

到此这篇关于详解在JavaScript中如何判断变量类型的文章就介绍到这了，更多相关JavaScript判断变量类型内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！