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 相关文章推荐
javascript中的location用法简单介绍
Mar 07 Javascript
javascript之dhDataGrid Ver2.0.0代码
Jul 01 Javascript
基于jQuery的获得各种控件Value的方法
Nov 19 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 Javascript
node使用async_hooks模块进行请求追踪
Jan 28 Javascript
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
一个多文件上传的例子(原创)
2006/10/09 PHP
PHP中实现进程间通讯
2006/10/09 PHP
PHP+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
JS backgroundImage控制
2009/05/19 Javascript
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
js 省地市级联选择
2010/02/07 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
vue跨域解决方法
2017/10/15 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
python中MethodType方法介绍与使用示例
2017/08/03 Python
python如何对实例属性进行类型检查
2018/03/20 Python
python实现串口自动触发工作的示例
2019/07/02 Python
Python 实现一个计时器
2020/07/28 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
德国网上花店:Valentins
2018/08/15 全球购物
毕业生自荐书
2013/12/18 职场文书
建议书的格式
2014/05/12 职场文书
项目经理任命书内容
2014/06/06 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技