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 相关文章推荐
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
Angularjs 基础入门
Dec 26 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 Javascript
Vue 实例事件简单示例
Sep 19 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 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 函数学习简单小结
2010/07/08 PHP
php实现的漂亮分页方法
2014/04/17 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
Javascript根据指定下标或对象删除数组元素
2012/12/21 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
python实现图片处理和特征提取详解
2017/11/13 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
Python列表的切片实例讲解
2019/08/20 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
好矿嫂事迹材料
2014/01/21 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
审计专业自荐信范文
2014/04/21 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
小学安全教育主题班会
2015/08/12 职场文书
《活见鬼》教学反思
2016/02/24 职场文书