js中数据类型判断各种坑和解决方法

举报
多米诺的古牌 发表于 2021/05/17 17:33:32 2021/05/17
【摘要】 1.js类型判断由于Js是一门弱语言,它在声明变量时无需确定变量的类型,在js运行时会自动判断。但我们在实际使用中往往根据类型判断进行各种逻辑操作,这时候就需要使用js提供的typeof运算符用来检测变量的类型是什么或者通过instanceof进行指定的类型进行判断是否符合。2.typeof获取类型console.log(typeof 123); // numbe...

1.js类型判断

由于Js是一门弱语言,它在声明变量时无需确定变量的类型,在js运行时会自动判断。但我们在实际使用中往往根据类型判断进行各种逻辑操作,这时候就需要使用js提供的typeof运算符用来检测变量的类型是什么或者通过instanceof进行指定的类型进行判断是否符合。
2.typeof获取类型
console.log(typeof 123);               // number
console.log(typeof true);            // boolean
console.log(typeof 'str');           // string
console.log(typeof []);              // object     
console.log(typeof function(){});    // function
console.log(typeof {});              // object
console.log(typeof undefined);       // undefined
console.log(typeof null);            // object     

其中数组的数据类型通过 typeof运算符获取为 object类型,null 的数据类型通过 typeof 运算符也被获取为 object类型,这样看着好像表示的不够精准,但想想人家的弱语言的性质,理解一下,具体可以自行查询下js的发展史,就可以理解大佬的厉害与随性了。

2. instanceof判断指定类型

console.log(123 instanceof Number);                    // false
console.log(true instanceof Boolean);                // false 
console.log('str' instanceof String);                // false  
console.log([] instanceof Array);                    // true
console.log(function(){} instanceof Function);       // true
console.log({} instanceof Object);                   // true

以上结果显示,断数据类型里面还存在很多坑,不能一起进行判断,只有引用数据类型Array,Function,Object会被精准判断,但是其他如的数据类型,比如数值Number,布尔值Boolean,字符串String的值不能被instanceof运算符进行精准的判断。

MDN中的instanceof 运算符解释是用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性,就是判断对象是否是某一数据类型的实例,即为判断一个对象是否是数据类型的实例。

在上面例子中,123(数值), true (布尔值),'str'(字符串)按照上面解释理解为都不是实例,所以判断值为false。

那么怎么判断数值、布尔值和字符串这三个类型呢?

可以手动进行实例化操作,通过new Number(XXX),new Boolean(XXX),new String(XXX)进行实例化后再进行判断,此时就可以判断准确了

接着继续采坑,说一下绕不开的空值问题,js中空值可以分为两种一种是null,另一种是undefined,按照上面的操作应该是理解为null的所属类就是Null,undefined就是Undefined,然后进行手动实例化就可以了,但是

意不意外,惊不惊喜,就是不按常理出牌,就是不让你用一种方法判断所有类型= =!这里实际上是浏览器认为null,undefined不是构造器,但是在 上面的typeof运算符中null获取的结果是object类型,而undefined的结果是undefined。这里就不吐槽弱语言的特性,和js的发展史了,感兴趣的同学可以自行查询下相关历史,总之这个是个历史遗留问题。

那么问题又回到最初的起点,null和undefined怎么进行判断呢?解决办法也是很意外的,进行取反就可以了= =!是不是又是很惊喜,是的就是这样就可以进行判断了。

通过使用Object.prototype.toString.call()方法可以完美解决上面的问题,进行精准的类型判断,并返回一个会返回一个形如 "[object XXX]" 的字符串,结果如下:

此处即完美解决了js中各种数据类型的类型判断,显示出的结果也都相对精确。



【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。