详解js类型判断


Posted in Javascript onMay 22, 2018

js类型转换中typeof会将null也识别为object, 而且返回的类型比少,我们用Object.prototype.toString来实现

第一版

function isArray(value){
  return Object.prototype.toString.call(value) === "[object Array]";
}

function isFunction(value){
  return Object.prototype.toString.call(value) === "[object Function]";
}

但是这样写,一个个去判断数组,函数,对象的话很麻烦,比较过程化

第二版

我们想用type(obj)的方式返回对应的类型字符串,因为typeof是小写,所以我们也返回小写的标准

function type(obj){
  // -1 代表截止到倒数一位
  return Object.prototype.toString.call(obj).slice(8,-1).toLowerCase()
}

type([]) // "array"

但是这样每次都需要对判断的类型进行slice和toLowerCase也是比较耗性能的, 而且判断类型只有几种,所以我们可以用对象提前将可能的结果缓存起来

第三版

//将types放外面 而不是放在type函数里面, 利用闭包,优化性能,不用每次判断都声明一次typess
var types = {
  '[object Function]': 'function',
  '[object Number]': 'number',
  ...
}

function type(obj) {
  var str = Object.prototype.toString.call(obj)
  return types[str]
}

当然上面的types我们还可以这样优化

// 参考自jquery源码
var types = {}
当然也可以直接用数组存储
"Boolean Number String Function Array Date RegExp Object Error".split(" ").forEach(function(e,i){
  types [ "[object " + e + "]" ] = e.toLowerCase();
}) ;

判断window对象

利用window对象的window属性等于自身

function isWindow( obj ) {
  // obj !== undefined 是为了防止没传参数的时候后面报错
  // Uncaught TypeError: Cannot read property 'window' of undefined的错误
  
  return obj !== undefined && obj === obj.window;
}

判断是不是dom元素

isElement = function(obj) {
  return !!(obj && obj.nodeType === 1);
}
Javascript 相关文章推荐
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 #Javascript
swiper 自动图片无限轮播实现代码
May 21 #Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 #Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 #jQuery
基于Vue的延迟加载插件vue-view-lazy
May 21 #Javascript
jQuery获取随机颜色的实例代码
May 21 #jQuery
JS实现常见的查找、排序、去重算法示例
May 21 #Javascript
You might like
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
全国FM电台频率大全 - 25 云南省
2020/03/11 无线电
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
原生js实现购物车
2020/09/23 Javascript
跟老齐学Python之用while来循环
2014/10/02 Python
Python最基本的输入输出详解
2015/04/25 Python
python使用socket远程连接错误处理方法
2015/04/29 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
大学学习个人的自我评价
2014/02/18 职场文书
国际贸易系求职信
2014/08/09 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
评职称个人总结
2015/03/05 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
小学毕业教师寄语
2019/06/21 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
浅谈MySQL之select优化方案
2021/08/07 MySQL
Python&Matlab实现樱花的绘制
2022/04/07 Python
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript