JavaScript数据类型判断方法

JavaScript中的数据类型可以分为基本数据类型（Number、String、Boolean、Null、Undefined、Symbol、BigInt）和引用数据类型（Object及其子类型如Array、Function、Date等）。以下是判断JavaScript数据类型的主要方法：

1. typeof 操作符

typeof 是JavaScript中最常用的类型判断方法之一。

console.log(typeof 123);        // "number"
console.log(typeof 'abc');      // "string"
console.log(typeof true);       // "boolean"
console.log(typeof undefined);  // "undefined"
console.log(typeof null);       // "object" (历史遗留问题)
console.log(typeof {});         // "object"
console.log(typeof []);         // "object"
console.log(typeof function(){}); // "function"
console.log(typeof Symbol());   // "symbol"
console.log(typeof 123n);       // "bigint"

优点：

• 简单直接，能区分基本类型
• 对于函数能返回"function"

缺点：

• 对于null会返回"object"，这是JavaScript的一个著名bug
• 对于数组、对象等引用类型，都返回"object"，无法进一步区分

2. instanceof 操作符

instanceof 用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

console.log([] instanceof Array);        // true
console.log({} instanceof Object);       // true
console.log(function(){} instanceof Function); // true
console.log(new Date() instanceof Date); // true
console.log(/regex/ instanceof RegExp);  // true
console.log(123 instanceof Number);      // false
console.log('abc' instanceof String);    // false

优点：

• 可以区分不同的对象类型
• 能检测出自定义类型

缺点：

• 不能用于基本数据类型的判断（总是返回false）
• 对于跨iframe或window的对象判断可能会有问题，因为每个窗口有独立的原型链

3. Object.prototype.toString.call()

这是最准确、最可靠的类型判断方法，可以返回对象的内部属性[[Class]]。

console.log(Object.prototype.toString.call(123));        // "[object Number]"
console.log(Object.prototype.toString.call('abc'));      // "[object String]"
console.log(Object.prototype.toString.call(true));       // "[object Boolean]"
console.log(Object.prototype.toString.call(undefined));  // "[object Undefined]"
console.log(Object.prototype.toString.call(null));       // "[object Null]"
console.log(Object.prototype.toString.call({}));         // "[object Object]"
console.log(Object.prototype.toString.call([]));         // "[object Array]"
console.log(Object.prototype.toString.call(function(){})); // "[object Function]"
console.log(Object.prototype.toString.call(new Date())); // "[object Date]"
console.log(Object.prototype.toString.call(/regex/));    // "[object RegExp]"
console.log(Object.prototype.toString.call(Symbol()));   // "[object Symbol]"
console.log(Object.prototype.toString.call(123n));       // "[object BigInt]"

优点：

• 可以准确判断所有数据类型，包括null
• 对于不同的对象类型也能准确区分

缺点：

• 语法相对复杂，需要记住完整的写法
• 返回的是一个字符串，需要进一步处理才能得到纯类型名称

4. constructor 属性

每个对象都有一个constructor属性，指向创建该对象的构造函数。

console.log((123).constructor === Number);     // true
console.log(('abc').constructor === String);   // true
console.log((true).constructor === Boolean);   // true
console.log(([]).constructor === Array);       // true
console.log(({}).constructor === Object);      // true
console.log((function(){}).constructor === Function); // true
console.log((new Date()).constructor === Date); // true
console.log((/regex/).constructor === RegExp); // true
// 注意：null和undefined没有constructor属性

优点：

• 可以区分大多数数据类型

缺点：

• null和undefined没有constructor属性，会报错
• 可以被修改，不一定可靠
• 对于自定义类型，可能会被重写

5. Array.isArray()

专门用于判断数组的方法，ES5引入。

console.log(Array.isArray([]));     // true
console.log(Array.isArray({}));     // false

优点：

• 专门针对数组类型判断，准确可靠

缺点：

• 只能判断数组，不能用于其他类型

6. 自定义类型判断函数

可以基于上述方法，封装一个更通用的类型判断函数。

function getType(value) {
  // 处理null的特殊情况
  if (value === null) return 'null';
  
  // 处理基本类型
  const type = typeof value;
  if (type !== 'object') return type;
  
  // 处理对象类型
  const toString = Object.prototype.toString;
  return toString.call(value).slice(8, -1).toLowerCase();
}

console.log(getType(123));        // "number"
console.log(getType('abc'));      // "string"
console.log(getType(true));       // "boolean"
console.log(getType(undefined));  // "undefined"
console.log(getType(null));       // "null"
console.log(getType({}));         // "object"
console.log(getType([]));         // "array"
console.log(getType(function(){})); // "function"
console.log(getType(new Date())); // "date"
console.log(getType(/regex/));    // "regexp"
console.log(getType(Symbol()));   // "symbol"
console.log(getType(123n));       // "bigint"

7. 利用鸭子类型（Duck Typing）

有时候我们不关心对象的实际类型，而是关心它是否具有某些属性或方法。

// 判断是否是类数组对象
function isArrayLike(obj) {
  return obj && 
         typeof obj === 'object' && 
         typeof obj.length === 'number' && 
         obj.length >= 0;
}

console.log(isArrayLike([]));           // true
console.log(isArrayLike('abc'));        // true (字符串是类数组)
console.log(isArrayLike(arguments));    // true (arguments是类数组)
console.log(isArrayLike({}));           // false

优点：

• 更加灵活，关注对象的行为而非类型

缺点：

• 不是严格的类型判断，可能会有误判

方法对比总结

实际应用建议

1. 基本类型判断：使用typeof，但要注意null的特殊情况。

   if (typeof value === 'string') { /* ... */ }
   if (value === null) { /* ... */ }
   

2. 数组判断：使用Array.isArray()。

   if (Array.isArray(value)) { /* ... */ }
   

3. 精确判断任意类型：使用Object.prototype.toString.call()。

   function isType(value, type) {
     return Object.prototype.toString.call(value) === `[object ${type}]`;
   }
   
   if (isType(value, 'Date')) { /* ... */ }
   

4. 通用类型判断：使用自定义的getType函数。

   if (getType(value) === 'array') { /* ... */ }
   

5. 判断对象是否具有特定能力：使用鸭子类型。

   if (value && typeof value.then === 'function') { /* 可能是Promise */ }
   

注意事项

1. 类型转换：JavaScript是弱类型语言，存在隐式类型转换，判断类型时要考虑这一点。

   console.log(typeof null);           // "object" (历史遗留问题)
   console.log(typeof NaN);            // "number"
   console.log(typeof (new String('abc'))); // "object"
   

2. 包装对象：基本类型有对应的包装对象，判断时要注意区分。

   console.log(typeof 'abc');          // "string"
   console.log(typeof new String('abc')); // "object"
   console.log('abc' instanceof String); // false
   console.log(new String('abc') instanceof String); // true
   

3. 跨环境问题：在不同环境（如iframe）中，使用instanceof可能会有问题。

   // 在主页面中
   const iframe = document.createElement('iframe');
   document.body.appendChild(iframe);
   const iframeArray = iframe.contentWindow.Array;
   const array = [];
   console.log(array instanceof iframeArray); // false
   console.log(array instanceof Array);        // true
   

4. Symbol.toStringTag：ES6引入了Symbol.toStringTag，可以自定义Object.prototype.toString.call()的返回值。

   const myObject = {
     [Symbol.toStringTag]: 'MyCustomType'
   };
   console.log(Object.prototype.toString.call(myObject)); // "[object MyCustomType]"