JS数据类型判断的几种常用方法

所属分类: 网络编程 / JavaScript 阅读数: 259
收藏 0 赞 0 分享

JavaScript 中常见数据类型有Number、String、Boolean、Object、Array、Json、Function、Date、RegExp、Error、undefined、Null等十几种。ES6还有新增的数据类型有Symbol、Set、Map等。在实际应用中,我们经常需要判断数据类型,现在我归纳几种方法,希望对大家有所帮助。

typeof 判断(最常用)

typeof 是 JS 提供的一个运算符,专门用来检测一个变量的类型 。 typeof 有2种使用方式:typeof(表达式)和typeof 变量名,第一种是对表达式做运算,第二种是对变量做运算。

function doSomething() {
  console.log('Hello World!');
}
console.log(typeof 1); // number
console.log(typeof 'Hello'); // string
console.log(typeof []); // object
console.log(typeof {}); // object
console.log(typeof doSomething); // function
console.log(typeof true); // boolean
console.log(typeof new Date()); // object
console.log(typeof new RegExp()); // object
console.log(typeof JSON.stringify({
  name: 'zhencanhua'
})); // string
console.log(typeof null); // object
console.log(typeof undefined); // undefined
console.log(typeof (new Error('error!'))); // object

console.log(typeof a); // undefined
console.log(typeof Symbol()); // symbol
console.log(typeof new Set()); // object
console.log(typeof new Map()); // object

从上面打印结果可以看出,typeof 不能区分引用型数据的类型和 null。另我们可以使用 Array.isArray(arr) 将数组类型的数据从中筛选出来。

instanceof 判断(了解)

instanceof 用来检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。 语法:object(实例对象) instanceof constructor(构造函数)。是的话返回 true,否则返回 false。所以, instanceof 运算符只能用作对象的判断。 针对 typeof 不能判断的引用型数据,我们可以使用 instanceof 运算符。

let arr1 = [1, 2, 3];
let obj1 = {
  name: '小明'
};
function Persion() { }
let persion1 = new Persion();
console.log(arr1 instanceof Array); // true
console.log(arr1 instanceof Object); // true,Array 是Object的子类
console.log(obj1 instanceof Object); // true
console.log(obj1 instanceof Array); // false
console.log(Persion instanceof Function, Persion instanceof Object); // true true
console.log(null instanceof Object); // false
console.log(persion1 instanceof Persion, persion1 instanceof Function, persion1 instanceof Object); // true false true
// String对象和Date对象都属于Object类型
let str1 = 'Hello';
let str2 = new String();
let str3 = new String('你好');
let myDate = new Date();
console.log(str1 instanceof String, str1 instanceof Object); // false, false
console.log(str2 instanceof String, str2 instanceof Object); // true, true
console.log(str3 instanceof String, str3 instanceof Object); // true, true
console.log(myDate instanceof Date, myDate instanceof Object); // true, true

从上面的判断可以看出,instanceof 的使用限制很多,而且还不能很清晰方便的判断出一个实例是数组还是对象或方法。

针对上面方法的弊端,我们可以使用 Object.prototype上的原生toString()方法来检测数据的类型。

Object.prototype.toString.call() 判断(最靠谱)

Object 是 JS 提供的原生对象, Object.prototype.toString对任何变量都会返回这样一个字符串"[object class]",class 就是 JS 内置对象的构造函数的名字。 call是用来改变调用函数作用域的。

Object.prototype.toString() 在toString方法被调用时执行下面的操作步骤:

  1. 获取this对象的[[Class]]属性的值。(所以使用call来改变this的指向)
  2. 将字符串"[object ",第一步获取的值, 以及 "]"拼接成新的字符串并返回。

[[Class]]是一个内部属性,所有的对象(原生对象和宿主对象)都拥有该属性。在规范中,[[Class]]是这么定义的: 内部属性的描述, [[Class]] 是一个字符串值,表明了该对象的类型。

读了上面的说明,用 call 的关键地方就在第1步,获取的是 this 对象,不加 call 改变作用域时 this 指向的是Object.prototype。

function doSomething() {
  console.log('Hello World!');
}
// 使用Object.prototype.toString.call来判断
console.log(Object.prototype.toString.call(1)); // [object Number]
console.log(Object.prototype.toString.call('Hello')); // [object String]
console.log(Object.prototype.toString.call(false)); // [object Boolean]
console.log(Object.prototype.toString.call({})); // [object Object]
console.log(Object.prototype.toString.call([1, 2, 3])); // [object Array]
console.log(Object.prototype.toString.call(new Error('error!'))); // [object Error]
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(doSomething)); // [object Function]
console.log(Object.prototype.toString.call(null)); // [object Null]
console.log(Object.prototype.toString.call(undefined)); // [object Undefined]
console.log(Object.prototype.toString.call(JSON.stringify({
  name: 'zhencanhau'
}))); // [object String]
console.log(Object.prototype.toString.call(Math)); // [object Math]
console.log(Object.prototype.toString.call(Symbol('abc'))); // [object Symbol]
console.log(Object.prototype.toString.call(new Set())); // [object Set]
console.log(Object.prototype.toString.call(new Map())); // [object Map]

但在实际应用时我们只想获取返回的结果中数组的第二项,比如"[object Number]",我们只想要Number这段字符,那么我们可以写个函数进行过滤:

// 通过定义一个公共函数获取数据类型
function getTypeName(val) {
  let str = Object.prototype.toString.call(val);
  return /^\[object (.*)\]$/.exec(str)[1];
}
console.log(getTypeName(false)); // Boolean
console.log(getTypeName()); // Undefined
console.log(getTypeName(null)); // Null

上面的问题完美解决。

constructor 判断(比较常用)

每一个对象实例都可以通过 constrcutor 对象来访问它的构造函数 。JS 中内置了一些构造函数:Object、Array、Function、Date、RegExp、String等。我们可以通过数据的 constrcutor 是否与其构造函数相等来判断数据的类型。

var arr = [];
var obj = {};
var date = new Date();
var num = 110;
var str = 'Hello';
var getName = function(){};
var sym = Symbol();
var set = new Set();
var map = new Map();

arr.constructor === Array; // true
obj.constructor === Object; // true
date.constructor === Date; // true
str.constructor === String; // true
getName.constructor === Function; // true
sym.constructor === Symbol; // true
set.constructor === Set; // true
map.constructor === Map // true

但是这种方式仍然有个弊端,就是 constructor 所指向的的构造函数是可以被修改的。

function Name(name) {
  this.name = name;
}

function Stuent(age) {
  this.age = age;
}
// 将构造函数Name的实例赋给Student的原型,Student的原型的构造函数会发生改变,将不再指向自身。
Stuent.prototype = new Name('张三');
Stuent.prototype.constructor === Name; // true
Stuent.prototype.constructor === Stuent; // false

以上就是我在项目中用到过的数据类型的判断方法,具体使用哪一种,还需要根据自己的实际需求来判断选择。

更多精彩内容其他人还在看

js单独获取一个checkbox看其是否被选中

这篇文章主要与大家分享js获取一个checkbox看其是否被选中的具体实现,很简单,但很实用,需要的朋友可以参考下
收藏 0 赞 0 分享

js变量、作用域及内存详解

本文主要详细分析了JS变量,作用域以及内存问题,同时附上非常多的实例,方便大家理解这3个概念,是篇不可多得的文章,希望对大家有所帮助
收藏 0 赞 0 分享

深入理解javascript作用域和闭包

作用域和作用域链是javascript中非常重要的特性,对于他们的理解直接关系到对于整个javascript体系的理解,而闭包又是对作用域的延伸,也是在实际开发中经常使用的一个特性,实际上,不仅仅是javascript,在很多语言中都提供了闭包的特性。
收藏 0 赞 0 分享

IE6 hack for js 集锦

本文主要讲诉了使用js实现网站功能兼容IE6,非常的实用的小技巧,有需要的朋友可以参考下
收藏 0 赞 0 分享

Javascript的setTimeout()使用闭包特性时需要注意的问题

这篇文章主要介绍了Javascript的setTimeout(0)使用闭包特性时需要注意的问题,需要的朋友可以参考下
收藏 0 赞 0 分享

常用的jquery模板插件——jQuery Boilerplate介绍

Query Boilerplate是一个不错的jQuery插件开发工具,使用这个工具可以帮助你快速的构建一个jQuery框架。这个工具提供你很多评论用以帮助你使得开发变得简单和直接,它是个真正的面对对象的工具,你可以实现公开或者私有的方法或者公开或者私有的属性。
收藏 0 赞 0 分享

深入理解javascript构造函数和原型对象

对象,是javascript中非常重要的一个梗,是否能透彻的理解它直接关系到你对整个javascript体系的基础理解,说白了,javascript就是一群对象在搅。。(哔!)。
收藏 0 赞 0 分享

深入理解javascript原型链和继承

这篇文章主要介绍了javascript原型链和继承的概念,以及使用原型链实现继承、经典继承、组合式继承、寄生组合式继承。非常实用,是篇非常不错的文章,这里推荐给大家。
收藏 0 赞 0 分享

再探JavaScript作用域

这篇文章主要介绍了再探JavaScript作用域,本文用简洁的语言和直观的测试结果图片给大家讲解JavaScript的作用域,需要的朋友可以参考下
收藏 0 赞 0 分享

JavaScript获取图片真实大小代码实例

这篇文章主要介绍了JavaScript获取图片真实大小代码实例,本文使用onload事件来获取图片的真实大小,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多