详解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 相关文章推荐
List the Stored Procedures in a SQL Server database
Jun 20 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
jQuery实现放大镜案例
Oct 19 jQuery
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 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
php阿拉伯数字转中文人民币大写
2015/12/21 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
任意位置显示html菜单
2007/02/01 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
Python 爬虫的工具列表大全
2016/01/31 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
Python OS模块实例详解
2019/04/15 Python
python制作简单五子棋游戏
2019/06/18 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
总结几个非常实用的Python库
2021/06/26 Python