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的new操作符(一)
Dec 25 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
May 20 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
用vscode开发vue应用的方法步骤
May 06 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 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
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
JavaScript经典效果集锦
2010/07/06 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
JS常见算法详解
2017/02/28 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
Python help()函数用法详解
2014/03/11 Python
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
python同时给两个收件人发送邮件的方法
2015/04/30 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
Python配置文件处理的方法教程
2019/08/29 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
Tensorflow 多线程设置方式
2020/02/06 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
销售演讲稿范文
2014/01/08 职场文书
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技