一、为什么需要检查变量类型？

JavaScript 是一种动态类型语言，变量的类型可以在运行时发生变化。这种特性在提供灵活性的同时，也容易引发错误。例如：

1. let value = "123"; // 初始是字符串
   
2. value = parseInt(value); // 转为数字

复制代码

当处理复杂的数据结构或与外部接口 交互时，准确判断变量类型是确保代码健壮性的关键。

二、常见的类型检查方法


typeof 运算符





基本用法

1. typeof

复制代码

是 JavaScript 中最常用的类型检查方法，它返回一个字符串表示变量的类型。

1. console.log(typeof 42); // "number"
   
2. console.log(typeof "Hello"); // "string"
   
3. console.log(typeof true); // "boolean"
   
4. console.log(typeof undefined); // "undefined"
   
5. console.log(typeof null); // "object" （这是一个已知的历史遗留问题）
   
6. console.log(typeof []); // "object"
   
7. console.log(typeof {}); // "object"

复制代码

优点

• 简单易用，适合检查简单数据类型。
  
• 不需要引入额外的库。
  

缺点

• 对于复杂数据类型（如数组、对象），返回的结果可能不够精确。
  
• 无法区分
  1. null

  复制代码
  和普通对象（均返回
  1. object

  复制代码
  ）。
  

instanceof 运算符

基本用法

1. instanceof

复制代码

用于检查某个对象是否是特定构造函数的实例。

1. console.log([] instanceof Array); // true
   
2. console.log({} instanceof Object); // true
   
3. console.log(() => {} instanceof Function); // true

复制代码

优点

• 能准确区分数组、函数等复杂数据类型。
  
• 可用于自定义类的类型检查。
  

缺点

• 对于基本数据类型无效。
  
• 在跨 iframe 或跨作用域的环境中，
  1. instanceof

  复制代码
  可能失效，因为不同环境中的构造函数不相同。
  

Array.isArray()

基本用法

专门用于判断变量是否为数组。

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

复制代码

优点

• 精确判断数组类型。
  
• 推荐用于数组检查，比
  1. instanceof

  复制代码
  更可靠。
  

缺点

只能判断是否为数组，对于其他类型无效。

Object.prototype.toString.call()

基本用法

1. Object.prototype.toString.call()

复制代码

是一种通用的类型判断方法，适用于所有数据类型。

1. console.log(Object.prototype.toString.call(42)); // "[object Number]"
   
2. console.log(Object.prototype.toString.call("Hello")); // "[object String]"
   
3. console.log(Object.prototype.toString.call(null)); // "[object Null]"
   
4. console.log(Object.prototype.toString.call([])); // "[object Array]"
   
5. console.log(Object.prototype.toString.call({})); // "[object Object]"
   
6. console.log(Object.prototype.toString.call(() => {})); // "[object Function]"

复制代码

优点

• 返回结果统一，适用于所有类型。
  
• 能精确区分
  1. null

  复制代码
  和普通对象。
  

缺点

• 语法相对冗长。
  
• 不够直观，需要解析返回的字符串。
  

三、不同场景下的类型检查方案


场景 1：简单类型检查

如果只需要判断简单数据类型（如

1. string

复制代码

、

1. number

复制代码

、

1. boolean

复制代码

等），

1. typeof

复制代码

是最佳选择。

1. function isString(value) {
   
2.   return typeof value === "string";
   
3. }

复制代码

场景 2：数组判断

建议使用

1. Array.isArray()

复制代码

，因为它简单且专用。

1. function isArray(value) {
   
2.   return Array.isArray(value);
   
3. }

复制代码

场景 3：复杂类型区分

对于需要区分

1. null

复制代码

、数组、对象等复杂类型的场景，

1. Object.prototype.toString.call()

复制代码

是最可靠的方案。

1. function getType(value) {
   
2.   return Object.prototype.toString.call(value).slice(8, -1);
   
3. }
   
4. 
   
5. console.log(getType([])); // "Array"
   
6. console.log(getType(null)); // "Null"
   
7. console.log(getType({})); // "Object"
   
8. console.log(getType(() => {})); // "Function"

复制代码

场景 4：自定义类检查

当需要判断某个对象是否属于某个类时，

1. instanceof

复制代码

是最直观的选择。

1. class Person {}
   
2. const person = new Person();
   
3. 
   
4. console.log(person instanceof Person); // true
   
5. console.log(person instanceof Object); // true

复制代码

四、注意事项


1. null 的特殊性

1. typeof null

复制代码

返回

1. "object"

复制代码

，这是 JavaScript 中的历史遗留问题。在需要精确判断时，建议结合

1. Object.prototype.toString.call()

复制代码

。

1. console.log(Object.prototype.toString.call(null)); // "[object Null]"

复制代码

2. 跨环境的对象判断

在 iframe 或模块化环境中，

1. instanceof

复制代码

的结果可能不准确，原因是每个环境的构造函数实例不同。

1. console.log([] instanceof Array); // true
   
2. // 跨 iframe 时可能为 false

复制代码

3. 基本类型与对象类型的区别

基本数据类型（如

1. number

复制代码

、

1. string

复制代码

）和其对应的包装对象（如

1. Number

复制代码

、

1. String

复制代码

）在类型检查时会有不同结果。

1. console.log(typeof 42); // "number"
   
2. console.log(typeof new Number(42)); // "object"

复制代码

五、总结

到此这篇关于JavaScript检查变量类型的常用方法的文章就介绍到这了,更多相关JavaScript检查变量类型内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/javascript/339378mar.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！