前端知识点---Javascript中检测数据类型函数总结

时间:2024-11-12 09:37:48

文章目录

  • 01 typeof 运算符
  • 02 instanceof 运算符
  • 03 Array.isArray()
  • 04 Object.prototype.toString.call()
  • 05 constructor 属性
  • 06 isNaN() 和 Number.isNaN() (常用)
  • 07 isFinite() 和 Number.isFinite()
  • 08 typeof null 是 "object" 的问题

01 typeof 运算符

返回值是一个字符串
全部类型都是可以检测的

typeof 42;            // "number"
typeof "hello";       // "string"
typeof true;          // "boolean"
typeof undefined;     // "undefined"
typeof null;          // "object" (这是历史遗留问题)
typeof Symbol();      // "symbol"
typeof BigInt(123);   // "bigint"
typeof {};            // "object"
typeof [];            // "object"
typeof function(){};  // "function"

注意:无法区分 null 和普通对象,数组和普通对象都会返回 “object”。

02 instanceof 运算符

用于检测对象是否是构造函数
检测引用类型时非常有用(如数组、对象、自定义类等)。

[] instanceof Array; // true
{} instanceof Object; // true
new Date() instanceof Date; // true
function(){} instanceof Function; // true

适用场景:
检查对象的具体类型,尤其是用户定义的类或构造函数。

03 Array.isArray()

专门用于检查值是否是数组。
Array.isArray([]); // true
Array.isArray({}); // false
适用场景:
专门区分数组和其他对象。

04 Object.prototype.toString.call()

可以准确检测所有内置对象的类型,返回更具体的类型信息。

Object.prototype.toString.call(42); // “[object Number]”
Object.prototype.toString.call(“hello”); // “[object String]”
Object.prototype.toString.call(true); // “[object Boolean]”
Object.prototype.toString.call(null); // “[object Null]”
Object.prototype.toString.call(undefined); // “[object Undefined]”
Object.prototype.toString.call([]); // “[object Array]”
Object.prototype.toString.call({}); // “[object Object]”
Object.prototype.toString.call(function(){}); // “[object Function]”
Object.prototype.toString.call(new Date()); // “[object Date]”
Object.prototype.toString.call(/regex/); // “[object RegExp]”
Object.prototype.toString.call(new Map()); // “[object Map]”
Object.prototype.toString.call(new Set()); // “[object Set]”
Object.prototype.toString.call(new WeakMap()); // “[object WeakMap]”

适用场景:
适用于更精确的数据类型检查,尤其是区分类似类型(如数组与对象、正则与对象等)。

05 constructor 属性

通过 constructor 可以访问对象的构造函数,从而判断对象的类型。

(42).constructor === Number; // true
(“hello”).constructor === String; // true
(true).constructor === Boolean; // true
({}).constructor === Object; // true
([]).constructor === Array; // true
(function() {}).constructor === Function; // true

适用场景:
检查引用类型的具体构造函数。
注意:
可能被篡改或重写,因此不总是可靠。

06 isNaN() 和 Number.isNaN() (常用)

isNaN():判断值是否为 NaN(非数字值或计算失败返回 NaN 时)。
Number.isNaN():判断值是否严格为 NaN(类型安全)。

isNaN(“hello”); // true (被隐式转换后是NaN)
isNaN(NaN); // true

Number.isNaN(“hello”); // false
Number.isNaN(NaN); // true

07 isFinite() 和 Number.isFinite()

isFinite():检测值是否是有限数(可以自动转换类型)。
Number.isFinite():检测值是否是有限数,但不进行类型转换。

isFinite(42); // true
isFinite(“42”); // true (字符串被转换为数字)
isFinite(Infinity); // false
isFinite(NaN); // false

Number.isFinite(42); // true
Number.isFinite(“42”); // false (严格检测类型)

08 typeof null 是 “object” 的问题

由于历史原因,typeof null 返回 “object”,所以使用 typeof 检测时需要注意。

Object.prototype.toString.call(null) === “[object Null]”; // 更准确

总结
typeof 简单、快速检测基本类型 检查基础数据类型
instanceof 检查某对象是否为某类实例 检查引用类型和自定义类
Array.isArray() 专门检测数组 确认某变量是否是数组
Object.prototype.toString.call() 精确识别所有内置类型对象 高精度类型判断
constructor 查看对象的构造函数 检查引用类型构造器
isNaN / Number.isNaN 检测 NaN 判断是否为无效数字
isFinite / Number.isFinite 检测有限数字 检查是否有限数
每种方法都有自己的适用场景,根据需要选择合适的方法。