QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

手机号码,快捷登录

手机号码,快捷登录

查看: 2002|回复: 0

[HTML/CSS/JS] 4种Javascript类型检测的方式

[复制链接]

等级头衔

积分成就    金币 : 2841
   泡泡 : 1516
   精华 : 6
   在线时间 : 1294 小时
   最后登录 : 2024-11-21

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老

联系方式
发表于 2022-4-12 08:05:25 | 显示全部楼层 |阅读模式
一、typeof6 I3 y4 g6 C9 J& h: x. P
       主要用于判断基本数据类型 。使用方式:typeof(表达式)和typeof 变量名,第一种是对表达式做运算,第二种是对变量做运算。typeof运算符的返回类型为字符串,值包括如下几种:( R& x* q7 p" c0 J
  • 'undefined':未定义的变量或值
  • 'boolean':布尔类型的变量或值
  • 'string' :字符串类型的变量或值
  • 'number':数字类型的变量或值
  • 'object' :对象类型的变量或值,或者null(这个是js历史遗留问题,将null作为object类型处理)
  • 'function' :函数类型的变量或值. t6 F8 T5 r$ d: d
示例如下:
' }3 `& G) B, x) e8 N
  1. console.log(typeof a);    //'undefined'   
  2. console.log(typeof(true));  //'boolean'   
  3. console.log(typeof '123');  //'string'   
  4. console.log(typeof 123);   //'number'   
  5. console.log(typeof NaN);   //'number'   
  6. console.log(typeof null);  //'object'      
  7. var obj = new String();    console.log(typeof(obj));    //'object'   
  8. var  fn = function(){};    console.log(typeof(fn));  //'function'   
  9. console.log(typeof(class c{}));  //'function'
typeof的不足之处:
- o7 Q1 h  [" B2 E
  • 不能区分对象、数组、正则,对它们操作都返回"object";(正则特殊一点后面说)
  • Safar5,Chrome7之前的版本对正则对象返回 'function'
  • 在IE6,7和8中,大多数的宿主对象是对象,而不是函数;如:typeof alert; //object
  • 而在非ID浏览器或则IE9以上(包含IE9),typeof alert; //function
  • 对于null,返回的是object.4 [- \  `$ c$ S6 ]& q
总结:) `, D' g; O: d4 r3 p7 v
       typeof运算符用于判断对象的类型,但是对于一些创建的对象,它们都会返回'object',有时我们需要判断该实例是否为某个对象的实例,那么这个时候需要用到instanceof运算符。5 @" F" y, P2 ^+ d4 Z3 z7 L
二、instanceof
. b! t0 u0 h. ?5 Y  Z& m       用于引用数据类型的判断。所有引用数据类型的值都是Object的实例。目的是判断一个对象在其原型链上是否存在构造函数的prototype属性。用法:
' ~# [/ e! K3 `8 }, Z
  1. variable instanceof constructor
示例如下:2 @" F& {+ `+ i6 t
  1. // example
  2. var arr = [];
  3. 由于:
  4. 1. arr.constructor === Array
  5. 2. arr.__proto__ === Array.prototype
  6. 3. arr.__poto__.proto__ === Object.prototype
  7. 所以, 以下都返回true
  8. 1. arr instanceof arr.constructor(Array)
  9. 2. arr instanceof arr.__proto__.constructor(Array)
  10. 3. arr instanceof arr.__proto__.__poto__.constructor(Object)
  11. 如果你了解原型链的话,你很快就会得出一些结论:
  12. 1. 所有对象 instanceof Object 都会返回 true
  13. 2. 所有函数 instanceof Function 都会返回 true
总结:1 B7 D0 b5 r2 l* f- i% \2 @
       instanceof不仅能检测构造对象的构造器,还检测原型链。instanceof要求前面是个对象,后面是一个构造函数。而且返回的是布尔型的,不是true就是false。
/ a$ W. x2 F; }  [6 g, |  g# d; U8 l  Y三、Array.isArray()) H# ?9 m7 V7 t
       Array.isArray()可以用于判断数组类型,支持的浏览器有IE9+、FireFox 4+、Safari 5+、Chrome; 兼容实现:
0 ~/ z) \4 e, i
  1. if (!Array.isArray) {
  2.   Array.isArray = function(arg) {
  3.     return Object.prototype.toString.call(arg) === '[object Array]';
  4.   };
  5. }
示例如下:- E, a  I0 s! O/ Q& I* S9 `& F
  1. // 1.
  2. Array.isArray([1, 2, 3, 4]);  // --> true
  3. // 2.
  4. var obj = {
  5.     a: 1,
  6.     b: 2
  7. };
  8. Array.isArray(obj);  // --> false
  9. // 3.
  10. Array.isArray(new Array);  // --> true
  11. //4.
  12. Array.isArray("Array");  // --> false
总结:) n) V1 s4 Z, [/ |8 j4 I# v
       isArray是一个静态方法,使用Array对象(类)调用,而不是数组对象实例。其中Array.prototype 也是一个数组,Array.isArray 优于 instanceof。9 i" z# r" r) T
四、Object.prototype.toString.call()
+ a& P/ i. _) }( l       判断某个对象值属于哪种内置类型, 最靠谱的做法就是通过Object.prototype.toString方法。object.prototype.toString()输出的格式就是[object 对象数据类型]。
2 O$ ?; [4 R; ?! j$ S$ J示例如下:! A1 U' @) u/ n9 g! T+ l
  1. console.log(Object.prototype.toString.call("jerry"));//[object String]
  2. console.log(Object.prototype.toString.call(12));//[object Number]
  3. console.log(Object.prototype.toString.call(true));//[object Boolean]
  4. console.log(Object.prototype.toString.call(undefined));//[object Undefined]
  5. console.log(Object.prototype.toString.call(null));//[object Null]
  6. console.log(Object.prototype.toString.call({name: "jerry"}));//[object Object]
  7. console.log(Object.prototype.toString.call(function(){}));//[object Function]
  8. console.log(Object.prototype.toString.call([]));//[object Array]
  9. console.log(Object.prototype.toString.call(new Date));//[object Date]
  10. console.log(Object.prototype.toString.call(/\d/));//[object RegExp]
  11. function Person(){};
  12. console.log(Object.prototype.toString.call(new Person));//[object Object]
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号|渝公网安备50010502503914号 )

GMT+8, 2024-11-23 16:01

Powered by paopaomj X3.5 © 2016-2025 sitemap

快速回复 返回顶部 返回列表