js中判断变量类型函数typeof的用法总结


Posted in Javascript onAugust 09, 2016

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中判断变量类型函数typeof的用法总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 在各个浏览器中执行的耐性
Apr 06 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
Mar 16 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
如何提高javascript加载速度
Dec 26 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
详解js实现线段交点的三种算法
Aug 09 #Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 #Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 #Javascript
引用jquery框架后出错的解决方法
Aug 09 #Javascript
js实现常用排序算法
Aug 09 #Javascript
VC调用javascript的几种方法(推荐)
Aug 09 #Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 #Javascript
You might like
PHP网站基础优化方法小结
2008/09/29 PHP
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
第三章 php操作符与控制结构代码
2011/12/30 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
WebStorm ES6 语法支持设置&babel使用及自动编译(详解)
2017/09/08 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
python简单实现获取当前时间
2016/08/27 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
Python字符串三种格式化输出
2020/09/17 Python
如何利用python 读取配置文件
2021/01/06 Python
入学申请自荐信范文
2014/02/26 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript