typeof

用法示例

var arr = [];
typeof arr;    //'object'
typeof(arr);    //'object'

typeof实际上是一个一元运算符,因此可以用上述代码所示的两种用法。

typeof所支持的数据类型

从上表可以看出,typeof支持的数据类型还是比较齐全的,除了俩比较特殊以外:

  • Null使用typeof返回object,这跟我们的认知还是有一定差距的,这是javascript的一个设计上的bug,ECMAScript 6中有提议修改此bug,但已经被否决了;不过只要加个逻辑非!运算符,就能把Null这种情况给排除了。
  • 除了function以外,其它具体的对象类型都无法判断出来。

typeof浏览器兼容性注意点

对正则表达式字面量的类型判断在某些浏览器中不符合标准:

typeof /s/ === 'function'; // Chrome 1-12 , 不符合 ECMAScript 5.1
typeof /s/ === 'object'; // Firefox 5+ , 符合 ECMAScript 5.1

IE 宿主对象是对象而不是函数

在 IE 6, 7 和 8 中,大多数的宿主对象是对象,而不是函数,例如:

typeof alert === 'object'

instanceof

用法示例

// 定义构造函数
function C(){}
function D(){} var o = new C();// true,因为 Object.getPrototypeOf(o) === C.prototype
o instanceof C; // false,因为 D.prototype不在o的原型链上
o instanceof D; o instanceof Object; // true,因为Object.prototype.isPrototypeOf(o)返回true

instanceof是一个二元运算符。

instanceof总结

  • javascript中的原生对象以及用户的自定义对象基本上都能利用instanceof识别出来,除了NullUndefined
  • instanceof无法区分开同一原型继承链:
function A(){//...
}function B(){//...
}function C(){//...
}var a = new A();
B.prototype = a;var b = new B();
C.prototype = b;var c = new C();c instanceof A;    //true
c instanceof B;    //true
c instanceof C;    //true

Object.prototype.toString.call

用法示例

function type(obj) {return Object.prototype.toString.call(obj).slice(8, -1);
}
type(1);    //"Number"
type("1");    //"String"
type(true);    //"Boolean"
type(undefined);    //"Undefined"
type(null);    //"Null"
type({});    //"Object"
type([]);    //"Array"
type(new Date);    //"Date"
type(/\d/);    //"RegExp"
type(function() {});    //"Function"function Point(x, y) {//
}
type(new Point(1, 2));    //"Object"

用法解析

从以上用法示例可以看出,这个基于Object.prototype.toString.call封装好的函数用法跟typeof非常相似,但是在支持的数据类型上比typeof强多了,所有的javascript原生数据类型都能判断出来。遗憾的是,Object.prototype.toString.call也不是万能的方案:无法识别自定义的对象类型。
Object.prototype.toString.call实际上是返回这样形式的值:

Object.prototype.toString.call(1);    //'[object Number]'
Object.prototype.toString.call('1');    //'[object String]'

因此只要用slice方法把数据类型“切”出来就成了。

constructor(构造函数)

用法示例

/*
* 获取对象构造函数名称
*/
function getConstructorName(obj){return obj && obj.constructor && obj.constructor.toString().match(/function\s*([^(]*)/)[1]; //利用obj && obj.constructor来判断null和undefined
}

用法解析

这是一种非常巧妙的判断数据类型的方法——利用构造函数判断数据类型,这是基于javascript的特性/规范:

  • 对象的构造函数名就是该数据类型。
  • NullUndefined外,所有的数据类型都是/可以转化为对象,而如果是对象,就肯定有构造函数。

特性

  1. 因为NullUndefined没有构造函数,因此不能用此方法来判断。
  2. 由于同一条原型继承链上的各个对象的构造函数都不一样,因此,此方法可以区分开继承链上的各个自定义数据类型。
function A(){//...
}function B(){//...
}function C(){//...
}var a = new A();
B.prototype = a;var b = new B();
C.prototype = b;var c = new C();getConstructorName(a);    //A
getConstructorName(b);    //B
getConstructorName(c);    //C

总结

以上这四种方法都有不同程度的缺陷,如果从实用性的角度来考虑,可以综合一下:

function type(obj) {console.dir(obj);if(!obj) {return Object.prototype.toString.call(obj).slice(8, -1);}return obj.constructor.toString().match(/function\s*([^(]*)/)[1];
}
var t = type(1) // t==="number"
var t = type(new Number(1)) // t==="number"
var t = type("abc") // t==="string"
var t = type(new String("abc")) // t==="string"
var t = type(true) // t==="boolean"
var t = type(undefined) // t==="undefined"
var t = type(null) // t==="null"
var t = type({}) // t==="object"
var t = type([]) // t==="array"
var t = type(new Date) // t==="date"
var t = type(/\d/) // t==="regexp"
var t = type(function(){}) // t==="function"

参考资料

typeof - JavaScript | MDN
instanceof - JavaScript | MDN

javascript如何判断变量的数据类型相关推荐

  1. javascript基础系列:javascript中的变量和数据类型(一)

    javascript基础系列:javascript中的变量和数据类型(一) 今天开始去重新系统温习一遍js基础,并作下记录 javascript是由三部分组成: ECMASCRIPT(ES): 描述了 ...

  2. html中显示变量的数组,javascript如何判断变量是不是数组?

    javascript如何判断变量是不是数组?下面本篇文章就来给大家介绍一下使用javascript判断变量是不是数组的几种方法,希望对大家有所帮助. 方案一:使用instanceof运算符 语法:变量 ...

  3. Javascript一(变量,数据类型,正则表达式,数据,语句)

    本文章适合具有一定程序编程语言基础的人士阅读,最好学完Java基础再来阅读本文章更容易理解语言初学者会看起来比较费劲,不易理解 一.导入脚本 在html导入Javascript的格式是: <sc ...

  4. html判断变量,javascript如何判断变量是否为对象?

    javascript可以使用用typeof判断简单类型变量是否对象.也可以使用instanceof.constructor.Object.prototype.toString.call()判断变量是否 ...

  5. js如何判断变量的数据类型

    js六大数据类型:number.string.object.Boolean.null.undefined string: 由单引号或双引号来说明,如"string" number: ...

  6. JavaScript第二章——变量及数据类型 2021-09-26

    前言 新手小白JavaScriptt(第二章--变量及数据类型 2021-09-26)学习笔记,欢迎大佬多留言指导,跪谢!!! 一.变量声明 变量:从字面上看,变量是可变的量.从编程角度讲,变量是存储 ...

  7. php如何判断是否新数据类型,php中如何判断变量的数据类型呢?

    摘要: 下文讲述PHP中判断变量数据类型的方法分享,如下所示: 实现思路: 方式1: 使用gettype函数返回变量的数据类型 gettype函数可返回" boolean".&qu ...

  8. [JavaScript]基础(变量、数据类型)

    一.变量 1. 变量概述 ① 什么是变量 白话:变量就是一个装东西的盒子. 通俗:变量是用于存放数据的容器. 我们通过 变量名 获取数据,甚至数据可以修改. ②变量在内存中的存储 本质:变量是程序在内 ...

  9. JavaScript(关于变量及数据类型的使用)

    1.变量 变量:是储存数据的"容器" 如何声明变量: let a =1(let 即关键字 (let: 允许.许可.让.要),所谓关键字是系统提供的专门用来声明(定义)变量的词语,a ...

最新文章

  1. 认识人和鱼的AI,能识别美人鱼吗?阿里CVPR论文试用因果推理方法解答
  2. ubuntu14.04 LTS Python IDE专用编辑器PyCharm开发环境搭建
  3. dede织梦调用顶级二级栏目及下三级栏目方法(数据库实现)
  4. 【转】系统管理类DOS命令汇总
  5. c++枚举类型(二) c++11 枚举类
  6. 如何让电脑成为看图说话的高手?计算机视觉顶会ICCV论文解读
  7. SQL 数据库远程备份 语句
  8. Update resources 和 Update classes and resources 的特殊情况
  9. [Leetcode][第63题][JAVA][不同路径2][动态规划][压缩路径]
  10. 8分钟回顾开源巨头 Facebook 的 2016
  11. Custom Looks using Qt Style Sheets
  12. mysql8和php7不能连接_php无法连接mysql8.x
  13. 百度关键词点击ios_百度推广关键词点击价格高,如何处理?
  14. UVA 620 - Cellular Structure
  15. 【HDU3336】Count the String(kmp--每个前缀出现的次数)
  16. 网络延迟及故障分析与排查实战
  17. 高通Android Q(android10)设置默认锁屏壁纸
  18. 堕落史话——一入学,就堕落
  19. 微信头像失效_微信头像地址失效踩坑记附带解决方案
  20. java三层架构实现登录_用户登录——三层架构

热门文章

  1. 谷歌Colab也搞“超级会员”,普通会员云GPU被降级,想用高端得加钱
  2. 清华团队将Transformer用到3D点云分割上后,效果好极了丨开源
  3. PonyAI小马智行官宣再获2.67亿美元融资,创办4年累计吸金超10亿美元
  4. 阿里达摩院数学竞赛考题曝光!4道题限时48小时,网友:题目能看懂但就是不会做...
  5. MongoDB导入json数据
  6. Fabric环境搭建
  7. 嵌入式Linux USB驱动开发之教你一步步编写USB驱动程序
  8. 使用SKIP-GRANT-TABLES 解决 MYSQL ROOT密码丢失
  9. iOS开发之观察者模式初探
  10. DevExpress打印功能 z