判断变量的数据类型(常见四种方法及解析)

判断变量的数据类型

判断数据类型的方法大概有四种：

typeof、instanceof、 constructor、 prototype(最好用)

1.使用typeof操作符。

对一个值使用 typeof 操作符可能返回下列某个字符串，返回的类型都是字符串形式。

(1) undefined：如果这个值未定义

(2) boolean：如果这个值是布尔值

(3) string：如果这个值是字符串

(4) number：如果这个值是数值

(5) object：如果这个值是对象或null

(6) function：如果这个值是函数

需要注意：用typeof检测构造函数创建的Number，String，Boolean都返回object
基本数据类型中：null 。引用数据类型中的：Array，Object，Date，RegExp。不可以用typeof检测。都会返回小写的object

(1)typeof方法封装;

function getTypeUsingTypeof(variable) {
  return typeof variable;
}

示例:

console.log(getTypeUsingTypeof(42)); // "number"
console.log(getTypeUsingTypeof("Hello")); // "string"
console.log(getTypeUsingTypeof(true)); // "boolean"
++console.log(getTypeUsingTypeof([])); // "object"   
++console.log(getTypeUsingTypeof({})); // "object"
++console.log(getTypeUsingTypeof(null)); // "object"
console.log(getTypeUsingTypeof(undefined)); // "undefined"
console.log(getTypeUsingTypeof(function() {})); // "function"

2. instanceof

instanceof 运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上。需要区分大小写。

简单的来说，instanceof 用于判断一个变量是否某个对象的实例。

需要注意，instanceof只能用来判断对象和函数，不能用来判断字符串和数字等。判断它是否为字符串和数字时，只会返回false。
null和undefined都返回了false，这是因为它们的类型就是自己本身，并不是Object创建出来它们，所以返回了false。

(2)instanceof方法封装

function getTypeUsingInstanceof(variable) {
  if (variable instanceof Array) {
    return "array";
  } else if (variable instanceof Date) {
    return "date";
  } else if (variable instanceof RegExp) {
    return "regexp";
  } else if (variable instanceof Map) {
    return "map";
  } else if (variable instanceof Set) {
    return "set";
  } else {
    return typeof variable;
  }
}

示例用法：

++console.log(getTypeUsingInstanceof(42)); // false
++console.log(getTypeUsingInstanceof("Hello")); // false
console.log(getTypeUsingInstanceof(true)); // "boolean"
console.log(getTypeUsingInstanceof([])); // "array"
console.log(getTypeUsingInstanceof({})); // "object"
++console.log(getTypeUsingInstanceof(null)); // false
++console.log(getTypeUsingInstanceof(undefined)); // false
console.log(getTypeUsingInstanceof(function() {})); // "function"

3.constructor

constructor 属性返回对创建此对象的数组函数的引用。

在JavaScript中，每个具有原型的对象都会自动获得constructor属性。

例：以下代码中的[native code]，表示这是JavaScript的底层内部代码实现，无法显示代码细节。

// String
var str = "字符串";
console.log(str.constructor); // function String() { [native code] }
console.log(str.constructor === String); // true
 
// Array
var arr = [1, 2, 3];
console.log(arr.constructor); // function Array() { [native code] }
console.log(arr.constructor === Array); // true
 
// Number
var num = 5;
console.log(num.constructor); // function Number() { [native code] }
console.log(num.constructor === Number); // true

​ 需要注意，除了undefined和null之外，其他类型都可以通过constructor属性来判断类型。

4.prototype(最准确)

可以通过toString() 来获取每个对象的类型。为了每个对象都能通过 Object.prototype.toString() 来检测，需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式来调用，传递要检查的对象作为第一个参数，称为thisArg。

以上三种方法多少都会有一些不能判断的情况。为了保证兼容性，可以通过Object.prototype.toString方法，判断某个对象值属于哪种内置类型。

需要注意区分大小写。

这样可以看到使用Object.prototype.toString.call()的方式来判断一个变量的类型是最准确的方法。

(4)Object.prototype.toString.call()方法封装

function getTypeUsingObjectToString(variable) {
  return Object.prototype.toString.call(variable).slice(8, -1).toLowerCase();
}

**Object.prototype.toString.call() 方法获取其类型字符串。然后，使用 slice(8, -1) 方法截取类型字符串中的实际类型部分，并使用 toLowerCase() 方法将其转换为小写。**

示例:

console.log(getTypeUsingObjectToString(42)); // "number"
console.log(getTypeUsingObjectToString("Hello")); // "string"
console.log(getTypeUsingObjectToString(true)); // "boolean"
console.log(getTypeUsingObjectToString([])); // "array"
console.log(getTypeUsingObjectToString({})); // "object"
console.log(getTypeUsingObjectToString(null)); // "null"
console.log(getTypeUsingObjectToString(undefined)); // "undefined"
console.log(getTypeUsingObjectToString(function() {})); // "function"