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 Lightbox 图片展示插件使用说明
Apr 25 Javascript
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
angular动态表单制作
Feb 23 Javascript
详解webpack 入门与解析
Apr 09 Javascript
Vue.js实现的购物车功能详解
Jan 27 Javascript
小程序实现多列选择器
Feb 15 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 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
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
javascript数组去掉重复
2011/05/12 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
Python中的连接符(+、+=)示例详解
2017/01/13 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
python读取文件名并改名字的实例
2019/01/07 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
init进程的作用
2015/08/20 面试题
创意广告词
2014/03/17 职场文书
企业文化演讲稿
2014/05/20 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
初中运动会前导词
2015/07/20 职场文书
运动会致辞稿
2015/07/29 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL