JavaScript知识点总结(六)之JavaScript判断变量数据类型


Posted in Javascript onMay 31, 2016

最近做了一个项目,其中有关于js判断数据类型的处理,在网上搜了相关资料,并且亲自测试了各种数据类型的判断,绝对安全。下面小编把具体内容总结分享给大家,大家参考下!

一、JS中的数据类型

1.数值型(Number):包括整数、浮点数。

2.布尔型(Boolean)

3.字符串型(String)

4.对象(Object)

5.数组(Array)

6.空值(Null)

7.未定义(Undefined)

二、判断一个变量的数据类型

1.数值型(number)

比较常用的判断方法是:

function isNumber(val){
return typeof val === 'number';
}

但有些情况就不行,比如:

var a;
alert(isNumber(parseInt(a)));

这里弹出来的是true,如下图所示:

JavaScript知识点总结(六)之JavaScript判断变量数据类型

但实际上变量a是NaN,它是不能用于数值运算的。

所以上面的函数可以修改为:

function isNumber(val){
return typeof val === 'number' && isFinite(val);
}

修改了之后,弹出来的就是false,如下图所示:

JavaScript知识点总结(六)之JavaScript判断变量数据类型

顺便介绍一下JavaScript isFinite() 函数,isFinite() 函数用于检查其参数是否是无穷大,如果 number 是有限数字(或可转换为有限数字),那么返回 true。否则,如果 number 是 NaN(非数字),或者是正、负无穷大的数,则返回 false。

2.布尔型(boolean)

布尔类型的判断比较简单,可以用如下的方法进行判断:

/*
判断变量val是不是布尔类型
*/
function isBooleanType(val) {
return typeof val ==="boolean";
}

测试代码:

<script type="text/javascript">
/*
判断变量val是不是布尔类型
*/
function isBooleanType(val) {
return typeof val ==="boolean";
}
var a;
var b = false;
alert("变量a是布尔类型的判断结果是:"+isBooleanType(a));
alert("变量b是布尔类型的判断结果是:"+isBooleanType(b));
</script>

运行结果:

JavaScript知识点总结(六)之JavaScript判断变量数据类型

3. 字符串(String)

字符串类型的判断比较简单,可以用如下的方法进行判断:

/*
判断变量是不是字符串类型
*/
function isStringType(val) {
return typeof val === "string";
}

测试代码:

<script type="text/javascript">
/*
判断变量是不是字符串类型
*/
function isStringType(val) {
return typeof val === "string";
}
var a;
var s = "strType";
alert("变量a是字符串类型的判断结果是:"+isStringType(a));
alert("变量s是字符串类型的判断结果是:"+isStringType(s));
</script>

运行结果:

JavaScript知识点总结(六)之JavaScript判断变量数据类型

4.未定义(Undefined)

未定义的判断比较简单,可以用如下的方法进行判断:

/*
判断变量是不是Undefined
*/
function isUndefined(val) {
return typeof val === "undefined";
}

测试代码:

<script type="text/javascript">
var a;//a是undefined
var s = "strType";
/*
判断变量是不是Undefined
*/
function isUndefined(val) {
return typeof val === "undefined";
}
alert("变量a是Undefined的判断结果是:"+isUndefined(a));
alert("变量s是Undefined的判断结果是:"+isUndefined(s));
</script>

运行结果:

JavaScript知识点总结(六)之JavaScript判断变量数据类型

5.对象(Object)

由于当变量是空值Null时,typeof也会返回object,所以Object不能直接用 typeof 判断。

应该这样:

function isObj(str){
if(str === null || typeof str === 'undefined'){
return false;
}
return typeof str === 'object';
}

测试代码:

<script type="text/javascript">
/*
判断变量是不是Object类型
*/
function isObj(str){
if(str === null || typeof str === 'undefined'){
return false;
}
return typeof str === 'object';
}
var a;
var b = null;
var c = "str";
var d = {};
var e = new Object();
alert("b的值是null,typeof b ==='object'的判断结果是:"+(typeof b ==='object'));
alert("变量a是Object类型的判断结果是:"+isObj(a));//false
alert("变量b是Object类型的判断结果是:"+isObj(b));//false
alert("变量c是Object类型的判断结果是:"+isObj(c));//false
alert("变量d是Object类型的判断结果是:"+isObj(d));//true
alert("变量e是Object类型的判断结果是:"+isObj(e));//true
</script>

运行结果:

JavaScript知识点总结(六)之JavaScript判断变量数据类型

6.空值(Null)

判断空值用 val === null 即可

function isNull(val){
return val === null;
}

测试代码:

/*
判断变量是不是null
*/
function isNull(val){
return val === null;
}
/*测试变量*/
var a;
var b = null;
var c = "str";
//弹出运行结果
alert("变量a是null的判断结果是:"+isNull(a));//false
alert("变量b是null类型的判断结果是:"+isNull(b));//true
alert("变量c是null类型的判断结果是:"+isNull(c));//false

运行结果:

JavaScript知识点总结(六)之JavaScript判断变量数据类型

7.数组(Array)

数组类型不可用typeof来判断。因为当变量是数组类型是,typeof会返回object。

  这里有两种方法判断数组类型:

/*判断变量arr是不是数组
方法一
*/
function isArray(arr) {
return Object.prototype.toString.apply(arr) === '[object Array]';
}
/*判断变量arr是不是数组
方法二
*/
function isArray(arr) {
if(arr === null || typeof arr === 'undefined'){
return false;
}
return arr.constructor === Array;
}

测试代码:

<script type="text/javascript">
/*判断变量arr是不是数组
方法一
*/
function isArray(arr) {
return Object.prototype.toString.apply(arr) === '[object Array]';
}
/*判断变量arr是不是数组
方法二
*/
function isArray(arr) {
if(arr === null || typeof arr === 'undefined'){
return false;
}
return arr.constructor === Array;
}
//测试变量
var a = null;
var b = "";
var c ;
var arr = [,,];
var arr = new Array();
//打印测试结果
document.write("arr变量是数组类型,typeof arr === 'object'的结果是:"+(typeof arr === 'object'));
document.write("<br/>");
document.write("------------------------------------------------------------------------------------------------");
document.write("<br/>");
document.write("使用isArray方法判断结果如下:");
document.write("<br/>");
document.write("------------------------------------------------------------------------------------------------");
document.write("<br/>");
document.write("变量a是数组类型的判断结果是:"+isArray(a));
document.write("<br/>");
document.write("变量b是数组类型的判断结果是:"+isArray(b));
document.write("<br/>");
document.write("变量c是数组类型的判断结果是:"+isArray(c));
document.write("<br/>");
document.write("变量arr是数组类型的判断结果是:"+isArray(arr));
document.write("<br/>");
document.write("变量arr是数组类型的判断结果是:"+isArray(arr));
document.write("<br/>");
document.write("------------------------------------------------------------------------------------------------");
document.write("<br/>");
document.write("使用isArray方法判断结果如下:");
document.write("<br/>");
document.write("------------------------------------------------------------------------------------------------");
document.write("<br/>");
document.write("变量a是数组类型的判断结果是:"+isArray(a));
document.write("<br/>");
document.write("变量b是数组类型的判断结果是:"+isArray(b));
document.write("<br/>");
document.write("变量c是数组类型的判断结果是:"+isArray(c));
document.write("<br/>");
document.write("变量arr是数组类型的判断结果是:"+isArray(arr));
document.write("<br/>");
document.write("变量arr是数组类型的判断结果是:"+isArray(arr));
document.write("<br/>");
</script>

运行结果:

JavaScript知识点总结(六)之JavaScript判断变量数据类型

以上内容是小编给大家介绍的JavaScript知识点总结(六)之JavaScript判断变量数据类型的相关知识,希望对大家有所帮助,如果大家想了解更多内容敬请关注三水点靠木网站!

Javascript 相关文章推荐
ASP Json Parser修正版
Dec 06 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
Javascript继承机制详解
May 30 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
vue监听用户输入和点击功能
Sep 27 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 #Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 #Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 #Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 #Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 #Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 #Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 #Javascript
You might like
PHP 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
解析wamp5下虚拟机配置文档
2013/06/27 PHP
Java中final关键字详解
2015/08/10 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
JavaScript单元测试ABC
2012/04/12 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
python获取糗百图片代码实例
2013/12/18 Python
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
python私有属性和方法实例分析
2015/01/15 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
应聘教师推荐信
2013/10/31 职场文书
中医专业职业生涯规划书范文
2014/01/04 职场文书
商场端午节活动方案
2014/01/29 职场文书
市场营销方案范文
2014/03/11 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
教师党员个人整改措施
2014/10/27 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书