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入门教程(1) 什么是JS
Jan 31 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
vue 父组件中调用子组件函数的方法
Jun 06 Javascript
Vue实现点击箭头上下移动效果
Jun 11 Javascript
jQuery-App输入框实现实时搜索
Nov 19 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
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
PHP在线书签系统分享
2016/01/04 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
Js动态创建div
2008/09/25 Javascript
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
详解Angular路由 ng-route和ui-router的区别
2017/05/22 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
Python贪吃蛇游戏编写代码
2020/10/26 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
Django如何将URL映射到视图
2019/07/29 Python
python中自带的三个装饰器的实现
2019/11/08 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
Python 解析简单的XML数据
2020/07/24 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
药剂专业求职信
2014/06/20 职场文书
成都人事代理协议书
2014/10/25 职场文书
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
nginx rewrite功能使用场景分析
2022/05/30 Servers
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript