1、作用:

typeof 运算符返回一个用来表示表达式的数据类型的字符串。 
可能的字符串有:"number"、"string"、"boolean"、"object"、"function" 和 "undefined"。

2、常用返回值说明

表达式 返回值
typeof undefined 'undefined'
typeof null 'object'
typeof true 'boolean'
typeof 123 'number'
typeof "abc" 'string'
typeof function() {} 'function'
typeof {} 'object'
typeof [] 'object'
typeof unknownVariable 'undefined'

注意:类型返回值都是字符串、而且都是小写打头

3、常规应用:

1).检查一个变量是否存在,是否有值.
typeof在两种情况下会返回"undefined":一个变量没有被声明的时候,和一个变量的值是undefined的时候.例如:

> typeof undeclaredVariable === "undefined"         true

> var declaredVariable;

> typeof declaredVariable          'undefined'

> typeof undefined                   'undefined'
还有其他办法检测某个值是否是undefined:

> var value = undefined;

> value === undefined             true 
但这种方法如果使用在一个未声明的变量上的时候,就会抛出异常,因为只有typeof才可以正常检测未声明的变量的同时还不报错:

> undeclaredVariable === undefined             ReferenceError: undeclaredVariable is not defined 
注意:未初始化的变量,没有被传入参数的形参,不存在的属性,都不会出现上面的问题,因为它们总是可访问的,值总是undefined:

> var declaredVariable;

> declaredVariable === undefined                    true

> (function (x) { return x === undefined }())   true

> ({}).foo === undefined                                 true 
注:因此,如果想检测一个可能没有被声明的全局变量是否存在,也可以使用 if(window.maybeUndeclaredVariable){}

问题: typeof在完成这样的任务时显得很繁杂.

解决办法: 这样的操作不是很常见,所以有人觉的没必要再找更好的解决办法了.不过也许有人会提出一个专门的操作符:

> defined undeclaredVariable false

> var declaredVariable;

> defined declaredVariable false 
或者,也许有人还需要一个检测变量是否被声明的操作符:

> declared undeclaredVariable false

> var declaredVariable;

> declared declaredVariable true 
译者注:在perl里,上面的defined操作符相当于defined(),上面的declared操作符相当于exists(),

2.判断一个值不等于undefined也不等于null
问题:如果你想检测一个值是否被定义过(值不是undefined也不是null),那么你就遇到了typeof最有名的一个怪异表现(被认为是一个bug):typeof null返回了"object":

> typeof null 'object'
注:这只能说是最初的JavaScript实现的bug,而现在标准就是这样规范的.V8曾经修正并实现过typeof null === "null",但最终证明不可行.http://wiki.ecmascript.org/doku.PHP?id=harmony:typeof_null

解决办法: 不要使用typeof来做这项任务,用下面这样的方法来代替:但是变量x必须事先声明,否则会报错。

function isDefined(x) { return x !== null && x !== undefined; }

另一个可能性是引入一个“默认值运算符”,在myValue未定义的情况下,下面的表达式会返回defaultValue:

myValue || defaultValue
上面的表达式等价于:

(myValue !== undefined && myValue !== null) ? myValue : defaultValue

其实是下面这条语句的简化:

myValue = myValue || defaultValue

3.区分对象值和原始值
下面的函数用来检测x是否是一个对象值:

function isObject(x) { return (typeof x === "function" || (typeof x === "object" && x !== null)); } 
问题: 上面的检测比较复杂,是因为typeof把函数和对象看成是不同的类型,而且typeof null返回"object".

解决办法: 下面的方法也经常用于检测对象值:

function isObject2(x) { return x === Object(x); } 
警告:你也许认为这里可以使用instanceof Object来检测,但是instanceof是通过使用使用一个对象的原型来判断实例关系的,那么没有原型的对象怎么办呢:

> var obj = Object.create(null);

> Object.getPrototypeOf(obj)   null 
obj确实是一个对象,但它不是任何值的实例:

> typeof obj 'object'

> obj instanceof Object false 
在实际中,你可能很少遇到这样的对象,但它的确存在,而且有它的用途.

译者注:Object.prototype就是一个默认存在的,没有原型的对象

>Object.getPrototypeOf(Object.prototype)   null

>typeof Object.prototype   'object'

>Object.prototype instanceof Object false

4.原始值的类型是什么?
typeof是最好的用来查看某个原始值的类型的方式.

> typeof "abc" 'string'

> typeof undefined 'undefined'
问题: 你必须知道typeof null的怪异表现.

> typeof null // 要小心! 'object'

解决办法: 下面的函数可以修复这个问题(只针对这个用例).

function getPrimitiveTypeName(x) {

var typeName = typeof x;

switch(typeName) {

case "undefined": case "boolean": case "number": case "string": return typeName;

case "object": if (x === null) { return "null"; }

default: // 前面的判断都没通过 throw new TypeError("参数不是一个原始值: "+x);

} }

更好的解决办法: 实现一个函数getTypeName(),除了可以返回原始值的的类型,还可以返回对象值的内部[[Class]]属性.这里讲了如何实现这个函数(译者注:jQuery中的$.type就是这样的实现)

5.某个值是否是函数
typeof可以用来检测一个值是否是函数.

> typeof function () {} 'function'

>  typeof Object.prototype.toString 'function'

原则上说,instanceof Function也可以进行这种需求的检测.乍一看,貌似写法还更加优雅.但是,浏览器有一个怪癖:每一个框架和窗口都有它自己的全局变量.因此,如果你将某个框架中的对象传到另一个框架中,instanceof就不能正常工作了,因为这两个框架有着不同的构造函数.这就是为什么ECMAScript5中会有Array.isArray()方法的原因.如果有一个能够跨框架的,用于检查一个对象是否是给定的构造函数的实例的方法的话,那会很好.上述的getTypeName()是一个可用的变通方法,但也许还有一个更根本的解决方案.

6.综述
下面提到的,应该是目前JavaScript中最迫切需要的,可以代替一些typeof目前职责的功能特性:

isDefined() (比如Object.isDefined()): 可以作为一个函数或者一个运算符 
isObject() 
getTypeName() 
能够跨框架的,检测一个对象是否是指定的构造函数的实例的机制 
检查某个变量是否已经被声明这样的需求,可能没那么必要有自己的运算符.

[JS]js中判断变量类型函数typeof的用法汇总[转]的更多相关文章

  1. JavaScript中判断变量类型最简洁的实现方法以及自动类型转换(#################################)

    这篇文章主要介绍了JavaScript中判断整字类型最简洁的实现方法,本文给出多个判断整数的方法,最后总结出一个最短.最简洁的实现方法,需要的朋友可以参考下 我们知道JavaScript提供了type ...

  2. 16. js 判断变量类型,包括ES6 新类型Symbol

    相信大家在开发中遇到需要判断变量类型的问题,js变量按存储类型可分为值类型和引用类型,值类型包括Undefined.String.Number.Boolean,引用类型包括object.Array.F ...

  3. Js中判断变量存不存在的问题

    前面写过jquery对象存在与否的判断.现在谈下Js中判断变量存不存在的问题. 如果这样if(!a),当变量a在js中没有申明时,就会报错,那么接下去的代码将不会被执行.注意,这种判断只要变量申明过, ...

  4. 转战JS(1) 初探与变量类型、运算符、常用函数与转换

    转战JS(1)初探与变量类型.运算符.常用函数与转换 做为一名.NET后台开发人员,正考滤向Web前端开发转型,之前也写过一代前端代码,可是当再回头看JS,并有转向它的意愿的时候,突然发现:原来JS不 ...

  5. jquery ajax中支持哪些返回类型以及js中判断一个类型常用的方法?

    1 jquery ajax中支持哪些返回类型在JQuery中,AJAX有三种实现方式:$.ajax() , $.post , $.get(). 预期服务器返回的数据类型.如果不指定,jQuery 将自 ...

  6. js课程 1-3 Javascript变量类型详解

    js课程 1-3  Javascript变量类型详解 一.总结 一句话总结:js对象点(属性方法),json对象冒号(属性方法).属性和方法区别只有一个括号. 1.json对象中的函数的使用? 函数名 ...

  7. python中判断变量的类型

    python的数据类型有:数字(int).浮点(float).字符串(str),列表(list).元组(tuple).字典(dict).集合(set) 一般通过以下方法进行判断: 1.isinstan ...

  8. js 正则之 判断密码类型

    原文:js 正则之 判断密码类型 今天没啥写的,就分享个思路吧.之前在群里讨论的时候,谢亮兄弟说判断密码是否是纯数字,纯字母之类的.如果用 , 条判断,那就老长一大段了.这个思路是我之前看 jQuer ...

  9. 在C中判断变量存储类型(字符常量/数组/动态变量)

    在C中判断变量存储类型(字符常量/数组/动态变量) 在chinaunix论坛上有人问到关于变量存府类型的问题,我觉得可以写个测试代码加深大家对内存使用和布局的理解.下面我把原问题及处理办法贴出来,限供 ...

随机推荐

  1. C#.NET 中的 Timer 计时器及 3 种使用方法

    定时器是系统常用的组件之一,程序员可以根据自己的需求定制一个定时器类型,也可以使用.net内建的定时器类型.在.net中一共为程序员提供了3种定时器: System.Windows.Forms.Tim ...

  2. Thinkphp table doesn't exist

    系统采用Tp3.2的改造....集群为Mysql双工模式:平时M()主要是操作写,MS操作读...今天在查询 $res =MS("user u")->join("{ ...

  3. Discuz网警过滤关键词库

    积累近几年discuz关键词过滤 使用方法:1.进入后台/内容/词语过滤批量添加.2.打开CensorWords.txt,复制里面的文本信息到批量添加的输入框内,点击确定即可.如图: 关键词下载:Ke ...

  4. springMVC_06数据的处理

    一.提交数据的处理 *springmvc是单例的 1. 提交的域名称和处理方法的参数一致即可 提交的数据 处理方法 2.如果域名城和参数名不一致,在方法内加上域名称eg.(RequestParam(“ ...

  5. Java中关于Map的使用(HashMap、ConcurrentHashMap)

    在日常开发中Map可能是Java集合框架中最常用的一个类了,当我们常规使用HashMap时可能会经常看到以下这种代码: Map<Integer, String> hashMap = new ...

  6. JavaScript主流框架3月趋势总结

    原文: What’s New in JavaScript Frameworks-March 2018 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅 ...

  7. canvas学习笔记之2d画布基础的实现

    一. Canvas是啥 < canvas > 是一个可以使用脚本(通常是js)来绘图的HTML元素 < canvas > 最早由Apple引入WebKit,用于Mac OS X ...

  8. 电脑GIF动图制作方法图文详解

    我们在电脑上可以看到很多动态图,有趣的.搞笑的.可爱的等等,只要我们要用哪种类型的,网上应有尽有,但是想不想自己制作图片呢?今天我们就来学习一下GIF动图制作的方法. 使用工具: 电脑 操作方法: 1 ...

  9. 基于OpenSSL的HTTPS通信C++实现

      HTTPS是以安全为目标的HTTP通道,简单讲是HTTP的安全版.即HTTP下加入SSL层,HTTPS的安全基础是SSL,因此加密的详细内容就需要SSL.Nebula是一个为开发者提供一个快速开发 ...

  10. 读JP摩根的《加密货币展望》阅读笔记

    加密货币不可能死掉, 非常容易以各种形式生存下去早期加密货币的半数以上交易额是地下钱庄交易. 现在已经被投资和投机交易取代.加密货币不可能取代政府发行的货币,其影响到了美元人民币的主权利益加密货币面临 ...