判断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 checkbox全选、取消全选实现代码
Mar 05 Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
浅谈React和Redux的连接react-redux
Dec 04 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
ES6 中可以提升幸福度的小功能
Aug 06 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 Javascript
如何理解Vue简单状态管理之store模式
May 15 Vue.js
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
Terran热键控制
2020/03/14 星际争霸
PHP的FTP学习(一)
2006/10/09 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
vue.js的提示组件
2017/03/02 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
vue实现记事本功能
2019/06/26 Javascript
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
韩国11街:11STREET
2018/03/27 全球购物
销售业务员岗位职责
2014/01/29 职场文书
大学生创业策划书
2014/02/02 职场文书
车间主任岗位职责
2014/03/16 职场文书
老公保证书范文
2014/04/29 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
建筑结构施工求职信
2014/07/11 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
2014年保卫工作总结
2014/12/05 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS