Javascript判斷數據類型的五種方式及其特殊性

Javascript判斷數據類型的五種方式及區別

@

————-人工分割線————-

typeof

MDN:typeof操作符返回一個字元串,表示未經計算的操作數的類型。

    let data = {
        number : 1,
        string : 'b',
        boolean : true,
        symbol : Symbol(),
        null : null,
        undefined : undefined,
        nan : NaN,
        function : function (){},
        object : {},
        array: [],
    };

    for(let key in data) {
        console.log(key + ':::', typeof data[key]);
    }
    // -----------  列印結果  ------------------
    number::: number
    string::: string
    boolean::: boolean
    symbol::: symbol
    null::: object          // 需要注意
    undefined::: undefined
    nan::: number           // 需要注意
    function::: function
    object::: object
    array::: object         // 需要注意

null、array:列印結果都是object
NaN:列印結果是number

關於null列印成object的原因:屬於JS遺留bug,在一開是的JS版本種使用32位系統,為了提高性能使用低位存儲變數的類型資訊,所以將000 開頭代表是對象,但是 null 表示為全零,所在在判斷null時也會將它錯誤的判斷為 object 。

instanceof

MDN:instanceof 運算符用來檢測 constructor.prototype 是否存在於參數 object 的原型鏈上

 	function Animal(name) {
        this.name = name;
    }

    let cat = new Animal('cat');
    let dog = new Animal('dog');
    console.log(cat instanceof Animal);
    console.log(cat instanceof dog); // 報錯:Right-hand side of 'instanceof' is not callable
    

instanceof的右邊要求是一個構造函數,否則報錯。

如何理解:instanceof 運算符用來檢測 constructor.prototype 是否存在於參數 object 的原型鏈上??

::: 如:cat instanceof Animal:Animal.prototype是否在cat的原型鏈上【Animal–Object】,顯然是在的,所以返回true。

思考:

    function Animal(name) {
        this.name = name;
    }
    let cat = new Animal('cat'); //
	// 此時將Animal.prototype指向空對象
	let A = {};
    Animal.prototype = A;
    let cat2 = new Animal('cat2');
    console.log(cat instanceof Animal);
    console.log(cat2 instanceof Animal);

此時應該列印什麼?

先分析cat的原型鏈:【Animal — Object】
cat2的原型鏈:【A — Object】
此時Animal.prototype指向A對象,所以A在cat2的原型鏈上,而不在cat上。


所以列印結果:
false
true

總結:先找到Animal.prototype,在列出cat的原型鏈,如果在就true否則false。

特殊點:
1:instanceof 和多全局對象(例如:多個 frame 或多個 window 之間的交互)
不同的全局環境擁有不同的全局對象,從而擁有不同的內置類型構造函數。這可能會引發一些問題。比如,表達式 [] instanceof window.frames[0].Array 會返回 false,因為 Array.prototype !== window.frames[0].Array.prototype,並且數組從前者繼承。

2: String 對象和 Date 對象都屬於 Object 類型和一些特殊情況

    let simpleStr = 'simpleStr';
    let myObj = {};
    let myNullObj = Object.create(null);
    console.log(simpleStr instanceof String); //false [檢查原型鏈會找到 undefined]
    console.log(myObj instanceof Object);     //true
    console.log(myNullObj instanceof Object); //false [一種創建非 Object 實例的對象的方法]

Object.prototype.toString

MDN:方法返回一個表示該對象的字元串。

// 數據源看開頭的程式碼
 for(let key in data) {
        console.log(key + ':::', Object.prototype.toString.call(data[key]));
    }
    /*
        number::: [object Number]
        string::: [object String]
        boolean::: [object Boolean]
        symbol::: [object Symbol]
        null::: [object Null]
        undefined::: [object Undefined]
        nan::: [object Number]  // 需要注意
        function::: [object Function]
        object::: [object Object]
        array::: [object Array]
    * */
  • 為了每個對象都能通過 Object.prototype.toString() 來檢測,需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式來調用,傳遞要檢查的對象作為第一個參數,稱為 thisArg。

  • Object.prototype.toString 的原理是當調用的時候, 就取值內部的 [[Class]] 屬性值, 然後拼接成 ‘[object ‘ + [[Class]] + ‘]’ 這樣的字元串並返回. 然後我們使用 call 方法來獲取任何值的數據類型.

isArray

MDN:如果對象是 Array ,則返回true,否則為false。
這個比較簡單不寫例子了。

特殊性:當檢測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; // fals

iisNaN

MDN:用來確定一個值是否為NaN 。註:isNaN函數內包含一些非常有趣的規則;你也可以使用 ECMAScript 2015 中定義的 Number.isNaN() 來判斷。與 JavaScript 中其他的值不同,NaN不能通過相等操作符(== 和 ===)來判斷 ,因為 NaN == NaN 和 NaN === NaN 都會返回 false。 因此,isNaN 就很有必要了。

isNaN(NaN);       // true
isNaN(undefined); // true
isNaN({});        // true

isNaN(true);      // false
isNaN(null);      // false
isNaN(37);        // false

// strings
isNaN("37");      // false: 可以被轉換成數值37
isNaN("37.37");   // false: 可以被轉換成數值37.37
isNaN("37,5");    // true
isNaN('123ABC');  // true:  parseInt("123ABC")的結果是 123, 但是Number("123ABC")結果是 NaN
isNaN("");        // false: 空字元串被轉換成0
isNaN(" ");       // false: 包含空格的字元串被轉換成0

// dates
isNaN(new Date());                // false
isNaN(new Date().toString());     // true

isNaN("blabla")   // true: "blabla"不能轉換成數值
                  // 轉換成數值失敗, 返回NaN

一個有用的特性:
有許多方式來看待isNaN():如果isNaN(x)返回false,那麼x在任何算數表達式中都不會使表達式等於NaN;如果返回true,x會使所有算數表達式返回NaN。這就意味著,在JavaScript中,isNaN(x)==true等價於x-0=NaN(在JavaScript中 x-0 == NaN 總是返回false,所以你不用去測試它)。

實際上, isNaN(x), isNaN(x – 0),isNaN(Number(x)), Number.isNaN(x – 0),和Number.isNaN(Number(x)) 的返回值都是一樣的 並且在JavaScript中isNaN(x)是這些表達式中最短的表達。