详解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中简单的登录界面制作方法
Aug 19 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
JS简单限制textarea内输入字符数量的方法
Oct 14 Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 Javascript
JS实现基本的网页计算器功能示例
Jan 16 Javascript
JS实现简易日历效果
Jan 25 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
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
PHP中调用JAVA
2006/10/09 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
python批量处理文件或文件夹
2020/07/28 Python
python环境下安装opencv库的方法
2020/03/05 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
Java里面如何创建一个内部类的实例
2015/01/19 面试题
运动会400米加油稿(8篇)
2014/09/22 职场文书
2014年教育工作总结
2014/11/26 职场文书
颐和园英文导游词
2015/01/30 职场文书
幼儿园中班教师个人工作总结
2015/02/06 职场文书
门卫管理制度范本
2015/08/05 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS