JS判断数据类型的5种方法

我们先来了解一下JS中数据类型有哪些

基本数据类型(值类型):String、Number、boolean、null、undefined、symbol(es6新增的)

引用数据类型 (引用类型):object。包含 Function、Array、Date、RegExp、Error等都是属于 Object 类型 。

一、typeof

  • 通常用来判断基本数据类型,它返回表示数据类型的字符串(返回结果只能包括number,boolean,string,function,undefined,object); *注意,使用typeof来判断null和引用类型的实例 返回的结果都是 'object'
  • 可以使用typeof判断变量是否存在(如if(typeof a!="undefined"){...});
typeof 1           //number
typeof 'a'         //string
typeof true        //boolean
typeof undefined   //undefined

typeof null        //object

typeof {}          //object
typeof [1,2,3]     //object

function Fn(){}
typeof new Fn()    //object

typeof new Array() //object

 

二、instanceof

  • 使用instanceof,如:a instanceof A 根据instanceof的定义:判断参照对象(大写字母A)的prototype属性所指向的对象是否在被行测对象a的原型链上,instanceof 只能用来判断两个对象是否属于实例关系,而不能判断一个对象实例具体属于哪种类型,例如:
function A(name,age){
  this.name = name;
  this.age = age;
}

a = new A('张三',18);
console.log(a instanceof A)  //true


obj = new Object()//创建一个空对象obj
//或者通过字面量来创建:
obj = {}
console.log(obj instanceof Object); // true

arr = new Array()  //创建一个空数组arr  或arr = []
console.log(arr instanceof Array ); // true

date = new Date()
console.log(date instanceof Date ); // true

// 注意:instanceof后面一定要是对象类型,instanceof前面相当于它的实例对象,
// 后面的对象类型大小写不能写错,该方法试用一些条件选择或分支

但是这种方式判断有个弊端:对于number,string,boolean这三种基本数据类型,

     只有通过构造函数定义比如:let num =new Number(1);这样定义才能检测出。

     let num = 1; 这样定义是检测不出来的

简单实现instanceof:

function my_instanceof(L, R) {
  const O = R.prototype;
  if (L === null) {
    return false;
  }
  L = L.__proto__;
  while (true) {
    if (L === null) {
      return false;
    }
    if (L === O) {
      return true;
    }
    L = L.__proto__;
  }
}

三、根据constructor判断 

  • 针对于instanceof的弊端,我们使用constructor检测,constructor是原型对象的属性指向构造函数。
console.log('数据类型判断 -  constructor');


let num = 23;
let date = new Date();
let str = "biu~";
let reg = new RegExp();
let bool = true;
let fn = function () {
  console.log(886);
};
let udf = undefined;
let nul = null;
let array = [1, 2, 3];
console.log(num.constructor); // [Function: Number]
console.log(date.constructor); // [Function: Date]
console.log(str.constructor); // [Function: String]
console.log(bool.constructor); // [Function: Boolean]
console.log(fn.constructor); // [Function: Function]
console.log(reg.constructor); // [Function: RegExp]
console.log(array.constructor); // [Function: Array]

  •  这种方式解决了instanceof的弊端,可以检测出除了undefined和null的9种类型(因为它两没有原生构造函数) 
console.log(udf.constructor);//Cannot read property "constructor" of undefined
console.log(nul.constructor);//Cannot read property "constructor" of null

四、通过Object下的toString.call()方法来判断 

  • 在《你不知道的javaScript》(中卷)中讲到:所有typeof返回值为"object"的对象,都包含一个内部属性[[Class]],我们可以把他看作一个内部的分类,而非传统意义上面向对象的类,这个属性无法直接访问,一般通过Object.prototype.toString(…)来查看。并且对于基本数据类类型null,undefined这样没有原生构造函数,内部的[[Class]]属性值仍然是NullUndefined 
Object.prototype.toString.call();
console.log(toString.call(123));          //[object Number]
console.log(toString.call('123'));        //[object String]
console.log(toString.call(undefined));    //[object Undefined]
console.log(toString.call(true));         //[object Boolean]
console.log(toString.call({}));           //[object Object]
console.log(toString.call([]));           //[object Array]
console.log(toString.call(function(){})); //[object Function]

 

五、jq中判断数据类型的方法 

jQuery提供了一系列工具方法,用来判断数据类型,以弥补JavaScript原生的typeof运算符的不足。以下方法对参数进行判断,返回一个布尔值。
jQuery.isArray();是否为数组
jQuery.isEmptyObject();是否为空对象 (不含可枚举属性)。
jQuery.isFunction():是否为函数
jQuery.isNumberic():是否为数字
jQuery.isPlainObject():是否为使用“{}”或“new Object”生成对象,而不是浏览器原生提供的对象。
jQuery.isWindow(): 是否为window对象;
jQuery.isXMLDoc(): 判断一个DOM节点是否处于XML文档中。

 

你可能感兴趣的:(javascript,1024程序员节)