判断js数据类型的函数实例详解


Posted in Javascript onMay 23, 2019
function judgeType(change) {
    if (arguments.length == 0) {
      return '0';//无参数传入
    }
    if (change === null) {
      return 'null'
    }
    if (change === undefined && arguments.length > 0) {
      return 'undefined'
    }
    if (change instanceof Function) {
      return 'function'
    }
    if (change instanceof Array) {
      return 'arry'
    }
    if (change instanceof Number || typeof change == 'number') {
      return 'number'
    }
    if (change instanceof String || typeof change == 'string') {
      return 'string'
    }
    if (change instanceof Boolean || typeof change == 'boolean') {
      return 'boolean'
    }
  }

ps:下面看下js 判断各种数据类型

了解js的都知道, 有个typeof  用来判断各种数据类型,有两种写法:typeof   xxx   ,typeof(xxx)

       如下实例:

typeof  2   输出  number
    typeof  null  输出  object
    typeof  {}  输出  object
    typeof  []  输出  object
    typeof  (function(){})  输出 function 
    typeof  undefined     输出 undefined
    typeof  '222'         输出  string 
   typeof true          输出   boolean

    这里面包含了js里面的五种数据类型  number   string    boolean   undefined     object和函数类型 function

     看到这里你肯定会问了:我怎么去区分对象,数组和null呢?

     接下来我们就用到另外一个利器:Object.prototype.toString.call

     这是对象的一个原生原型扩展函数,用来更精确的区分数据类型。

     我们来试试这个玩儿意儿:

var  gettype=Object.prototype.toString
    gettype.call('aaaa')    输出   [object String]
    gettype.call(2222)     输出   [object Number]
    gettype.call(true)     输出   [object Boolean]
    gettype.call(undefined) 输出   [object Undefined]
    gettype.call(null)         输出  [object Null]
     gettype.call({})          输出  [object Object]
     gettype.call([])          输出  [object Array]
     gettype.call(function(){})   输出  [object Function]

      看到这里,刚才的问题我们解决了。

     constructor也能判断数据类型:

     如:

''.constructor==String   
      [].constructor==Array
      var obj= new Object()  
  obj.constructor==Object

      其实js 里面还有好多类型判断      [object HTMLDivElement]     div 对象  ,    [object HTMLBodyElement]  body 对象    ,[object Document](IE)或者  [object HTMLDocument](firefox,google) ......各种dom节点的判断,这些东西在我们写插件的时候都会用到。

     可以封装的方法如下  :

var  gettype=Object.prototype.toString
   var  utility={
     isObj:function(o){
        return  gettype.call(o)=="[object Object]";
     },
     isArray:function(o){
        return  gettype.call(o)=="[object Array]";
     },
     isNULL:function(o){
        return  gettype.call(o)=="[object Null]";
     },
     isDocument:function(){
         return  gettype.call(o)=="[object Document]"|| [object HTMLDocument];
     }
     ........
  }

    这个获取类型的方法有个简单的写法:

var Type = (function() {
        var type = {};
        var typeArr = ['String', 'Object', 'Number', 'Array','Undefined', 'Function', 'Null', 'Symbol'];
        for (var i = 0; i < typeArr.length; i++) {
          (function(name) {
            type['Is' + name] = function(obj) {
              return Object.prototype.toString.call(obj) == '[object ' + name + ']';
            }
          })(typeArr[i]);
        }
        return type;
})();

调用方法:Type.IsFunction(function() {})      Type.IsObject({})。。。。。

Type.Is.....

总结

以上所述是小编给大家介绍的判断js数据类型的函数实例详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
vue实现打印功能的两种方法
Sep 07 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
ElementUI之Message功能拓展详解
Oct 18 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 Javascript
js在HTML的三种引用方式详解
Aug 29 Javascript
结合axios对项目中的api请求进行封装操作
Sep 21 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 Javascript
JS定义函数的几种常用方法小结
May 23 #Javascript
vue-test-utils初使用详解
May 23 #Javascript
了解前端理论:rscss和rsjs
May 23 #Javascript
微信小程序使用字体图标的方法
May 23 #Javascript
个人小程序接入支付解决方案
May 23 #Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 #Javascript
微信小程序上传图片到php服务器的方法
May 23 #Javascript
You might like
PHP下MAIL的另一解决方案
2006/10/09 PHP
PHP无刷新上传文件实现代码
2011/09/19 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
在WordPress中使用wp_count_posts函数来统计文章数量
2016/01/05 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
php常用正则函数实例小结
2016/12/29 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
js中this用法实例详解
2015/05/05 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
PHP webshell检查工具 python实现代码
2009/09/15 Python
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
在Python中关于中文编码问题的处理建议
2015/04/08 Python
简单介绍Python中的decode()方法的使用
2015/05/18 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
生产部岗位职责范文
2014/02/07 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
详解Vue的列表渲染
2021/11/20 Vue.js