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. 禅道导入bugfree 3.0的数据

    禅道项目导入bugfree功能只支持到2.0, 官方不提供3.0的导入,只好自己写了一个.因为bugfree 3.0换人开发了,表结构和禅道差别很大,所以,这个工具不是完全转换,一些History表内 ...

  2. java安全管理器SecurityManager介绍

    java安全管理器类SecurityManager简单剖析: javadoc介绍: SecurityManager是一个允许应用实现一种安全策略的类.它允许一个应用去明确,在执行一个可能安全或者敏感的 ...

  3. JavaScript开发工具简明历史

    译者按: JavaScript开发要用到的工具越来越多,越来越复杂,为什么呢?你真的弄明白了吗? 原文: Modern JavaScript Explained For Dinosaurs 为了保证可 ...

  4. Javascript 流程控制

    流程控制 JavaScript通过流程语句来执行程序流,程序流有若干语句组成.在正常情况下,程序中 的语句时按照书写顺序执行的,这种结构称为顺序结构.除了顺序结构之外还有选择结构和循环结构. 1.选择 ...

  5. RecyclerView 高度不能随着Item数量 自适应高度

    在最近项目中遇到 ,在RecyclerView加载list数据时,高度无法自适应增长,看了很多博客,各种尝试,都没有解决这个问题,在某个博客中,讲到此解决方法,在此记录下. 即在RecyclerVie ...

  6. 解决Spark filter过滤条件中使用>=或<=时不识别的问题

    一.场景 val jldxx_zxzq = jldxx_with_dddf .withColumn("ZXZQ", zxzq(col("CBZQ"))) .fi ...

  7. C#-结构体(十)

    结构体概念 在C#中,结构体是值类型,一般适用于表示类似Point.Rectangle.Color的对象 值类型能够降低对堆的管理.使用.降低垃圾回收,表现出更好的性能.可是值类型也有不好的一面.会涉 ...

  8. dialog 关闭 清除

    div.dialog({ close: function () { $(this).dialog('destroy').remove(); } });

  9. SSM 框架 ---项目整合

    一.SSM框架理解 Spring(业务层) Spring就像是整个项目中装配bean的大工厂,在配置文件中可以指定使用特定的参数去调用实体类的构造方法来实例化对象. Spring的核心思想是IoC(控 ...

  10. 7. svg学习笔记-图案和渐变

    之前,我们仅仅使用纯色来为图形填充颜色和绘制轮廓,除此之外,我们还可以使用图案和渐变来填充图形或者是绘制轮廓. 图案 图案的效果类似于,在网页中给一个元素指定背景图像,当背景图像的尺寸小于元素的尺寸的 ...