利用JS判断数据类型的四种方法

当我们使用JavaScript编写程序时，经常会遇到数据类型的问题，因此判断数据类型变得非常重要。现在我们将介绍四种方法来判断数据的类型。

一、使用typeof关键字

使用 typeof 关键字可以判断 JavaScript 的数据类型。

• typeof 在判断数值、字符串、布尔、undefined、symbol 类型的时候都能准确判断。
• 但是当判断 null 和 object 时，会给出 object。

下面是一个将类型和值都输出的示例：

function checkType(value) {
  console.log(typeof value, value)
}

checkType(123) // number 123
checkType('abc') // string 'abc'
checkType(true) // boolean true
checkType(undefined) // undefined undefined
checkType(null) // object null
checkType({name: 'bob'}) // object {name: 'bob'}
checkType([1, 2, 3]) // object [1, 2, 3]
checkType(function() {}) // function () {}

二、使用instanceof关键字

instanceof 用来判断某个对象是否为某个类的实例，使用方法相对比较简单。

以下是一个判断数组类型的例子：

let arr = [1, 2, 3];
arr instanceof Array; // true

我们可以封装一个函数来判断。

function isArray (value) {
  return value instanceof Array;
}

console.log(isArray([1,2,3])); //true

三、使用Object原型上的toString方法

我们可以使用可以使用 Object 原型上的 toString() 方法来判断数据类型。

以下是一个判断对象类型的例子：

let obj = {};
Object.prototype.toString.call(obj); // [object Object]

以下是一些判断其他类型的示例：

console.log(Object.prototype.toString.call(null)) //[object Null]
console.log(Object.prototype.toString.call(undefined)) //[object Undefined]
console.log(Object.prototype.toString.call('abc')) //[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(Symbol())) //[object Symbol]
console.log(Object.prototype.toString.call(function(){})) //[object Function]

console.log(Object.prototype.toString.call([])) //[object Array]
console.log(Object.prototype.toString.call(new Date())) //[object Date]
console.log(Object.prototype.toString.call(/[a-z]/)) //[object RegExp]
console.log(Object.prototype.toString.call(new Error())) //[object Error]
console.log(Object.prototype.toString.call(Math)) //[object Math]

我们已经知道如何定义一个判断数组类型的函数 isArray，继续扩展一下，定义一些其它类型的判断方法。

function isType (type) {
  return function (value) {
    return Object.prototype.toString.call(value) === `[object ${type}]`;
  };
}

const isArray = isType('Array');
const isObject = isType('Object');
const isRegExp = isType('RegExp');
const isError = isType('Error');
const isMath = isType('Math');

console.log(isArray([])); //true
console.log(isObject({})); //true
console.log(isNaN(new Date())); //false
console.log(isRegExp(/[a-z]/)); //true

四、使用ES6中的Symbol.hasInstance属性

我们也可以使用ES6中的Symbol.hasInstance属性来判断数据类型。

在实例化一个对象时，其 Symbol.hasInstance 的属性会自动调用（类似于 toString() 方法）。如果实例对象的 Symbol.hasInstance 属性在构造函数的原型中，则为 true，否则为 false。

以下是一个判断数组类型的例子：

class myArray {
  static [Symbol.hasInstance](instance) {
    return Array.isArray(instance);
  }
}

let arr = [1, 2, 3];
console.log(arr instanceof myArray); // true

通过定义 myArray 的 Symbol.hasInstance 属性，我们可以将 myArray 及其实例添加到数组类型中，从而使 arr instanceof myArray 的结果为 true。

总结

本文介绍了四种方法来判断 JavaScript 的数据类型，包括 typeof 关键字、instanceof 关键字、Object 原型上的 toString() 方法以及 ES6 中的 Symbol.hasInstance 属性。这些方法都有其特定的用途，可以灵活使用。