JS的数据类型及检查数据类型

基本数据类型(值类型)

 number  string  boolean  null  undefined   Symbol 唯一值 bigint 最大有效数字

引用数据类型

object:{}  []  /^$/  日期对象  Math  实例对象...  function   ES6中新增

检查数据类型
1.typeof

        console.log(typeof "");//string
		console.log(typeof 1);//number
		console.log(typeof true);//boolean
		console.log(typeof null);//object
		console.log(typeof undefined);//undefined
		console.log(typeof []);//object
		console.log(typeof function () {});// function
		console.log(typeof {});//object

可以看到,typeof对于基本数据类型判断是没有问题的,但是遇到引用数据类型(如:Array)是不起作用的。
2.instanceof

	    console.log("1" instanceof String);//false
		console.log(1 instanceof Number);//false
		console.log(true instanceof Boolean);//false
		// console.log(null instanceof Null);
		// console.log(undefined instanceof Undefined);
		console.log([] instanceof Array);// true
		console.log(function () { } instanceof Function);//true
		console.log({} instanceof Object);//true

可以看到前三个都是以对象字面量创建的基本数据类型,但是却不是所属类的实例,这个就有点怪了。后面三个是引用数据类型,可以得到正确的结果。如果我们通过new关键字去创建基本数据类型,你会发现,这时就会输出true,如下:
在这里插入图片描述
接下再来说说为什么null和undefined为什么比较特殊,实际上按理来说,null的所属类就是Null,undefined就是Undefined,但事实并非如此:控制台输出如下结果:
在这里插入图片描述
l浏览器压根不认识这两货,直接报错。在第一个例子你可能已经发现了,typeof null的结果是object,typeof undefined的结果是undefined

在这里插入图片描述
尤其是null,其实这是js设计的一个败笔,早期准备更改null的类型为null,由于当时已经有大量网站使用了null,如果更改,将导致很多网站的逻辑出现漏洞问题,就没有更改过来,于是一直遗留到现在。作为学习者,我们只需要记住就好。
3.constructor

		 console.log(("1").constructor === String);// true
		 console.log((1).constructor === Number);// true
		 console.log((true).constructor === Boolean);// true
		 console.log((null).constructor === Null);// Cannot read property 'constructor' of null
		 console.log((undefined).constructor === Undefined);//Cannot read property 'constructor' of undefined
		 console.log(([]).constructor === Array);// true
		 console.log((function () { }).constructor === Function);// true
		 console.log(({}).constructor === Object);// true

(这里依然抛开null和undefined)乍一看,constructor似乎完全可以应对基本数据类型和引用数据类型,都能检测出数据类型,事实上并不是如此,来看看为什么:

function Fuc() { };
		Fuc.prototype = new Array();
		var ary = new Fuc();
		console.log(ary.constructor === Fuc);//false
		console.log(ary.constructor === Array);//true

我声明了一个构造函数,并且把他的原型指向了Array的原型,所以这种情况下,constructor也显得力不从心了。

看到这里,是不是觉得绝望了。终极解决办法就是第四种办法,看过jQuery源码的人都知道,jQuery实际上就是采用这个方法进行数据类型检测的。
4.Object.prototype.toString.call()

		var type = Object.prototype.toString;
		console.log(type.call("aaa"));//[object String]
		console.log(type.call(1));//[object Number]
		console.log(type.call(true));//[object Boolean]
		console.log(type.call(null));//[object Null]
		console.log(type.call(undefined));//[object Undefined]
		console.log(type.call([]));//[object Array]
		console.log(type.call(function () { }));//[object Function]
		console.log(type.call({}))	//[object Object]

5.jquery.type()
如果对象是undefined或null,则返回相应的“undefined”或“null”。

jQuery.type( undefined ) === "undefined"
jQuery.type() === "undefined"
jQuery.type( window.notDefined ) === "undefined"
jQuery.type( null ) === "null"
如果对象有一个内部的[[Class]]和一个浏览器的内置对象的 [[Class]] 相同,我们返回相应的 [[Class]] 名字。 (有关此技术的更多细节。 )
jQuery.type( true ) === "boolean"
jQuery.type( 3 ) === "number"
jQuery.type( "test" ) === "string"
jQuery.type( function(){} ) === "function"
jQuery.type( [] ) === "array"
jQuery.type( new Date() ) === "date"
jQuery.type( new Error() ) === "error" // as of jQuery 1.9
jQuery.type( /test/ ) === "regexp"
其他一切都将返回它的类型“object”
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值