js数据类型检测小结
在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>
js数据类型检测小结的更多相关文章
- js 数据类型检测
提起数据类型检测 大多数人首先想起的应该是 typeof 'xxx' == '数据类型' 坦然这种方法对于基本数据类型的检测还是非常方便的,但是当遇到引用数据类型 Object时却爱莫能助,下面就 ...
- js数据类型检测
目录 1. typeof {} 2. {} instanceof Object 3. {}.constructor === Object 4. Object.property.toString.cal ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- js数据类型的检测总结,附面试题--封装一个函数,输入任意,输出他的类型
一.javascript 中有几种类型的值 1.基本数据类型 : 包括 Undefined.Null.Boolean.Number.String.Symbol (ES6 新增,表示独一无二的值) 特点 ...
- 总结的JS数据类型判定(非常全面)
用typeof 来检测数据类型 Javascript自带两套类型:基本数据类型(undefined,string,null,boolean,function,object)和对象类型. 但是如果尝试用 ...
- JS数据类型的理解(猜测)
Js 数据类型 对于这个主题,首先来看几个问题,如果你对这几个问题很清楚的话,那就请直接跳过吧,不用接着往下看了,如果不清楚,建议你还是看看. 1)如果判断函数?function 和object的联系 ...
- javascript 数据类型 -- 检测
一.前言 在上一篇博文中 Javascript 数据类型 -- 分类 中,我们梳理了 javascript 的基本类型和引用类型,并提到了一些冷知识.大概的知识框架如下: 这篇博文就讲一下在写代码的过 ...
- 1. js数据类型_对象_函数_内存
1. js数据类型有哪些? 基本(值)类型 Number ---- 任意数值 String ---- 任意字符串 Boolean ---- true/false undefined ---- unde ...
- JS 类型检测
typeof 适合函数对象和基本类型的判断 typeof 100instanceof 适合判断对象类型 obj instanceof Object 基于原型链判断操作符,若做操作符不是对象,则会直接返 ...
随机推荐
- 在ubuntu下安装KDE以及完全卸载KDE
自由转载 ^_^ 同时请注明原文出处:http://www.cnblogs.com/wangvsa/archive/2012/07/22/2603626.html 这是一篇翻译,很多不必要的东西就没翻 ...
- 自定义Cell的流程
1..h文件 // // 文 件 名:CHBackupGateWayCell.h // // 版权所有:Copyright © 2018 lelight. All rights reserved. / ...
- 【bzoj4806~bzoj4809】 象棋四连发 DP-高精度-匈牙利算法-dfs
都是经典题了吧..我好无聊.. 4806 4806-1801是双倍经验..DP方程看代码吧.. /* http://www.cnblogs.com/karl07/ */ #include <cs ...
- 在CentOS-6.3环境下,利用grub工具手工制作Linux U盘安装盘
注:此文是本人亲自操作实现后写的心得,同时也是对自己操作的记录. 制作的全过程概况 准备工作: U盘重新分区: 格式化U盘: 安装grub文件到U盘特定的分区: 拷贝镜像中的相关文件到U盘: 安装时设 ...
- jdbc.properties文件的配置
使用配置文件访问数据库的优点是: 一次编写随时调用,数据库类型发生变化只需要修改配置文件. 配置文件的设置: 在配置文件中,key-value对应的方式编写. 不好意思我只用过这两个数据库 :)--- ...
- 微信支付的SDK曝出重大漏洞(XXE漏洞)
一.背景 昨天(2018-07-04)微信支付的SDK曝出重大漏洞(XXE漏洞),通过该漏洞,攻击者可以获取服务器中目录结构.文件内容,如代码.各种私钥等.获取这些信息以后,攻击者便可以为所欲为,其中 ...
- 并查集简述 (HDU-1213-How Many Tables)
并查集主要解决集合的有关运算,主要操作是查找操作和并操作. 1.集合的储存方式. 为便于查找,集合通常以树结构储存,每个元素分 数据域和指针域,可以用链式储存,也可以用结构数组储存,用根节点来表示一个 ...
- c++11中关于`std::thread`线程传参的思考
关于std::thread线程传参的思考 最重要要记住的一点是:参数要拷贝到线程独立内存中,不管是普通类型.还是引用类型. 对于传递参数是引用类型,需要注意: 1.当指向动态变量的指针(char *) ...
- 导出table为Excel
1.HTML <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=" ...
- Python web前端 09 jQuery
Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...