JavaScript中数据类型检测（数据类型判断）的常用方法

一、JavaScript中的数据类型

1、基本数据类型

2、引用数据类型

二、JavaScript中数据类型的检测方法

1、typeof关键字

2、instanceof运算符

3、Object.prototype.toString().call() 方法

4、=== 运算符

三、数据类型检测方法总结

---

一、JavaScript中的数据类型

JavaScript中的数据类型分为两大类：【基本数据类型】和【引用数据类型】；

1、基本数据类型

基本数据类型，也称为值类型，包含6种：

• String（字符型）
• Number（数值型）
• Boolean（布尔型）
• Null（空）
• Undefined（未定义）
• Symbol（符号型）

Symbol是ES6引入的一种新数据类型，用于声明非重复性变量；

2、引用数据类型

引用数据类型，也称为对象类型，包括：

• Object（对象）
• Array（数组）
• Function（函数）
• Date（日期对象）
• RegExp（正则对象）
• ...

二、JavaScript中数据类型的检测方法

有时候需要我们对JavaScript中的数据类型进行检测或者判断，以下列举出常用的四种方法，可供参考使用；

1、typeof关键字

• 用于对基本数据类型进行"类型检测" ，检测结果以字符串形式返回；
• typeof对null的检测结果为"object"、对NaN的检测结果为"number"；
• typeof对引用类型的检测结果为object或function；

// 1、检测基本数据类型
console.log(typeof "abc");          // "string"
console.log(typeof 123);            // "number"
console.log(typeof true);           // "boolean"
console.log(typeof null);           // "object"
console.log(typeof undefined);      // "undefined"
console.log(typeof Symbol());       // "symbol"

// 2、检测引用数据类型
console.log(typeof {});             // "object"
console.log(typeof []);             // "object"
console.log(typeof new Date());     // "object"
console.log(typeof new RegExp());   // "object"
console.log(typeof function(){});   // "function"

// 3、特殊值
console.log(typeof NaN);            // "number"

2、instanceof运算符

• 用于对引用数据类型进行【类型判断】；
• 只能判断是否为预期的类型，判断结果以Boolean值返回；
• 对基本数据类型的判断均返回false；
• instanceof是通过原型链来实现继承关系的判断；

// 判断基本类型数据
console.log('abc' instanceof String); // false
console.log(123 instanceof Number); // false
console.log(true instanceof Boolean); // false

// 判断引用类型数据
console.log([] instanceof Array); // true
console.log({} instanceof Object); // true
console.log(new Date() instanceof Date); // true
console.log(new RegExp() instanceof RegExp); // true
console.log(function () {} instanceof Function); // true

// 自己声明
function Car(){}
console.log(new Car() instanceof Car);    // true

3、Object.prototype.toString().call() 方法

该方法用于返回被检测对象的原型对象的字符串表示； 推荐使用的方法

• Object.prototype，表示Object的原型对象（是一个对象）；
• obj.toString()，返回该对象的字符串表示，“[object type]”；
• obj1.fn.call(obj2)，call方法可改变函数内部的this指向，用obj2去执行obj1的fn()方法；

// 1、检测基本数据类型
console.log(Object.prototype.toString.call('123'));           // "[object String]"
console.log(Object.prototype.toString.call(123));             // "[object Number]"
console.log(Object.prototype.toString.call(true));            // "[object Boolean]"
console.log(Object.prototype.toString.call(null));            // "[object Null]"
console.log(Object.prototype.toString.call(undefined));       // "[object Undefined]"
console.log(Object.prototype.toString.call(Symbol()));        // "[object Symbol]"

// 2、 检测引用数据类型
console.log(Object.prototype.toString.call([]))               // "[object Array]"
console.log(Object.prototype.toString.call({}))               // "[object Object]"
console.log(Object.prototype.toString.call(function fn(){}))  // "[object Function]"
console.log(Object.prototype.toString.call(new Date()))       // "[object Date]"
console.log(Object.prototype.toString.call(new RegExp()))     // "[object RegExp]"

console.log(Object.prototype.toString.call(NaN))              // "[object Number]"

4、=== 运算符

利用 === 运算符判断数据类型，是基于Object.prototype.toString.call()方法实现的，如下列代码所示：

const toString = Object.prototype.toString;

// 1、判断基本类型
console.log(toString.call("123") === "[object String]");              // true
console.log(toString.call(123) === "[object Number]");                // true
console.log(toString.call(true) === "[object Boolean]");              // true
console.log(toString.call(null) === "[object Null]");                 // true
console.log(toString.call(undefined) === "[object Undefined]");       // true
console.log(toString.call(Symbol()) === "[object Symbol]");           // true

// 2、判断引用类型
console.log(toString.call([]) === "[object Array]");                  // true
console.log(toString.call({}) === "[object Object]");                 // true
console.log(toString.call(function fn() {}) === "[object Function]"); // true
console.log(toString.call(new Date()) === "[object Date]");           // true
console.log(toString.call(new RegExp()) === "[object RegExp]");       // true

console.log(toString.call(NaN) === "[object Number]");                // true

这样做的意义在于，我们可以将此方法封装在自己的函数库中，需要的时候直接调用就可以了！

创建一个工具类js文件【tools.js】 

const _toString = Object.prototype.toString;

// 1、基本数据类型
// 是否为String类型
export const isString = data => { return _toString.call(data) === "[object String]" }

// 是否为Number类型
export const isNumber = data => { return _toString.call(data) === "[object Number]" }

// 是否为Boolea类型
export const isBoolean = data => { return _toString.call(data) === "[object Boolean]" }

// 是否为Null类型
export const isNull = data => { return _toString.call(data) === "[object Null]" }

// 是否为Undefined类型
export const isUndefined = data => { return _toString.call(data) === "[object Undefined]" }

// 是否为Symbol类型
export const isSymbol = data => { return _toString.call(data) === "[object Symbol]" }

// 2、引用数据类型
// 是否为Object类型
export const isObject = data => { return _toString.call(data) === "[object Object]" }

// 是否为Array类型
export const isArray = data => { return _toString.call(data) === "[object Array]" }

// 是否为Function类型
export const isFunction = data => { return _toString.call(data) === "[object Function]" }

// 是否为Date类型
export const isDate = data => { return _toString.call(data) === "[object Date]" }

// 是否为RegExp类型
export const isRegExp = data => { return _toString.call(data) === "[object RegExp]" }

// 是否为NaN类型
export const isNaN = (data) => { return _toString.call(data) === "[object Number]" }

 需要用到的地方引入并使用；

import * as Tool from '@/utils/tools.js'      // 引入类型检测工具库
function testTools(){
  // 1、基本类型检测
  console.log(Tool.isString('abc'));          // true
  console.log(Tool.isNumber(123));            // true
  console.log(Tool.isBoolean(true));          // true
  console.log(Tool.isNull(null));             // true
  console.log(Tool.isUndefined(undefined));   // true
  console.log(Tool.isSymbol(Symbol()));       // true

  // 引用类型检测
  console.log(Tool.isArray([]));                    // true
  console.log(Tool.isObject({}));                   // true
  console.log(Tool.isFunction(function fn(){}));    // true
  console.log(Tool.isDate(new Date()));             // true
  console.log(Tool.isRegExp(new RegExp()));         // true

  // 判断是不是非数字
  console.log(Tool.isNaN(NaN));                     // true
}

三、数据类型检测方法总结

方法	typeof关键字	instanceof运算符	Object.prototype.toString().call()	=== 运算符
使用条件	无	有预期结果值作比较	无	有预期结果值作比较
返回值	被检测数据的类型，如：string、number...	返回布尔值，true或false	返回被检测数据的类型，如"[object String]"	返回布尔值，true或false
适用于	基本数据类型的类型检测	引用数据类型的类型判断	所有类型的类型检测（强烈推荐）	所有类型的类型检测
局限性	对引用类型的检测，只能返回object或function（不准确）	对基本数据类型的判断均返回false	暂无	暂无
注意点	注意对null和NaN的检测结果	通过原型链判断继承关系	暂无	可自行封装函数库进行使用；
个人推荐指数	☆☆☆	☆☆☆	☆☆☆☆☆	☆☆☆☆☆

=======================================================================

以上是一些比较常用的方法介绍，希望能有所帮助！

如有问题，还请批评指正~