js数据类型检测小结
2024-10-19 11:56:58
在js中,有四种用于检测数据类型的方式,分别是:
- typeof 用来检测数据类型的运算符
- instanceof 检测一个实例是否属于某个类
- constructor 构造函数
- Object.prototype.toString.call() 原型链上的Object对象的toString方法
下面我们就来分别介绍一下上面四种方法的适用场景和局限性。
typeof 用来检测数据类型的运算符
使用typeof检测数据类型,返回值是字符串格式。能够返回的数据类型是:"number","string","bolean","undefined","function","object"。
<script>
console.log(typeof(1)); //number
console.log(typeof('hello')); //string
console.log(typeof(true)); //boolean
console.log(typeof(undefined)); //undefined
console.log(typeof(null)); //object
console.log(typeof({})); //object
console.log(typeof(function() {})); //function
</script>
局限性:
- typeof (null); //"object"。这是由于在js中,null值表示一个空对象指针,而这也正是使用typeof操作 符检测null值时会返回"object"的原因。
- 不能具体的细分是数组还是正则,还是对象中其他的值,因为使用typeof检测数据类型,对于对象数据类型的所有的值,最后返回的都是"object"
instanceof 检测某一个实例是否属于某个类
instanceof主要用来弥补typeof不能检测具体属于哪个对象的局限性。
<script>
let arr = [1,2,3];
let reg = /\w/;
console.log(arr instanceof Array); //true
console.log(arr instanceof Object); //true
console.log(reg instanceof RegExp); //true
console.log(reg instanceof Object); //true
</script>
局限性:
- 不能用于检测和处理字面量方式创建出来的基本数据类型值,即原始数据类型
- instanceof的特性:只要在当前实例的原型链上的对象,我们用其检测出来都为true
- 在类的原型继承中,我们最后检测出来的结果未必正确
constructor 构造函数
是函数原型上的属性,该属性指向的是构造函数本身。
作用和instsnceof非常相似,与instanceof不同的是,不仅可以处理引用数据类型,还可以处理原始数据类型。
<script>
let num = 12;
let obj = {};
console.log(num.constructor == Number);//true
console.log(obj.constructor == Object);//true
</script>
但是要注意一点的是,当直接用(对象字面量或原始数据).constructor时,最好加上()。为了便于理解,我们来看一个例子。
<script>
1.constructor === Number; //报错,Invalid or unexceped token
(1).constructor === Number; //true
{}.constructor === Number; //报错,Invalid or unexceped token
({}).constructor === Number; //true
</script>
这主要是由于js内部解析方式造成的,js会把1.constructor解析成小数,这显然是不合理的,小数点后应该是数字,因此就会引发报错。js会把{}解析成语句块来执行,这时后面出现一个小数点显然也是不合理的,因此也会报错。为了解决这个问题,我们可以为表达式加上()使js能够正确解析。
局限性:我们可以把类的原型进行重写,在重写的过程中很可能把之前constructor给覆盖了,这样检测出来的结果就是不准确的
<script>
function Fn() {};
Fn.prototype = new Array;
var f = new Fn;
//f是一个函数,按道理说他的构造函数应该是Function,但是修改其原型链后,它的constructor变成了Array.
console.log(f.constructor == Array); //true
</script>
Object.prototype.toString.call() 原型链上的Object对象的toString方法
Object.prototype.toString的作用是返回当前方法的执行主体(方法中的this)所属类的详细信息,是最全面也是最常用的检测数据类型的方式。
返回值的类型为string类型。
<script>
console.log(Object.prototype.toString.call(1)); //[object Number]
console.log(Object.prototype.toString.call(/^sf/)); //[object RegExp]
console.log(Object.prototype.toString.call("hello")); //[object String]
console.log(Object.prototype.toString.call(true)); //[object Boolean]
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]
console.log(typeof(Object.prototype.toString.call(function() {}))); //string
</script>
最新文章
- Spring boot: Request method &#39;DELETE&#39; not supported, Request method &#39;PUT&#39; not supported, Request method &#39;POST&#39; not supported
- 使用Hexo搭建专属Blog
- EC笔记:第二部分:11:在operator=中处理“自我赋值”
- http 各个状态码及对应的java 编程
- jvm运行数据分布
- ACM Minimum Inversion Number 解题报告 -线段树
- Java-基础练习3
- mina学习
- 优雅的python 写排序算法
- (转载)OC学习篇之---类的延展
- 11个优秀的HTML5 &; CSS3下拉菜单制作教程
- PHP AJAXFORM提交图片上传并显示图片源代码
- 【面试题】Https
- Eclipse导入项目
- 抽奖转盘(jqueryrotate.js)
- 我的MYSQL学习心得(三)
- ural 1297. Palindrome
- 在Windows cmd中计算行数
- HTML基础-------HTML标签(1)
- Windows防火墙开启ping,禁ping的配置
热门文章
- GitHub团队协作流程
- .Net 项目代码风格规范
- HashMap数据结构的C++实现
- string类------新标准c++程序设计
- ObjectARX对话框添加颜色下拉组合框
- AJAX发送json,SpringMVC 接收JSON,@RequestBody
- js 三大事件(鼠标.键盘.浏览器)
- 配置YOLO2(ubuntu16.04+cuda8.0+opencv3.1.0)
- 洛谷 P3391【模板】文艺平衡树(Splay)
- C++_类和动态内存分配2-改进后的String类