JavaScript中判断数据类型的实用方法总结

前言

最近项目中有不少地方需要判断数据类型，但是判断数据类型也有好几种方法，并且每种方法判断的数据类型也有局限性，所以想总结一下，方便以后查阅。

分别是 typeof ，instanceof，Object.prototype.toString.call()

1. typeof

• typeof 它返回值是一个字符串，该字符串说明运算数的类型。返回结果只有以下几种：number，string，boolean，undfined，object，function
• typeof 是用于判断基本数据类型的，除了 null 都可以调用 typeof 显示正确的类型。
• 但对于引用数据类型，除了函数之外，都会显示object，函数显示 function;
• 需要注意的是，typeof null ，结果是“object”。 这是个历史设计缺陷。
• 可以使用typeof判断变量是否存在（比如 if(typeof a!="undfined"){ xxx }），而不要去使用if(a)，因为a不存在（未声明）会报错。

1. 对于数字类型的操作数而言， typeof 返回的值是 number。比如：typeof(1)，返回的值就是number。

2. 对于字符串类型， typeof 返回的值是 string。比如：typeof("123")，返回的值是string。

3. 对于布尔类型， typeof 返回的值是 boolean 。比如：typeof(true)，返回的值是boolean。

4. 对于对象、数组、null 返回的值是 object 。比如：typeof(window)，typeof(document)，typeof(null)返回的值都是object。

5. 对于函数类型，返回的值是 function。比如：typeof(eval)，typeof(Date)返回的值都是function。

6. 如果运算数是没有定义的（比如说不存在的变量、函数或者undefined），将返回undefined。 比如：typeof(sss)、typeof(undefined)都返回undefined。

下面 我们将用程序代码验证一下：

console.log(typeof(1));  //number
console.log(typeof(NaN));  //number
console.log(typeof("123"));  //string
console.log(typeof("123" + 12));  //string
console.log(typeof("123" + Date));  //string
console.log(typeof(true));  //boolean
console.log(typeof(window));  //object
console.log(typeof(document));  //object
console.log(typeof(null));  //object
console.log(typeof([8]));  //object
console.log(typeof({a:1}));  //object
console.log(typeof(Date));  //function
console.log(typeof(sss));  //undefined
console.log(typeof(undefined));  //undefined

局限性： 由上面程序代码可验证，很遗憾的一点是，typeof 在判断一个 object的数据的时候只能告诉我们这个数据是 object, 而不能细致的具体到是哪一种 object。所以要 想区分对象、数组、null，单纯使用 typeof 是不行的。

2. instanceof运算符

instanceof 运算符返回一个布尔值，表示 对象是否为某个构造函数的实例。 注意，instanceof运算符最好用于对象引用类型，不适用原始类型的值。

基本用法：

// 判断 p 是否为 Person 的实例
function Person(name) {
 this.name = name
}
const p = new Person('sunshine')
p instanceof Person // true

// 这里的 p 是 Person 函数构造出来的，所以顺着 p 的原型链可以找到 Object 的构造函数
p.__proto__ === Person.prototype // true
p.__proto__.__proto__ === Object.prototype // true

缺点：

对于基本类型的数据，instanceof是不能直接判断它的类型的，因为实例是一个对象或函数创建的，是引用类型，所以需要通过基本类型对应的 包装对象 来判断。所以对于 null 和 undefined 这两个家伙就检测不了了~

5 instanceof Number // false
new Number(5) instanceof Number  // true

因为原型链继承的关系，instanceof 会把数组都识别为 Object 对象，所有引用类型的祖先都是 Object 对象

let arr = [1,2,3]
console.log(Object.prototype.toString.call(arr) === '[object Array]') // true
console.log(arr instanceof Array) // true
console.log(arr instanceof Object) // true
let fn = function(){}
console.log(fn instanceof Object)  // true

另外，instanceof 也是能判断基本数据类型的，比如下面这种方式，这个了解就行，真的要判断基本数据类型还是用 typeof

class PrimitiveNumber {
  static [Symbol.hasInstance](x) {
    return typeof x === 'number'
  }
}
console.log(111 instanceof PrimitiveNumber) // true

如果你不知道Symbol，可以看看 MDN上关于hasInstance的解释

其实就是自定义instanceof行为的一种方式，这里将原有的instanceof方法重定义，换成了typeof，因此能够判断基本数据类型。

特殊情况补充：

• instanceof的原理是 检查右边构造函数的prototype属性，是否在左边对象的原型链上；只要处于原型链中，判断永远为true。
• 有一种特殊情况，就是左边对象的原型链上，只有null对象。这时，instanceof判断会失真；因为Object不在null原型链上

var obj = Object.create(null);
typeof obj // "object"
obj instanceof Object // false

上面代码中，Object.create(null) 返回一个新对象obj，它的原型是null。右边构造函数的Object.prototype属性，不在左边的原型链上，因此instanceof就认为obj不是Object的实例。这是唯一的instanceof运算符判断会失真的情况（一个对象的原型是null）。

下面介绍一种方法，对每一种数据类型都实用的。

3. Object.prototype.toString.call()

在判断数据类型时，我们称 Object.prototype.toString 为 “万能方法” “终极方法”，工作中也是比较常用而且准确。 对于Object.prototype.toString() 方法，会返回一个形如 "[object XXX]" 的字符串

1) 判断基本类型

Object.prototype.toString.call('stjd')
//"[object String]"
 
Object.prototype.toString.call(1)
//"[object Number]"
 
Object.prototype.toString.call(true)
//"[object Boolean]"

Object.prototype.toString.call(null)
//"[object Null]"

Object.prototype.toString.call(undefined)
//"[object Undefined]"

2) 判断原生引用类型

a 函数类型

Object.prototype.toString.call(function(){})  //这个方法就建立在js任何类型皆可视为对象**
// "[object Function]"

b 日期类型

var date = new Date();
Object.prototype.toString.call(date);
//”[object Date]”

c 数组类型

Object.prototype.toString.call([2])
//"[object Array]"

d 对象类型

Object.prototype.toString.call({q:8})
//"[object Object]"

e 正则表达式

var reg = /[hbc]at/gi;
Object.prototype.toString.call(reg); // "[object RegExp]"

f 自定义类型

function Person(name, age) {
    this.name = name;
    this.age = age;
}
var person = new Person("Rose", 18);
Object.prototype.toString.call(person); 
//”[object Object]”

显然这种方法不能准确判断person是Person类的实例，而只能用instanceof 操作符来进行判断，如下所示：

console.log(person instanceof Person);//输出结果为true

注意： Object.prototype.toString()本身是允许被修改的，而我们目前所讨论的关于Object.prototype.toString()这个方法的应用都是假设toString()方法未被修改为前提的。

因为实例对象有可能会自定义toString()方法，会覆盖Object.prototype.toString(), 所以在使用时，最好加上call()。

有的时候我们也可以封装判断数据类型的方法。

// 判断数据类型的函数
function getType(data) {
  return Object.prototype.toString.call(data).slice(8, -1);
}

// 使用
  if(this.getType(json) == 'Object'){
   console.log('Object类型')
  }else if (this.getType(json) == 'Array'){
   console.log('Array类型')
  } 

4. 补充 Array.isArray() 方法

js中的isArray()是Array类型的一个静态方法，使用它可以判断一个值是否为数组。 返回一个布尔值。

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

该方法可直接返回布尔值，在条件表达式中，使用该方法非常实用。

5. 总结

js数据类型的判断主要有三种方法： typeof ，instanceof，Object.prototype.toString.call()

typeof可以区分 原始类型，undfined和 function 数据类型；

instanceof运算符适合判断对象数据类型，不适用原始类型的值。instanceof的原理是基于原型链的查询，只要处于原型链中，判断永远为true；

区分自定义对象类型使用 instanceof 操作符；

null instanceof Object，返回false，因为Object不在null原型链上；

Object.prototype.toString.call() 区分的数据类型适用范围更大，但是无法区分自定义对象类型；

判断数据类型方法有很多，实际使用需要根据自己的需求使用最适合自己的方法；

到此这篇关于JavaScript中判断数据类型的实用方法总结的文章就介绍到这了,更多相关JavaScript判断数据类型内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论