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 相关文章推荐
javascript hashtable 修正版 下载
Dec 30 Javascript
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
利用vue实现模态框组件
Dec 19 Javascript
基于vue.js实现的分页
Mar 13 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
解决removeEventListener 无法清除监听的问题
Oct 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 Rename 更改文件、文件夹名称
2011/05/24 PHP
深入php多态的实现详解
2013/06/09 PHP
PHP批量生成静态HTML的简单原理和方法
2014/04/20 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
javascript 自定义事件初探
2009/08/21 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
信息管理专业学生自荐信格式
2013/09/22 职场文书
计算机专业个人简短的自我评价
2013/10/23 职场文书
企划经理的岗位职责
2013/11/17 职场文书
环境科学专业个人求职信
2013/12/15 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
学校节能减排方案
2014/06/13 职场文书
化工专业求职信
2014/07/01 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
民主生活会主持词
2015/07/01 职场文书
MySQL数据库必备之条件查询语句
2021/10/15 MySQL
使用CSS设置滚动条样式
2022/01/18 HTML / CSS