阅读 150

js系列之类型判断

在项目开发中,会遇到类型的判断,针对业务需要的类型,做一些内容添加或者删除,比如:前端通过接口获取到的数据,是数字类型,需要根据返回的不同数据做一些文本的转换,例如:1->男,2->女

js有那些数据类型

ECMAScript有7种简单数据类型(也称为原始类型,有时看别人的文章,还叫基本数据类型),Number、String、Boolean、Undefined、Null、Symbol(符号)、BigInt。Symbol是ES6新增的。BigInt是ES11新增的。还有一种复杂数据类型Object。

typeof

js中提供了判断类型的操作符typeof。 对一个值使用typeof操作符会返回下列的字符串之一:

  • 'undefined':表示值为定义
  • 'boolean':表示值为布尔值
  • 'string':表示值为字符串
  • 'number':表示值为数值
  • 'object':表示值为对象(而不是函数),或者null
  • 'function':表示值为函数
  • 'symbol':表示值为符号

WechatIMG7.png

从上面的截图中,可以看到在简单数据类型中,对值执行typeof的时候,返回的都是对应的类型,只有对值null执行typeof的时候,返回的是object,为什么返回的不是null。这是一个历史遗留问题。

在第一版的javaScript中,javaScript中不同的对象在底层都表示为二进制,而javaScript中会把二进制前三位为0的都判断为object类型,而null的二进制标识全为0,自然前三位都为0,所以,执行typeof时会返回'object' 引用《你不知道的javaScript(上卷)》

toString

toString是Object的原型上的方法,调用该方法,默认返回当前对象的 [[Class]] 。这是一个内部属性,其格式为 [object Xxx] ,其中 Xxx 就是对象的类型。

对于 Object 对象,直接调用 toString() 就能返回 [object Object] 。而对于其他对象,需要使用Function.prototype.call() 或者 Function.prototype.apply() 的形式来调用

WechatIMG8.png

constructor

constructor是原型prototype的一个属性,当函数被定义时候,js引擎会为函数添加原型prototype,并且这个prototype中constructor属性指向函数引用, 因此重写prototype会丢失原来的constructor。

这种方法是有问题的

  1. null 和 undefined 无constructor,这种方法判断不了。

2.还有,如果自定义对象,开发者重写prototype之后,原有的constructor会丢失,因此,为了规范开发,在重写对象原型时一般都需要重新给 constructor 赋值,以保证对象实例的类型不被篡改。

instanceof

instanceof 是用来判断 A 是否为 B 的实例,表达式为:A instanceof B,如果 A 是 B 的实例,则返回 true,否则返回 false。 在这里需要特别注意的是:instanceof 检测的是原型,

instanceof 只能用来判断两个对象是否属于实例关系, 而不能判断一个对象实例具体属于哪种类型。

总结

结合上面的不同操作,一般是封装toString()。而判断当前值是属于什么类型。

  let toString = Object.prototype.toString
 
  let isType = function(val,type) {
   return function(val) {
     return toString.call(val) === `[object ${type}]`
   }
 }
复制代码
文章分类
前端
文章标签