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 相关文章推荐
幻灯片带网页设计中的20个奇妙应用示例小结
May 27 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 Javascript
JS实现添加,替换,删除节点元素的方法
Jun 30 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
使用socket.io实现简单聊天室案例
Jan 02 Javascript
layui--js控制switch的切换方法
Sep 03 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
JavaScript中的几种继承方法示例
Dec 06 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
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
在JavaScript中调用php程序
2009/03/09 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
学习Node.js模块机制
2016/10/17 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
[01:45]DOTA2新英雄“神谕者”全方位展示
2014/11/21 DOTA
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python基础知识小结之集合
2015/11/25 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
在pycharm中显示python画的图方法
2019/08/31 Python
如何在django中添加日志功能
2020/02/06 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
Python日志处理模块logging用法解析
2020/05/19 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
网络安全方面的面试题
2016/01/07 面试题
生产总经理岗位职责
2013/12/19 职场文书
高中军训第一天感言
2014/03/06 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
创业计划书之校园超市
2019/09/12 职场文书
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL