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 相关文章推荐
js操作二级联动实现代码
Jul 27 Javascript
js里怎么取select标签里的值并修改
Dec 10 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 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基础学习小结
2011/04/17 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
js 走马灯简单实例
2013/11/21 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
基于python实现复制文件并重命名
2020/09/16 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
如何获得EntityManager
2014/02/09 面试题
六查六看自查材料
2014/02/17 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
Python数组变形的几种实现方法
2022/05/30 Python