javascript中的数据类型检测方法详解


Posted in Javascript onAugust 07, 2019

本文实例讲述了javascript中的数据类型检测方法。分享给大家供大家参考,具体如下:

在javascript中数据类型

值类型: 布尔(Boolean),数值(Number),字符(String),空(Null),未定义(Undefined)

引用类型: 对象(Object),函数(Function),数组(Array),日期(Date),正则(RegExp)等等。

检测方式之 typeof

console.log(typeof undefined)//'undefined'
console.log(typeof null) // object
console.log(typeof true) //'boolean'
console.log(typeof 123) //'number'
console.log(typeof NaN) //'number'
console.log(typeof "abc") //'string'
console.log(typeof function() {}) //'function'
var arr=[];
console.log(typeof {}) //'object'
console.log(typeof arr)//'object'

从上面可以看出来用 typeof 来检测,不严谨。

null 被检测成为了 object,  null 值表示一个空对象指针,用typeof操作符检测null值时会返回object的原因, 这是在设计ECMAscript时候存在的一些bug。

同样是js不严谨的一种表现形式。而数组也被检测成为了一个对象, 所以用这种方式不严谨。

检测方式之 toString.call()

console.log(toString.call(undefined) ) // '[object Window]''
console.log(toString.call(null) ) // '[object Window]'
console.log(toString.call(true) ) // '[object Boolean]'
console.log(toString.call(123) ) // '[object Number]'
console.log(toString.call(NaN) ) // '[object Number]'
console.log(toString.call("abc") ) // '[object String]'
console.log(toString.call(function() {})) // '[object Function]'
var arr=[];
console.log(toString.call({}) ) // '[object Object]'
console.log(toString.call(arr) ) // '[object Array]'

可以看出来出了undefined和null 这两个,其他的检测都还是比较严谨的。

其中toString()函数是window的一个不可枚举函数,继承自Object

还可以写成这样:

window.toString.call('hello'); // "[object String]"
Object.prototype.toString.call('hello'); // "[object String]"

检测方式之 constructor

console.log('haha'.constructor == String); // true
console.log([].constructor === Array); // true
console.log({}.constructor === Object); // true
console.log(true.constructor === Boolean); // true
var a = 111; // 此处必须要用变量来代表数字,不然会报错,从这也能看出来js是一门不严谨的语言
console.log(a.constructor === Number); // true

我们通过把实例的构造函数指向其他地方,来改变它的constructor,就不安全了,不推荐使用 如下代码所示:

var AAA = function(){}; // 定义一个AAA对象
AAA.prototype = {
 say:function() {
  alert('hello');
 }
}
var arr1 = new Array(); // 定义一个数组
arr1.constructor = function AAA(){}; // 这里可以改变实例的constructor。
arr1.__proto__ = AAA.prototype; // 此处改变了原型链
console.log(arr1.constructor); // AAA
console.log(arr1 instanceof AAA); // true 原型链已经改变,arr1 已经不属于Array了。
console.log(arr1 instanceof Array); // false
// 下面我们来让AAA的原型链连到 Array上
AAA.prototype.__proto__ = Array.prototype;
console.log(arr1 instanceof Array); // true

检测方式之 instanceof

检测是否是某一对象的实例

console.log([] instanceof Array); // true
console.log({} instanceof Object); // true
console.log('haha' instanceof String); // false
console.log(true instanceof Boolean); // false
console.log(1 instanceof Number); // false

前面两个是true,后面的全是false 说明了用 A instanceof B 来检测的前提条件必须是A,B都为对象,通过下面的方式就可以看出来了

var a = new Number(1);
var b = new String('haha');
var t = new Boolean(true);
console.log(a instanceof Number); // true
console.log(b instanceof String); // true
console.log(t instanceof Boolean); // true

此种方式也不安全,后面会有阐述,有关instanceof 和 isPrototypeOf的区别,我们以后再来探讨

还有一种is的方式比如:Array.isArray() 专门用来检测数组

console.log(Array.isArray([])); // true

这个有兼容问题,IE8及其以下版本浏览器不被支持

而jQuery里面也给我们提供了一些解决方案

jQuery.isArray():是否为数组。
jQuery.isEmptyObject():是否为空对象(不含可枚举的属性)。
jQuery.isFunction():是否为函数。
jQuery.isNumeric():是否为数字。
jQuery.isPlainObject():是否为使用“{}”或“new Object”生成的对象,而不是浏览器原生提供的对象。
jQuery.isWindow():是否为window对象。
jQuery.isXMLDoc():判断一个DOM节点是否处于XML文档之中。

总结

通过以上几种方式,我们知道在不同的时候用不同的检测方式,是一种有效的解决方案。

拓展

在number类型中,还有一种检测是有穷数字的方法叫 isFinite(), 比如任何数字除以0,都为无穷大。Infinity,-Infinity,非数字都会被判为false

console.log(3/0); // Infinity
console.log(-3/0); // -Infinity
console.log(isFinite(3/0)); // false
console.log(isFinite(-3/0)); // false
console.log(isFinite(NaN)); // false
console.log(isFinite('haha')); // false
console.log(isFinite(true)); // true 在这里 true 被转换成了数字 1
console.log(isFinite(false)); // true 在这里 false 被转换成了数字 0

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
动态控制Table的js代码
Mar 07 Javascript
JavaScript入门教程(6) Window窗口对象
Jan 31 Javascript
jquery键盘事件介绍
Jan 31 Javascript
JS获取整个页面文档的实现代码
Dec 15 Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
JQuery validate插件验证用户注册信息
May 11 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
JS实现多选框的操作
Jun 24 Javascript
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
scrapyd schedule.json setting 传入多个值问题
Aug 07 #Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
Aug 07 #Javascript
微信小程序引入Vant组件库过程解析
Aug 06 #Javascript
Vue数据绑定实例写法
Aug 06 #Javascript
Vue代码整洁之去重方法整理
Aug 06 #Javascript
VUE写一个简单的表格实例
Aug 06 #Javascript
VUE前后端学习tab写法实例
Aug 06 #Javascript
You might like
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
jQuery中slidedown与slideup方法用法示例
2016/09/16 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
python list使用示例 list中找连续的数字
2014/01/27 Python
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
公司庆典活动邀请函
2014/01/09 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
报到证办理个人委托书
2014/10/06 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js