关灯
开启左侧

如何判断JavaScript中判断数据类型?

[复制链接]
老蚊子 发表于 2019-2-22 12:37:08 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
本帖最后由 老蚊子 于 2019-2-22 12:38 编辑

1. typeof?
根据MDN:typeof操作符返回一个字符串,表示未经计算的操作数的类型。
  1. typeof 1; // 'number'
  2. typeof NaN; // 'number'
  3. typeof 'zenquan'; // 'string'
  4. typeof true; // 'boolean'
  5. typeof null; // 'object'
  6. typeof undefined; // 'undefined'
  7. typeof Symbol(); // 'symbol'
  8. typeof console.log // "function"
复制代码
typeof出现的问题1——typeof null === 'object'


然后你会发现,typeof null; // 'object'。null可是原始数据类型的啊,怎么就是'object'了呢??(不解.jpg)原来这个已经是历史问题了,在 JS 的最初版本中使用的是 32 位系统,为了性能考虑使用低位存储变量的类型信息,000 开头代表是对象,然而 null 表示为全零,所以将它错误的判断为 object 。虽然现在的内部类型判断代码已经改变了,但是对于这个 Bug 却是一直流传下来。

typeof出现的问题2——typeof 引用类型 || Math === ‘object’

这样根本不知道是数组还是对象

  1. typeof [] // "object"
  2. typeof {} // "object"
复制代码
typeof出现的问题3——typeof 基本包装类型 || Array ||Date === ‘funtion’

这样也不能知道是Number还是Boolean还是String
  1. typeof Number // "function"
  2. typeof Boolean // "function"
  3. typeof String // "function"
复制代码
2. instanceof?
因为typeof有了以上的问题,所以才有了instanceof。

根据MDN:instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置
也就是 p instaceof person === true,则p是person的实例化对象,用于包装对象或者是引用类型对象的判断。

  1. var str1 = 'zenquan';
  2. console.log(str1 instanceof String); // false
  3. var str2 = new String('jomsou');
  4. console.log(str2 instanceof String); // true
复制代码
可能会出现的面试题: 如何判断一个数组?
方法1: instanceof
  1. arr instanceof Array
复制代码
方法2: Array.isArray()
  1. Array.isArray([])
复制代码

3.结合typeof和instanceof实现判断是否为原始类型

  1. class PrimitiveString {
  2.     static [Symbol.hasInstance](x) {
  3.         return typeof(x) == 'string';
  4.     }
  5. }
  6. console.log('hello world' instanceof PrimitiveString);
复制代码
你可能不知道 Symbol.hasInstance 是什么东西,其实就是一个能让我们自定义 instanceof 行为的东西,以上代码等同于 typeof 'hello world' === 'string',所以结果自然是 true 了。这其实也侧面反映了一个问题, instanceof 也不是百分之百可信的。
4. 判断数据类型的方法
  • Object.prototype.toString.call(e).slice(8, -1)
  1. function type(e) {
  2.     return Object.prototype.toString.call(e).slice(8, -1);
  3. }
  4. console.log(type(null))
  5. console.log(type(1))
  6. console.log(type('zenquan'))
  7. console.log(type(undefined))
  8. console.log(type(Symbol()))
  9. console.log(type(true))
  10. console.log(type(console.log))
复制代码
  • type: JS类型检测库,弥补typeof的问题,原生兼容IE6
  • 通过一些系统自带的API函数来判断,eg: Array.isArray()
所以,typeof和instanceof结合起来就可以数据类型的判断。

 

精彩评论2

正序浏览
二博二博 发表于 2019-2-24 14:56:28 来自手机 | 显示全部楼层
 
给文叔叔捧场
 
 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


1关注

11粉丝

61帖子

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )