javascript中关于类型判断的一些疑惑小结
前言
类型判断是我们在日常工作中经常会遇到的一个功能，本文将给大家详细介绍关于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吧
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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" |
接下来我们就来看看那些奇怪的现象吧
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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
关于如何判断数组
1 2 3 | let arr = [1, 2, 3]; typeof arr "object" |
上面这个结果大家应该不陌生，那该如何正确判断数组类型呢
1、instanceof
1 | arr instanceof Array //true |
2、isArray
1 | Array.isArray(arr) // true |
3、constructor.name
1 | arr.constructor.name // "Array" |
第三种用法用的人应该比较少，不少前端的的小伙伴都没用过。对于复杂类型Object,它的每个实例都有constructor属性。
instanceof vs isArray
当检测Array实例时, Array.isArray 优于 instanceof,因为Array.isArray能检测iframes.
1 2 3 4 5 6 7 8 9 | 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也能正确判断出。
1 | arr.constructor.name //"Array" |
关于NaN
使用isNaN判断NaN。
1 | isNaN(1/'a') // true |
我们知道NaN == NaN结果是false,那如何判断两个NaN变量呢？
比较两个NaN变量，使用es6的Object.is()即可。
1 2 3 4 | let nan1 = NaN let nan2 = NaN Object.is(nan1, nan2) true |
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值
