JS 中对变量类型的五种判断方法

Posted 放咩咩的星星

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS 中对变量类型的五种判断方法相关的知识,希望对你有一定的参考价值。

5种基本数据类型:undefined、null、boolean、unmber、string

复杂数据类型:object、

object:array、function、date等

 

方法一:使用typeof检测

当需要变量是否是number,string,boolean

,function,undefined,json类型时,可以使用typeof进行判断;其他变量是判断不出类型的,包括null。

typeof是区分不出array和json类型的,因为使用typeof这个变量时,array和json类型输出的都是object

 

方法二:使用instance检测

javascript 中,判断一个变量的类型尝尝会用 typeof 运算符,在使用 typeof 运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回 “object”。ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。instanceof 运算符与 typeof 运算符相似,用于识别正在处理的对象的类型。与 typeof 方法不同的是,instanceof 方法要求开发者明确地确认对象为某特定类型

instanceof还能检测出多层继承的关系,例如:

 

function Person(){

 

}

function Student(){

 

}

Student.prototype = new Person();

var John = new Student();

console.log(John instanceof Student); // true

console.log(John instancdof Person);  // true

 

因为js中没有Undefined和Null的这种全局类型,他们und和nul都属于Object类型,因此输出了true。

 

方法三:使用constructor检测

constructor本来是原型对象上的属性,指向构造函数。但是根据实例对象寻找属性的顺序,若实例对象上没有实例属性或方法,就去原型链上寻找,因此,实例对象也是能使用constructor属性的

因为undefined和null没有constructor属性,所以不能使用constructor判断

看下面的例子:

 

function Person(){

 

}

function Student(){

 

}

Student.prototype = new Person();

var John = new Student();

console.log(John.constructor==Student); // false

console.log(John.constructor==Person);  // true

 

在上面的例子中,Student原型中的constructor被修改指向到Person,导致检测不出实例对象John真实的构造函数

 

同时,使用instaceof和construcor,被判断的array必须是在当前页面声明的!比如,一个页面(父页面)有一个框架,框架中引用了一个页面(子页面),在子页面中声明了一个array,并将其赋值给父页面的一个变量,这时判断该变量,Array == object.constructor;会返回false;

 

原因:

 

1、array属于引用型数据,在传递过程中,仅仅是引用地址的传递。

2、每个页面的Array原生对象所引用的地址是不一样的,在子页面声明的array,所对应的构造函数,是子页面的Array对象;父页面来进行判断,使用的Array并不等于子页面的Array;切记,不然很难跟踪问题!

 

方法四:使用Object.prototype.toString.call

Object.prototype.toString.call(变量)输出的是一个字符串,字符串里有一个数组,第一个参数是Object,第二个参数就是这个变量的类型,而且,所有变量的类型都检测出来了,我们只需要取出第二个参数即可。或者可以使用Object.prototype.toString.call(arr)=="object Array"来检测变量arr是不是数组。

 

方法五:jquery中$.type的实现

jquery中就是用Object.prototype.toString.call实现的,把‘[object Boolean]‘类型转成‘boolean‘类型并返回

以上是关于JS 中对变量类型的五种判断方法的主要内容,如果未能解决你的问题,请参考以下文章

JS 中对变量类型的判断

js隐式转换

2.1 javascript中的五种基本数据类型(待更新)

js如何判断变量的数据类型

JS有几种方法判断变量的类型?

JS-判断js数据类型的几种方式