数据类型回顾

JavaScript 的数据类型大致分为两类：原始类型和复杂类型
原始类型：

• undefined：未定义
  
• number：数字
  
• boolean：布尔值
  
• string：字符串
  
• null：空值
  
• symbol：符号(ES6 新增)
  
• bigint：大整数(ES2020 新增)
  

复杂类型：

• Object：对象
  
• Array：数组
  
• Function：函数
  
• Date：日期
  
• RegExp：正则表达式
  

类型判断方法详解


typeof 操作符

1. typeof

复制代码

是最基础且常用的类型判断方法，使用简单，参阅 MDN 文档
语法：

1. typeof

复制代码

后面跟一个值或表达式，返回一个字符串，表示操作数的类型

1. 可能返回的数据类型为：undefined、boolean、number、string、object、function、symbol、bigint

复制代码

1. // 原始类型判断
   
2. typeof "hello"; // "string"
   
3. typeof 123; // "number"
   
4. typeof true; // "boolean"
   
5. typeof undefined; // "undefined"
   
6. typeof Symbol(); // "symbol"
   
7. typeof 123n; // "bigint"
   
8. 
   
9. // 引用类型判断的局限性
   
10. typeof []; // "object"
    
11. typeof {}; // "object"
    
12. typeof null; // "object" (这是一个历史遗留的bug)
    
13. typeof new Date(); // "object"
    
14. typeof /regex/; // "object"
    
15. 
    
16. typeof function () {}; // "function"

复制代码

注意，

1. typeof

复制代码

操作符一般用于判断原始类型，对于引用类型的判断存在局限性：

• 对引用值的判断有误，一般会返回固定的字符串
  1. object

  复制代码
• 1. null

  复制代码
  会被错误的判断为
  1. object

  复制代码
  类型
  

instanceof 操作符

1. instanceof

复制代码

用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上，返回一个布尔值，参阅 MDN 文档

1. 也就是判断一个实例对象是否属于某个构造函数

复制代码

语法为

1. object instanceof constructor;
   
2. 
   
3. // object：实例对象
   
4. // constructor：构造函数

复制代码

比如下面的例子

1. const arr = [1, 2, 3];
   
2. 
   
3. console.log(arr instanceof Array); // true
   
4. console.log(arr instanceof Object); // true
   
5. console.log(arr instanceof Function); // false

复制代码

一个构造函数的示例：

1. function Person(name, age) {
   
2.   this.name = name;
   
3.   this.age = age;
   
4. }
   
5. 
   
6. const person = new Person("张三", 20);
   
7. 
   
8. console.log(person instanceof Person); // true

复制代码

在这个例子中，实例对象

1. person

复制代码

会通过

1. __proto__

复制代码

属性向上查找原型链，直到找到

1. Person.prototype

复制代码

为止，如果找到则返回

1. true

复制代码

，如果找到顶部

1. null

复制代码

都没有找到，则返回

1. false

复制代码

1. 实例对象的 __proto__ 属性指向构造函数的 prototype 对象

复制代码

注意，

1. instanceof

复制代码

操作符只能用于判断引用类型，不能用于判断原始类型

1. 还存在一个隐患是：如果其原型链被更改，可能导致判断不准确

复制代码

Object.prototype.constructor

除了

1. null

复制代码

和

1. undefined

复制代码

以外，所有引用类型都有

1. constructor

复制代码

属性，用于返回对象的构造函数，参阅 MDN 文档
我们继续以

1. instanceof

复制代码

章节的构造函数示例来看：

所以，更新的图示如下：

1. 实例对象的 __proto__ 属性指向构造函数的 prototype 对象

复制代码

在图示中，

1. person

复制代码

的

1. __proto__

复制代码

会等于

1. Person.prototype

复制代码

，所以

1. person

复制代码

实例对象上也有一个

1. constructor

复制代码

属性
而且，无论一个变量是通过构造函数方式还是字面量方式，都会有一个

1. constructor

复制代码

属性

1. 字面量方式在通过引擎解析时，JavaScript 后台会创建一个相应的原始包装类型对象，暴露出操作原始值的各种方法

复制代码

1. const name = "十五";
   
2. console.log(name.constructor === String); // true
   
3. 
   
4. const age = 18;
   
5. console.log(age.constructor === Number); // true
   
6. 
   
7. const arr = [1, 2, 3];
   
8. console.log(arr.constructor === Array); // true

复制代码

基本上

1. constructor

复制代码

属性能够判断出除了

1. null

复制代码

和

1. undefined

复制代码

外的所有类型

Object.prototype.toString()

一个通用且准确的类型判断方法

1. Object.prototype

复制代码

表示所有对象的原型对象，这个对象上拥有一个

1. toString()

复制代码

方法，用于返回对象的字符串表示形式
然后搭配

1. call()

复制代码

方法，用于改变方法内部的

1. this

复制代码

指向

1. call()：函数实例拥有的一个方法，传入的第一个参数可以改变函数内部的 this 指向

复制代码

基本用法：

1. const toString = Object.prototype.toString;
   
2. 
   
3. const name = "十五";
   
4. const age = 18;
   
5. 
   
6. console.log(toString.call(name)); // [object String]
   
7. console.log(toString.call(age)); // [object Number]

复制代码

针对性的类型判断方法


Array.isArray()

Array.isArray() 方法用于判断传入的值是否是一个数组

1. const arr = [1, 2, 3];
   
2. 
   
3. console.log(Array.isArray(arr)); // true

复制代码

Number.isNaN()

1. Number.isNaN()

复制代码

方法用于判断传入的值是否为

1. NaN

复制代码

1. NaN：Not a Number，无法表示为数字的值

复制代码

1. console.log(Number.isNaN(NaN)); // true
   
2. console.log(Number.isNaN("十五")); // false
   
3. console.log(Number.isNaN(123)); // false

复制代码

注意，全局的

1. isNaN()

复制代码

与

1. Number.isNaN()

复制代码

的区别在于前者会强制进行类型转换，后者则不会(全等判断)

在实践项目中的应用


封装判断类型的工具函数

在真实的项目场景中，我们往往可以统一封装一些工具函数，用于判断类型
比如在

1. utils

复制代码

文件夹下新建一个

1. judge.js

复制代码

文件，用于编写一些判断类型的工具函数

1. 这里默认你使用了 TypeScript

复制代码

1. /**
   
2. * 判断是否为字符串
   
3. * @param value 需要判断的值
   
4. * @returns 布尔值 | true 表示是字符串，false 表示不是字符串
   
5. */
   
6. export const isString = (value: unknown): value is string => {
   
7.   return typeof value === "string";
   
8. };
   
9. 
   
10. /**
    
11. * 通用且精确的类型判断
    
12. * @param value 需要判断的值
    
13. * @param type 类型
    
14. * @returns 布尔值 | true 表示符合类型，false 表示不符合
    
15. */
    
16. const isType = (value: unknown, type: string) => {
    
17.   return (
    
18.     Object.prototype.toString.call(value).slice(8, -1).toLowerCase() === type
    
19.   );
    
20. };

复制代码

借助第三方库

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库
它提供了许多有用的工具函数，包括类型判断函数，如

1. isString

复制代码

、

1. isNumber

复制代码

、

1. isArray

复制代码

等

总结

上面我们详细介绍了 JavaScript 中的数据类型判断方法，包括

1. typeof

复制代码

、

1. instanceof

复制代码

、

1. constructor

复制代码

和

1. Object.prototype.toString()

复制代码

，你需要注意的是：

• 选择合适的判断方法
  

• 判断原始类型时，优先使用
  1. typeof

  复制代码
• 判断继承关系时，使用
  1. instanceof

  复制代码
• 需要通用、准确的判断方式时，使用
  1. Object.prototype.toString.call()

  复制代码

• 实际项目场景下的应用
  

• 考虑封装工具函数
  
• 借助成熟的第三方库，如 Lodash
  

以上就是JavaScript判断数据类型的四种方式总结的详细内容，更多关于JavaScript判断数据类型的资料请关注脚本之家其它相关文章！

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