javascript中关于类型判断的一些疑惑小结


Posted in Javascript onOctober 14, 2018

前言

类型判断是我们在日常工作中经常会遇到的一个功能,本文将给大家详细介绍关于javascript类型判断的相关内容,下面话不多说了,来一起看看详细的介绍吧

Javascript中数据类型分为两种:

  • 简单数据类型:Undefined, NULL, Boolean, Number, String
  • 复杂数据类型:Object

接下来我们就来看看怎么做数据类型判别吧?

首先来看看 typeof

Type Result
Undefined "undefined"
Null "object" (see below)
Boolean "boolean"
Number "number"
String "string"
Symbol (new in ECMAScript 2015) "symbol"
Host object (provided by the JS environment) Implementation-dependent
Function object (implements [[Call]] in ECMA-262 terms) "function"
Any other object "object"

来点code demo吧

let a = undefined;
typeof a
"undefined"

let b = false;
typeof b
"boolean"

let c = 12;
typeof c
"number"

let d = '12';
typeof d
"string"

let f = function () {};
typeof f
"function"

接下来我们就来看看那些奇怪的现象吧

let str = new String('abc');
typeof str
"object"

let num = new Number(12);
typeof num
"object"

var func = new Function();
typeof func; 
"function"

typeof null
"object"

使用构造函数创建的变量,使用typeof判断会返回“object”结果,但是Function函数例外,由它创建的变量typeof返回的是“function”

接着就来说说typeof null == "object"。这个相信前端开发的小伙伴都知道是这个结果了,But why? 这其实是javascript第一个版本就存在的一个bug,历史原因可以看看这篇文章The history of typeof null

关于如何判断数组

let arr = [1, 2, 3];
typeof arr
"object"

上面这个结果大家应该不陌生,那该如何正确判断数组类型呢

1、instanceof

arr instanceof Array //true

2、isArray

Array.isArray(arr) // true

3、constructor.name

arr.constructor.name // "Array"

第三种用法用的人应该比较少,不少前端的的小伙伴都没用过。对于复杂类型Object,它的每个实例都有constructor属性。

instanceof vs isArray

当检测Array实例时, Array.isArray 优于 instanceof,因为Array.isArray能检测iframes.

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;
var arr = new xArray(1,2,3); // [1,2,3]

// Correctly checking for Array
Array.isArray(arr); // true
// Considered harmful, because doesn't work though iframes
arr instanceof Array; // false

这段代码是从MDN copy的。补充以下结果,发现第三种方法constructor.name也能正确判断出。

arr.constructor.name //"Array"

关于NaN

使用isNaN判断NaN。

isNaN(1/'a') // true

我们知道NaN == NaN结果是false,那如何判断两个NaN变量呢?

比较两个NaN变量,使用es6的Object.is()即可。

let nan1 = NaN
let nan2 = NaN
Object.is(nan1, nan2)
true

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
javascript操作css属性
Dec 30 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 Javascript
layui表格数据重载
Jul 27 Javascript
解决layui checkbox 提交多个值的问题
Sep 02 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 #Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 #Javascript
详解ES6 Symbol 的用途
Oct 14 #Javascript
javascript实现文本框标签验证的实例代码
Oct 14 #Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 #Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 #Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 #Javascript
You might like
德劲1103二次变频版的打磨
2021/03/02 无线电
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
Convert Seconds To Hours
2007/06/16 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
js实现圆盘记速表
2015/08/03 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
Python pass详细介绍及实例代码
2016/11/24 Python
django Serializer序列化使用方法详解
2018/10/16 Python
python实现扫描ip地址的小程序
2019/04/16 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
Python API自动化框架总结
2019/11/12 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
放飞蜻蜓反思
2014/02/05 职场文书
大学生通用个人的自我评价
2014/02/10 职场文书
行政副总岗位职责
2014/02/23 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
社区志愿者活动方案
2014/08/18 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
处级干部考察材料
2014/12/24 职场文书
2015年复活节活动总结
2015/02/27 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
辩护词范文大全
2015/05/21 职场文书