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 相关文章推荐
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
js仿微博动态栏功能
Feb 22 Javascript
js实现五星评价功能
Mar 08 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
Angular路由ui-router配置详解
Aug 01 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
react-intl实现React国际化多语言的方法
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面向对象程序设计中self与static的区别分析
2019/05/21 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
Bootstrap精简教程
2015/11/27 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
详解用python实现简单的遗传算法
2018/01/02 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
Python3常用内置方法代码实例
2019/11/18 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
简述python Scrapy框架
2020/08/17 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
Footshop乌克兰:运动鞋的最大选择
2019/12/01 全球购物
班级文化建设标语
2014/06/23 职场文书
高中生综合素质自我评价
2015/03/06 职场文书