JS中必須知道的四種數據類型判斷方法
js有多種數據類型(Number(數值)、String(字符串)、Boolean(布爾值)、Null、Undefined、Symbol、Object、函數等),在開發過程中難免需要判斷數據類型,本文總結了四種判斷方法:
typeof
typeof是一個運算符,其有兩種使用方式:(1)typeof(表達式);(2)typeof 變量名;返回值是一個字符串,用來說明變量的數據類型;所以可以用此來判斷number, string, object, boolean, function, undefined, symbol 這七種類型,每種情況返回的內容如下表所示:(具體進階可看前端百題斬【001】)
小試牛刀
- // 字符串
- console.log(typeof('lili')); // string
- // 數字
- console.log(typeof(1)); // number
- // 布爾值
- console.log(typeof(true)); // boolean
- // undefined
- console.log(typeof(undefined)); // undefined
- // 對象
- console.log(typeof({})); // object
- // 數組
- console.log(typeof([])); // object
- // null
- console.log(typeof(null)); // object
- // 函數
- console.log(typeof(() => {})); // function
- // Symbol值
- console.log(typeof(Symbol())); // symbol
instanceof
instanceof運算符用于檢測構造函數的 prototype屬性是否出現在某個實例對象的原型鏈上,返回值為布爾值,用于指示一個變量是否屬于某個對象的實例。其語法如下所示:(具體進階可看前端百題斬【001】)
- object instanceof constructor
小試牛刀
- const arr = [1, 2];
- // 判斷Object的prototype有沒有在數組的原型鏈上
- console.log(arr instanceof Object); // true
- // 數組arr的原型
- const proto1 = Object.getPrototypeOf(arr);
- console.log(proto1); // []
- // 數組arr的原型的原型
- const proto2 = Object.getPrototypeOf(proto1);
- console.log(proto2); // []
- // Object的prototype
- console.log(Object.prototype);
- // 判斷arr的原型是否與Object的prototype相等
- console.log(proto1 === Object.prototype); // false
- // 判斷arr的原型的原型是否與Object的prototype相等
- console.log(proto2 === Object.prototype); // true
constructor
該種判斷方式其實涉及到原型、構造函數和實例之間的關系,更深層次的講解將放到后面的內容,下面只需要簡單了解一下這三者關系即可。
在定義一個函數(構造函數)的時候,JS引擎會為其添加prototype原型,原型上有其對應的constructor屬性指向該構造函數,從而原型和構造函數之間互相知道對方。當構造函數實例化的時候,會產生對應的實例,其實例可以訪問對應原型上的constructor屬性,這樣該實例就可以了解到通過誰產生了自己,這樣就可以在新對象產生之后了解其數據類型。
小試牛刀
- const val1 = 1;
- console.log(val1.constructor); // [Function: Number]
- const val2 = 'abc';
- console.log(val2.constructor); // [Function: String]
- const val3 = true;
- console.log(val3.constructor); // [Function: Boolean]
雖然該方法可以判斷其數據類型,但存在兩個缺點:
- null 和 undefined 是無效的對象,因此是不會有 constructor 存在的,這兩種類型的數據需要通過其他方式來判斷。
- 函數的 constructor 是不穩定的,這個主要體現在自定義對象上,當開發者重寫 prototype 后,原有的 constructor 引用會丟失,constructor 會默認為 Object
toString()
toString() 是 Object 的原型方法,調用該方法,默認返回當前對象的 [[Class]] 。這是一個內部屬性,其格式為[object Xxx] ,其中 Xxx 就是對象的類型。所以利用Object.prototype.toString()方法可以對變量的類型進行比較準確的判斷。該類型針對不同不同變量的類型返回的結果如下所示:
利用該方法很容易構建一個鑒型函數,代碼如下所示:
- function type(target) {
- const ret = typeof(target);
- const template = {
- "[object Array]": "array",
- "[object Object]":"object",
- "[object Number]":"number - object",
- "[object Boolean]":"boolean - object",
- "[object String]":'string-object'
- }
- if(target === null) {
- return 'null';
- }
- else if(ret == "object"){
- const str = Object.prototype.toString.call(target);
- return template[str];
- }
- else{
- return ret;
- }
- }
小試牛刀
- console.log(type({})); // object
- console.log(type(123)); // number
- console.log(type('123')); // string