JS中数据类型检测的四种方法简单介绍
JS中我们只用一个var就能定义所有类型的变量,非常方便,但是也同样给我们造成了困扰,如果我们想知道一个函数的返回值是什么类型的,或者输入的信息是什么类型的时候就要通过对数据进行检测,所以我们该如何进行数据类型的检测呢?
数据类型检测方式:
typeof:用来检测数据类型的运算符
instanceof:用来检测某个实例是不是属于某个类
constructor:构造函数 作用和instanceof非常相似
Object.prototype.toString.call(); 最准确的最常用的方法
typeof
typeof:用来检测数据类型的运算符;使用方式是 typeof + 检测的内容。
使用typeof检测数据类型,首先返回的都是一个字符串,字符串中包含对应的数据类型;
var num = 2; console.log(typeof num); // ->控制台输出字符串numberconsole.log(typeof typeof typeof typeof function () {}); // 输出的结果为字符串String,因为第一次使用typeof检测后结果为一个字符串数据类型的数据,以后每次检测都是String
typeof的局限性
1. typeof null 的结果为“object”
2. 不能具体细分是数组还是正则,还是对象中的其他值,因为使用typeof检测数据类型,对于对象数据类型中左右的值,最后返回的结果都是“object”
instanceof
instanceof:用来检测某个实例是不是属于某个类;使用方法: 实例 instanceof 类名
instanceof的局限性
1. 不能用来处理字面量创建出来的基本类型值:对于基本的数据类型来说,字面量方式创建出来的结果和实例方式创建出来的结果是有一定的区别的,从严格的意义上来讲,只有实例创建出来的结果才是标准对象数据类型的值,也是标准的Number这一个类的实例;对于字面量方式创建的结果是基本的数据类型值,不是严谨的实例,但是由于JS的松散性,导致可以使用Number.prototype上提供的方法
console.log(1 instanceof Number);//->控制台输出false console.log(new Number(1) instanceof Number);//-> 控制台输出true
instanceof只要在当前实例的原型链上,我们检测出来的结果都为true
在类的原型链继承当中,我们最后检测出来的结果未必正确
function Fn() { } var ary = new Array; Fn.prototype = ary;//原型继承:让子类的原型等于父类的一个实例 var f =new Fn; // f->Fn.prototype->Array.prototype->Object.prototype console.log(f instanceof Array); //-> true
constructor:构造函数
constructor:构造函数 这种方法与instanceof非常相似
var obj = []; console.log(obj.constructor === Array ); //->trueconsole.log(obj.constructor === RegExp); //->false//console还可以出来基本的数据类型var num = 1; console.log(num.constructor === Number);//->true// constructor检测和instanceof一同,一般情况下是检测不了的var reg = /^$/; console.log(reg.constructor === RegExp);//-> trueconsole.log(reg.constructor === RegExp);//-> false
局限性:我们可以把类的原型进行重写,在重写的过程中很有可能出现把之前的constructor覆盖了,这样检测出来的结果就是不准确的;对于特殊的数据类型null和undefined,它们的所属类是Null和Undefined,但是浏览器吧这两个类保护起来了,不允许我们进行访问使用
function Fn() {} Fn.prototype = new Array;var f =new Fn; console.log(f.constructor);//-> Array
Object.prototype.toString.call()
这种方法是我们真是项目中最长用的也是现在最准确的一种方式
首先获取Object原型上的toString方法,让方法执行,并且改变方法中的this关键字的指向
在了解这种方式之前我们先了解下toString
这个方法 toString
:从字面上来看是转化成字符串,但是某些toString方法不仅仅是转化成字符串;对于Number、String、Boolean、Array、RegExp、Date、Function原型上的toString方法都是①把当前的数据类型转化为字符串的类型(它们的作用仅仅只是用来转成字符串);但是在Object原型上的toString方法不同于这些,②它的作用是返回当前方法的执行主体(方法中的this)所属的类的详细信息。 第一中类型转成字符串
//Number.prototype.toString方法是转化为字符串 console.log((1).toString()); //->这里的toString是Number.prototype.toString用法是转成字符串-> '1' console.log((1).__proto__.__proto__.toString());//[object Object] console.log((128).toString(2/8/10));//把数字转化为二进制、八进制、十进制
Object原型上的
({name:'编程'}).toString(); console.log(obj.toString());//-> toString中的this是Obj,返回的是obj所属类的信息->[Object Object]第一个Object代表当前实例是对象数据类型的(这个是固定死的),第二个Object代表的是obj所属的类是ObjectMath.toString();//->toString中的this是Math,返回的是Math所属类的信息 -> [Object Math]console.log(Object.prototype.toString.call([])); //->[object Array]console.log(Object.prototype.toString.call(/^$/)); //->[object Array]console.log(({}).toString.call(new Date)); //->[object Date]console.log(Object.prototype.toString.call(1)); //->[object Number]console.log(Object.prototype.toString.call('编程')); //->[object String]console.log(Object.prototype.toString.call(null)); //->[object Null]console.log(Object.prototype.toString.call(undefined)); //->[object Undefined]console.log(Object.prototype.toString.call(function () {})); //->[object Function]
所有经过对比我们第四中方式的准确性是最高的,所以也是我们项目中经常使用的。Are you get it!!!
相关推荐:
以上是JS中数据类型检测的四种方法简单介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

JavaScript字符串替换方法详解及常见问题解答 本文将探讨两种在JavaScript中替换字符串字符的方法:在JavaScript代码内部替换和在网页HTML内部替换。 在JavaScript代码内部替换字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项,需使用正则表达式并添加全局标志g: str = str.replace(/fi

因此,在这里,您准备好了解所有称为Ajax的东西。但是,到底是什么? AJAX一词是指用于创建动态,交互式Web内容的一系列宽松的技术。 Ajax一词,最初由Jesse J创造

10款趣味横生的jQuery游戏插件,让您的网站更具吸引力,提升用户粘性!虽然Flash仍然是开发休闲网页游戏的最佳软件,但jQuery也能创造出令人惊喜的效果,虽然无法与纯动作Flash游戏媲美,但在某些情况下,您也能在浏览器中获得意想不到的乐趣。 jQuery井字棋游戏 游戏编程的“Hello world”,现在有了jQuery版本。 源码 jQuery疯狂填词游戏 这是一个填空游戏,由于不知道单词的上下文,可能会产生一些古怪的结果。 源码 jQuery扫雷游戏

本教程演示了如何使用jQuery创建迷人的视差背景效果。 我们将构建一个带有分层图像的标题横幅,从而创造出令人惊叹的视觉深度。 更新的插件可与JQuery 1.6.4及更高版本一起使用。 下载

本文讨论了在浏览器中优化JavaScript性能的策略,重点是减少执行时间并最大程度地减少对页面负载速度的影响。

Matter.js是一个用JavaScript编写的2D刚体物理引擎。此库可以帮助您轻松地在浏览器中模拟2D物理。它提供了许多功能,例如创建刚体并为其分配质量、面积或密度等物理属性的能力。您还可以模拟不同类型的碰撞和力,例如重力摩擦力。 Matter.js支持所有主流浏览器。此外,它也适用于移动设备,因为它可以检测触摸并具有响应能力。所有这些功能都使其值得您投入时间学习如何使用该引擎,因为这样您就可以轻松创建基于物理的2D游戏或模拟。在本教程中,我将介绍此库的基础知识,包括其安装和用法,并提供一

本文演示了如何使用jQuery和ajax自动每5秒自动刷新DIV的内容。 该示例从RSS提要中获取并显示了最新的博客文章以及最后的刷新时间戳。 加载图像是选择
