JavaScript学习总结(2)——JavaScript数据类型判断

曾经终败给现在 2022-01-13 04:57 394阅读 0赞

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

#

 最近做项目中遇到了一些关于javascript数据类型的判断处理,上网找了一下资料,并且亲自验证了各种数据类型的判断,在此做一个总结吧!

一、JS中的数据类型

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

   2.布尔型(Boolean)

   3.字符串型(String)

   4.对象(Object)

   5.数组(Array)

   6.空值(Null)

   7.未定义(Undefined)

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

1.数值型(number)

  比较常用的判断方法是:

  1. 1 function isNumber(val){
  2. 2 return typeof val === 'number';
  3. 3 }

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

  1. 1 var a;
  2. 2 alert(isNumber(parseInt(a)));

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

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

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

  1. 1 function isNumber(val){
  2. 2 return typeof val === 'number' && isFinite(val);
  3. 3 }

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

#

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

2.布尔型(boolean)

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

  1. 1 /*
  2. 2 判断变量val是不是布尔类型
  3. 3 */
  4. 4 function isBooleanType(val) {
  5. 5 return typeof val ==="boolean";
  6. 6 }

测试代码:

复制代码

  1. 1 <script type="text/javascript">
  2. 2 /*
  3. 3 判断变量val是不是布尔类型
  4. 4 */
  5. 5 function isBooleanType(val) {
  6. 6 return typeof val ==="boolean";
  7. 7 }
  8. 8 var a;
  9. 9 var b = false;
  10. 10 alert("变量a是布尔类型的判断结果是:"+isBooleanType(a));
  11. 11 alert("变量b是布尔类型的判断结果是:"+isBooleanType(b));
  12. 12 </script>

复制代码

运行结果:

  

3. 字符串(String)

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

  1. 1 /*
  2. 2 判断变量是不是字符串类型
  3. 3 */
  4. 4 function isStringType(val) {
  5. 5 return typeof val === "string";
  6. 6 }

测试代码:

复制代码

  1. 1 <script type="text/javascript">
  2. 2 /*
  3. 3 判断变量是不是字符串类型
  4. 4 */
  5. 5 function isStringType(val) {
  6. 6 return typeof val === "string";
  7. 7 }
  8. 8
  9. 9 var a;
  10. 10 var s = "strType";
  11. 11 alert("变量a是字符串类型的判断结果是:"+isStringType(a));
  12. 12 alert("变量s是字符串类型的判断结果是:"+isStringType(s));
  13. 13 </script>

复制代码

运行结果:

4.未定义(Undefined)

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

  1. 1 /*
  2. 2 判断变量是不是Undefined
  3. 3 */
  4. 4 function isUndefined(val) {
  5. 5 return typeof val === "undefined";
  6. 6 }

测试代码:

复制代码

  1. 1 <script type="text/javascript">
  2. 2 var a;//a是undefined
  3. 3 var s = "strType";
  4. 4 /*
  5. 5 判断变量是不是Undefined
  6. 6 */
  7. 7 function isUndefined(val) {
  8. 8 return typeof val === "undefined";
  9. 9 }
  10. 10 alert("变量a是Undefined的判断结果是:"+isUndefined(a));
  11. 11 alert("变量s是Undefined的判断结果是:"+isUndefined(s));
  12. 12 </script>

复制代码

运行结果:

5.对象(Object)

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

应该这样:

  1. 1 function isObj(str){
  2. 2 if(str === null || typeof str === 'undefined'){
  3. 3 return false;
  4. 4 }
  5. 5 return typeof str === 'object';
  6. 6 }

测试代码:

复制代码

  1. 1 <script type="text/javascript">
  2. 2 /*
  3. 3 判断变量是不是Object类型
  4. 4 */
  5. 5 function isObj(str){
  6. 6 if(str === null || typeof str === 'undefined'){
  7. 7 return false;
  8. 8 }
  9. 9 return typeof str === 'object';
  10. 10 }
  11. 11
  12. 12 var a;
  13. 13 var b = null;
  14. 14 var c = "str";
  15. 15 var d = {};
  16. 16 var e = new Object();
  17. 17
  18. 18 alert("b的值是null,typeof b ==='object'的判断结果是:"+(typeof b ==='object'));
  19. 19 alert("变量a是Object类型的判断结果是:"+isObj(a));//false
  20. 20 alert("变量b是Object类型的判断结果是:"+isObj(b));//false
  21. 21 alert("变量c是Object类型的判断结果是:"+isObj(c));//false
  22. 22 alert("变量d是Object类型的判断结果是:"+isObj(d));//true
  23. 23 alert("变量e是Object类型的判断结果是:"+isObj(e));//true
  24. 24 </script>

复制代码

运行结果:

6.空值(Null)

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

  1. 1 function isNull(val){
  2. 2 return val === null;
  3. 3 }

测试代码:

复制代码

  1. 1 /*
  2. 2 判断变量是不是null
  3. 3 */
  4. 4 function isNull(val){
  5. 5 return val === null;
  6. 6 }
  7. 7 /*测试变量*/
  8. 8 var a;
  9. 9 var b = null;
  10. 10 var c = "str";
  11. 11 //弹出运行结果
  12. 12 alert("变量a是null的判断结果是:"+isNull(a));//false
  13. 13 alert("变量b是null类型的判断结果是:"+isNull(b));//true
  14. 14 alert("变量c是null类型的判断结果是:"+isNull(c));//false

复制代码

运行结果:

7.数组(Array)

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

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

复制代码

  1. 1 /*判断变量arr是不是数组
  2. 2 方法一
  3. 3 */
  4. 4 function isArray1(arr) {
  5. 5 return Object.prototype.toString.apply(arr) === '[object Array]';
  6. 6 }
  7. 7
  8. 8 /*判断变量arr是不是数组
  9. 9 方法二
  10. 10 */
  11. 11 function isArray2(arr) {
  12. 12 if(arr === null || typeof arr === 'undefined'){
  13. 13 return false;
  14. 14 }
  15. 15 return arr.constructor === Array;
  16. 16 }

复制代码

测试代码:

复制代码

  1. 1 <script type="text/javascript">
  2. 2 /*判断变量arr是不是数组
  3. 3 方法一
  4. 4 */
  5. 5 function isArray1(arr) {
  6. 6 return Object.prototype.toString.apply(arr) === '[object Array]';
  7. 7 }
  8. 8 /*判断变量arr是不是数组
  9. 9 方法二
  10. 10 */
  11. 11 function isArray2(arr) {
  12. 12 if(arr === null || typeof arr === 'undefined'){
  13. 13 return false;
  14. 14 }
  15. 15 return arr.constructor === Array;
  16. 16 }
  17. 17 //测试变量
  18. 18 var a = null;
  19. 19 var b = "";
  20. 20 var c ;
  21. 21 var arr1 = [1,2,3];
  22. 22 var arr2 = new Array();
  23. 23 //打印测试结果
  24. 24 document.write("arr1变量是数组类型,typeof arr1 === 'object'的结果是:"+(typeof arr1 === 'object'));
  25. 25 document.write("<br/>");
  26. 26 document.write("------------------------------------------------------------------------------------------------");
  27. 27 document.write("<br/>");
  28. 28 document.write("使用isArray1方法判断结果如下:");
  29. 29 document.write("<br/>");
  30. 30 document.write("------------------------------------------------------------------------------------------------");
  31. 31 document.write("<br/>");
  32. 32 document.write("变量a是数组类型的判断结果是:"+isArray1(a));
  33. 33 document.write("<br/>");
  34. 34 document.write("变量b是数组类型的判断结果是:"+isArray1(b));
  35. 35 document.write("<br/>");
  36. 36 document.write("变量c是数组类型的判断结果是:"+isArray1(c));
  37. 37 document.write("<br/>");
  38. 38 document.write("变量arr1是数组类型的判断结果是:"+isArray1(arr1));
  39. 39 document.write("<br/>");
  40. 40 document.write("变量arr2是数组类型的判断结果是:"+isArray1(arr2));
  41. 41 document.write("<br/>");
  42. 42 document.write("------------------------------------------------------------------------------------------------");
  43. 43 document.write("<br/>");
  44. 44 document.write("使用isArray2方法判断结果如下:");
  45. 45 document.write("<br/>");
  46. 46 document.write("------------------------------------------------------------------------------------------------");
  47. 47 document.write("<br/>");
  48. 48 document.write("变量a是数组类型的判断结果是:"+isArray2(a));
  49. 49 document.write("<br/>");
  50. 50 document.write("变量b是数组类型的判断结果是:"+isArray2(b));
  51. 51 document.write("<br/>");
  52. 52 document.write("变量c是数组类型的判断结果是:"+isArray2(c));
  53. 53 document.write("<br/>");
  54. 54 document.write("变量arr1是数组类型的判断结果是:"+isArray2(arr1));
  55. 55 document.write("<br/>");
  56. 56 document.write("变量arr2是数组类型的判断结果是:"+isArray2(arr2));
  57. 57 document.write("<br/>");
  58. 58 </script>

复制代码

运行结果:

  

分类: JavaScript

标签: Javascript学习总结

好文要顶 关注我 收藏该文 08132011_Nw8X.png 08132011_ZA6j.png

08132011_tR41.png

孤傲苍狼
关注 - 76
粉丝 - 2877

+加关注

15

0

(请您对文章做出评价)

« 上一篇: java基础学习总结——接口
» 下一篇: JavaScript学习总结(五)——Javascript中==和===的区别

posted on 2014-04-16 00:56 孤傲苍狼 阅读(2598) 评论(14) 编辑 收藏

评论

#1楼 2014-04-16 08:27 codezyc


























   
 

很实用,谢谢分享。

 
     

支持(0) 反对(0)

#2楼 2014-04-16 09:02 网络白蚁


























   
 

果断收藏。

 
     

支持(0) 反对(0)

#3楼 2014-04-16 09:08 winpzs


























   
 

你确定所有浏览器都合适?IE6?IE7?

 
     

支持(0) 反对(0)

#4楼 2014-04-16 09:08 objectboy


























   
 

额,这个两个”=” 和三个”=” 啥区别,求指教,我基础太差啦 ,为啥要用三个”=” 呢

 
     

支持(0) 反对(1)

#5楼 2014-04-16 09:18 winpzs


























   
 













1


2


3


4


5


6


7


8


9


10


11


12


13


14


15


16


17


18


19


20


21


22


23


24


25


26


27


28


29


30


31


32


33


34


35


36


37


38


39


40


41


42


43


44


45


46


47


48


49


50


51


52



var 
testType = {


    
isType: 
function 
(typename, value) {


        
//typename:String, Array, Boolean, Object, RegExp, Date, Function,Number //兼容


        
//typename:Null, Undefined,Arguments    //IE不兼容


        
return 
Object.prototype.toString.apply(value) === 
‘[object ‘ 
+ typename + 
‘]’
;


    
},


    
isUndefined: 
function 
(obj) {


        
///<summary>是否定义</summary>


 


        
return 
(
typeof 
(obj) === 
“undefined” 
|| obj === undefined);


    
},


    
isNull: 
function 
(obj) {


        
///<summary>是否Null</summary>


 


        
return 
(obj === 
null 
|| 
this
.isUndefined(obj));


    
},


    
isBoolean: 
function 
(obj) {


        
return 
this
.isType(
“Boolean”
, obj);


    
},


    
isObjectEmpty: 
function 
(obj) {


        
if 
(
this
.isNull(obj)) 
return 
true
;


        
for 
(
var 

in 
obj) {


            
if 
(!obj.hasOwnProperty(n)) 
continue
;


            
return 
false
;


        
}


        
return 
true
;


    
},


    
isNullEmpty: 
function 
(s) {


        
return 
(
this
.isNull(s) || s === 
‘’
);


    
},


    
isFunction: 
function 
(fun) {


        
return 
this
.isType(
“Function”
, fun);


    
},


    
isNumeric: 
function 
(n) {


        
//return this.isType(“Number”, n) && !isNaN(n) && isFinite(n);;


        
return 
!isNaN(parseFloat(n)) && isFinite(n);


    
},


    
isString: 
function 
(obj) {


        
return 
this
.isType(
“String”
, obj);


    
},


    
isObject: 
function 
(obj) {


        
return 
!
this
.isNull(obj) && 
this
.isType(
“Object”
, obj);


    
},


    
isArray: 
function 
(value) {


        
return 
Array.isArray ? Array.isArray(value) : 
this
.isType(
“Array”
, value);


    
},


    
isJquery: 
function 
(obj) {


        
return 
(obj 
instanceof 
window.jQuery);


    
},


    
isWindow: 
function 
(obj) { 
return 
!
this
.isNull(obj) && obj == obj.window },


    
isElement: 
function 
(obj) { 
var 
t = obj && (obj.ownerDocument || obj).documentElement; 
return 
t ? 
true 

false 
}


};



 
     

转载于:https://my.oschina.net/zhanghaiyang/blog/599443

发表评论

表情:
评论列表 (有 0 条评论,394人围观)

还没有评论,来说两句吧...

相关阅读