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 相关文章推荐
基于Jquery的简单&简陋Tabs插件代码
Feb 09 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
浅谈重写window对象的方法
Dec 29 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
javascript使用链接跨域下载图片
Nov 01 Javascript
小程序外卖订单界面的示例代码
Dec 30 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
php win下Socket方式发邮件类
2009/08/21 PHP
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
js下弹出窗口的变通
2007/04/18 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
js对象基础实例分析
2015/01/13 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
nodejs express配置自签名https服务器的方法
2018/05/22 NodeJs
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
vue实现图片上传功能
2020/05/28 Javascript
Python实现文件复制删除
2016/04/19 Python
Python使用剪切板的方法
2017/06/06 Python
pandas string转dataframe的方法
2018/04/11 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
Python中反射和描述器总结
2018/09/23 Python
Python正则表达式和元字符详解
2018/11/29 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
Python是怎样处理json模块的
2020/07/16 Python
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
求职简历中个人的自我评价
2013/12/01 职场文书
办公室经理岗位职责
2014/01/01 职场文书
绿色城市实施方案
2014/03/19 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
项目合作协议书
2014/04/16 职场文书
鉴定评语大全
2014/05/05 职场文书
社团活动总结报告
2014/06/27 职场文书
2015年超市工作总结范文
2015/05/26 职场文书