關於javascript中類型判斷的那些疑惑

Javascript中數據類型分爲兩種：

1. 簡單數據類型：Undefined, NULL, Boolean, Number, String
2. 複雜數據類型：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