详解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 相关文章推荐
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
js取整数、取余数的方法
May 11 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
Jun 14 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
Sep 29 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
jQuery实现的简单拖拽功能示例
Sep 13 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 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
PHP 上传文件大小限制
2009/07/05 PHP
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
用PHP读取flv文件的播放时间长度
2009/09/03 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
JQuery中getJSON的使用方法
2010/12/13 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
详解js闭包
2014/09/02 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
Bootstrap表单布局
2016/07/19 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
编程语言Python的发展史
2014/09/26 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
linux安装python修改默认python版本方法
2019/03/31 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
Python求凸包及多边形面积教程
2020/04/12 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
七年级地理教学反思
2014/01/26 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
暑期社会实践证明书
2014/11/17 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL