详解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 相关文章推荐
jquery数组之存放checkbox全选值示例代码
Dec 20 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
js a标签点击事件
Mar 30 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
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
.htaccess文件保护实例讲解
2011/02/06 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
Python基于PycURL实现POST的方法
2015/07/25 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
python 实现性别识别
2020/11/21 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
校长岗位职责
2013/11/26 职场文书
市场营销策划方案
2014/06/11 职场文书
授权委托书样本
2014/09/25 职场文书
单位综合评价意见
2015/06/05 职场文书
学历证明范文
2015/06/16 职场文书
教师培训简讯
2015/07/20 职场文书
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python
python manim实现排序算法动画示例
2022/08/14 Python